Header | X4Documentation

Mit <Header>-Controls können Sie Überschriften erzeugen, um Inhalte in Ihrer Web App zu gliedern und visuell voneinander abzutrennen. Ein Header kann nicht nur im oberen Teil eines Layouts platziert werden, sondern überall, wo er benötigt wird.

Hinweise zur Verwendung

Ein <Header>-Control wird mit dem Element <Header> erzeugt.

<Header>
...
</Header>

<Header>-Controls können in allen verfügbaren Layouttypen verwendet werden. Weitere Informationen finden Sie unter Layouts.

Attribute

Hinweis:

Es gibt eine Reihe von Standardattributen, die für alle Controls festgelegt werden können. Weitere Informationen zu den Standardattributen finden Sie unter Standardattribute.

Zusätzlich zu den Standardattributen können Sie die folgenden Attribute für <Header>-Controls definieren.

Attribut	Beschreibung
`titleLevel`	Definiert die Überschriftenebene. Mögliche Werte: `title` (Standard) `subtitle` Hinweis: Wenn Sie `titleLevel` auf `subtitle` setzen, erhält der Untertitel die für das Layout festgelegte Hintergrundfarbe.
`value`	Erforderlich Enthält den Header-Text. Übersetzbar Data Binding möglich Mögliche Werte: Beliebige Zeichenkette Ausdruck für Data Binding (Beispiel: `value="#data"`) Übersetzungsschlüssel (Beispiel: `value="$translation"`)

Attribut

Beschreibung

titleLevel

Definiert die Überschriftenebene.

Mögliche Werte:

title (Standard)
subtitle

Hinweis:

Wenn Sie titleLevel auf subtitle setzen, erhält der Untertitel die für das Layout festgelegte Hintergrundfarbe.

value

Erforderlich

Enthält den Header-Text.

Übersetzbar
Data Binding möglich

Mögliche Werte:

Beliebige Zeichenkette
Ausdruck für Data Binding (Beispiel: value="#data")
Übersetzungsschlüssel (Beispiel: value="$translation")

Beispiel

Header in der 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>