Header

1 Introduction

A header combines the functionality of a page title and a control bar for your page. Due to its compact design and versatility it is often used in mobile pages. A header can only be used in a layout.

Headers consist of three distinct elements: a page title and a left and right drop-zone. The page title is indicated by the text [Page title]. The drop-zones cannot be seen by default, but they can be selected and also become visible when they have elements dropped into them.

For example, the following header has the right drop-zone selected and the user is dropping a button into the left drop-zone.

The drop-zones are intended for confirmation buttons, such as an action button for creating a new object, but can easily be appropriated for any number of alternate implementations.

The page title placeholder is replaced by the page title setting of the page being displayed.

For example, the image below shows an edit page derived from a layout with a header. The page title is automatically set to that of the page and the drop-zones have been used to add a save and cancel button, replacing the need to add a control bar to the data view.

2 Properties Pane

The properties pane is divided into two major sections by a toggle at the top of the pane: Properties and Styling. Header properties consist of the following sections:

Properties:

• Common

Styling:

• Design Properties
• Common

3 Properties

3.1 Common Section

4 Styling

4.1 Design Properties Section

4.2 Common Section