Header | X4Documentation

<Header> controls can be used to create headlines to organize and visually separate content in your web app. A header can not only be placed at the top of a layout, but anywhere it is needed.

Instructions for use

A <Header> control is created with the <Header> element.

<Header>
...
</Header>

<Header> controls can be used in all available layout types: For more information, see Layouts.

Attribute

Note:

There are a number of default attributes that can be set for all controls. For more information about the default attributes, see Default attributes.

In addition to the default attributes, you can define the following attributes for <Header> controls.

Attribute	Description
`titleLevel`	Defines the title level. Possible values: `title` (default) `subtitle` Note: If you set `titleLevel` to `subtitle`, the subtitle gets the background color that is set for the layout.
`value`	Required Contains the header text. Translatable Data binding possible Possible values: Any string Expression for data binding (example: `value="#data"`) Translation key (example: `value="$translation"` )

Attribute

Description

titleLevel

Defines the title level.

Possible values:

title (default)
subtitle

Note:

If you set titleLevel to subtitle, the subtitle gets the background color that is set for the layout.

value

Required

Contains the header text.

Translatable
Data binding possible

Possible values:

Any string
Expression for data binding (example: value="#data")
Translation key (example: value="$translation" )

Example

Header in the Detail Component

XML

<DetailComponent path="Dashboard" displayName="Dashboard" default="true">
    <FlowLayout>
        <Header value="My profile" background="9ba5ab" horizontalAlign="center"/>
        <Header titleLevel="subtitle" fontStyle="italic" foreground="500" fontSize="medium" value="Personal data"/>
    </FlowLayout>
</DetailComponent>