Hinweis:Diese Dokumentation gilt für die Standard-, Plus-, Pay-as-you-go- und Frontline-Version von Gemini Enterprise. Die Dokumentation für die Business-Version finden Sie in der Gemini Enterprise-Hilfe für die Business-Version.

Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Referenz zur A2UI-Komponentengalerie

Auf dieser Seite finden Sie eine umfassende Referenz für alle verfügbaren A2UI-Komponenten, einschließlich Layout-, Anzeige-, interaktiver und Containerkomponenten sowie allgemeiner Eigenschaften.

Materialkatalogkomponenten und grundlegende Katalogkomponenten

A2UI bietet zwei verschiedene Komponentenkataloge zum Erstellen von Agent-Benutzeroberflächen: den Material-Katalog und den Basic-Katalog.

Der Materialkatalog enthält Komponenten, die speziell für die Einhaltung der Google Material Design-Richtlinien entwickelt wurden. Er bietet eine umfangreichere, stilvollere Reihe von UI-Elementen, die in A2UI v0.9-Konfigurationen unterstützt werden.

Der einfache Katalog enthält standardmäßige, designsystemunabhängige UI-Grundelemente wie Layouts, Aktionen und Eingaben, die sowohl in A2UI-Konfigurationen der Version 0.9 als auch der Version 0.8 unterstützt werden.

Komponenten des Materialkatalogs

In diesem Abschnitt finden Sie eine Referenz für verfügbare A2UI Material Design-Komponenten, einschließlich Layout-, Anzeige-, Navigations- und Eingabekomponenten.

Allgemeine Eigenschaften des Materialkatalogs

Alle Komponenten haben unabhängig von ihrem spezifischen Typ eine Reihe gemeinsamer Eigenschaften, die konfiguriert werden können:

Attribut	Erforderlich	Beschreibung
`id`	Ja	Eine eindeutige Kennung für die Komponente auf der aktuellen Oberfläche.
`accessibility`	Nein	Attribute zur Verbesserung der Barrierefreiheit, z. B. Labels und Rollen.
`weight`	Nein	Ein Wert, der in `MaterialRow`- oder `MaterialColumn`-Layouts verwendet wird, um zu steuern, wie viel Platz die Komponente im Verhältnis zu ihren gleichgeordneten Elementen einnimmt. Er ähnelt `flex-grow`.

Layoutkomponenten für Materialkataloge

Layoutkomponenten werden verwendet, um andere Komponenten in der Benutzeroberfläche zu strukturieren und anzuordnen.

MaterialCard

Material Design-Kartencontainer.

In der folgenden Tabelle sind die für die Komponente MaterialCard verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`children`	Ja	-	Definiert die untergeordneten IDs.
`appearance`	Nein	`raised`	Der Stil der Kartendarstellung. Einer der folgenden Werte: „outlined“, „raised“.
`align`	Nein	`start`	Ausrichtung von Kindern. Einer der folgenden Werte: „center“, „end“, „start“, „stretch“.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`href`	Nein	-	Optionale URL, zu der navigiert werden soll, wenn auf die Karte geklickt wird. Wenn diese Option aktiviert ist, wird die Karte interaktiv und die URL wird in einem neuen Tab geöffnet.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

Layout-Container, in dem Elemente gemäß den Material-Richtlinien vertikal angeordnet werden.

In der folgenden Tabelle sind die für die Komponente MaterialColumn verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`children`	Ja	-	Definiert die untergeordneten IDs.
`justify`	Nein	`start`	Definiert die Anordnung der untergeordneten Elemente entlang der Hauptachse (vertikal). Einer der folgenden Werte: „start“, „center“, „end“, „spaceBetween“, „spaceAround“, „spaceEvenly“.
`align`	Nein	`stretch`	Horizontale Ausrichtung von untergeordneten Elementen („start“, „center“, „end“, „stretch“).
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "demo-column-header",
      "demo-column-content",
      "demo-column-footer"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "demo-column-header",
    "component": "MaterialText",
    "text": "Header",
    "usageHint": "h2"
  },
  {
    "id": "demo-column-content",
    "component": "MaterialText",
    "text": "Content goes here",
    "usageHint": "body"
  },
  {
    "id": "demo-column-footer",
    "component": "MaterialText",
    "text": "Footer",
    "usageHint": "caption"
  }
]

MaterialDialog

Material Design-Container für Menüdialogfelder.

In der folgenden Tabelle sind die für die Komponente MaterialDialog verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`open`	Nein	`false`	Gibt an, ob das Dialogfeld geöffnet ist. Kann ein boolesches Literal oder ein Datenbindungsverweis sein.
`title`	Nein	-	Der Titel des Dialogfelds.
`disableClose`	Nein	`false`	Gibt an, ob der Nutzer das Dialogfeld schließen kann, indem er außerhalb des Dialogfelds klickt oder die Esc-Taste drückt.
`width`	Nein	-	Die Breite des Dialogfelds, z.B. „500 px“.
`height`	Nein	-	Die Höhe des Dialogfelds, z.B. „400px“.
`children`	Ja	-	Definiert die untergeordneten IDs.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "action": {
      "event": {
        "name": "requestDelete"
      }
    }
  },
  {
    "id": "confirmation-dialog",
    "component": "MaterialDialog",
    "open": {
      "path": "/app/dialogOpen"
    },
    "title": "Delete Confirmation",
    "children": [
      "dialog-layout"
    ]
  },
  {
    "id": "dialog-layout",
    "component": "MaterialColumn",
    "children": [
      "dialog-text",
      "dialog-actions"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "dialog-text",
    "component": "MaterialText",
    "text": "Are you sure you want to permanently delete this item?"
  },
  {
    "id": "dialog-actions",
    "component": "MaterialRow",
    "children": [
      "cancel-button",
      "confirm-button"
    ],
    "justify": "end",
    "align": "center"
  },
  {
    "id": "cancel-button",
    "component": "MaterialButton",
    "label": "Cancel",
    "variant": "basic",
    "action": {
      "event": {
        "name": "closeDialog"
      }
    }
  },
  {
    "id": "confirm-button",
    "component": "MaterialButton",
    "label": "Delete",
    "variant": "raised",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

Trennlinie für Material Design.

In der folgenden Tabelle sind die für die Komponente MaterialDivider verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`inset`	Nein	`false`	Gibt an, ob die Trennlinie eingerückt ist.
`vertical`	Nein	`false`	Gibt an, ob die Trennlinie vertikal ist.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "text-above",
      "divider",
      "text-below"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "text-above",
    "component": "MaterialText",
    "text": "This is the content above the divider."
  },
  {
    "id": "divider",
    "component": "MaterialDivider",
    "inset": false,
    "vertical": false
  },
  {
    "id": "text-below",
    "component": "MaterialText",
    "text": "This is the content below the divider."
  }
]

MaterialExpansionPanel

Material Design-Container für maximierbare Bereiche.

In der folgenden Tabelle sind die für die Komponente MaterialExpansionPanel verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`title`	Nein	-	Der Titel, der in der Kopfzeile des Erweiterungsbereichs angezeigt wird.
`description`	Nein	-	Die Beschreibung, die in der Kopfzeile des Aufklappbereichs angezeigt wird.
`expanded`	Nein	`false`	Gibt an, ob der Bereich maximiert ist. Kann ein boolesches Literal oder ein Datenbindungsverweis sein.
`disabled`	Nein	`false`	Gibt an, ob das Aufklappfeld deaktiviert ist.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`children`	Ja	-	Definiert die untergeordneten IDs.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialExpansionPanel",
    "title": "Advanced Options",
    "description": "Configure advanced settings",
    "expanded": false,
    "children": [
      "panel-content"
    ]
  },
  {
    "id": "panel-content",
    "component": "MaterialText",
    "text": "Advanced settings content goes here"
  }
]

MaterialGridList

A2UI-Containerkomponente für das Rasterlayout. Verwendet die Angular Material-Rasterliste, um untergeordnete Komponenten in Kacheln anzuordnen.

In der folgenden Tabelle sind die für die Komponente MaterialGridList verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`children`	Ja	-	Definiert die untergeordneten IDs.
`cols`	Nein	`2`	Anzahl der Spalten in der Rasterliste. Kann eine Literalzahl oder ein Datenbindungsverweis sein.
`rowHeight`	Nein	`1:1`	Verhältnis der Zeilenhöhe oder feste Höhe (z.B. „100 px“). Kann ein Literalstring oder ein Datenbindungsverweis sein.
`gutterSize`	Nein	`1px`	Größe des Rinnenabstands im Raster. Kann ein Literalstring oder ein Datenbindungsverweis sein.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialGridList",
    "cols": 2,
    "rowHeight": "1:1",
    "gutterSize": "8px",
    "children": [
      "card-a",
      "card-b",
      "card-c",
      "card-d"
    ]
  },
  {
    "id": "card-a",
    "component": "MaterialCard",
    "children": [
      "text-a"
    ]
  },
  {
    "id": "text-a",
    "component": "MaterialText",
    "text": "Card A"
  },
  {
    "id": "card-b",
    "component": "MaterialCard",
    "children": [
      "text-b"
    ]
  },
  {
    "id": "text-b",
    "component": "MaterialText",
    "text": "Card B"
  },
  {
    "id": "card-c",
    "component": "MaterialCard",
    "children": [
      "text-c"
    ]
  },
  {
    "id": "text-c",
    "component": "MaterialText",
    "text": "Card C"
  },
  {
    "id": "card-d",
    "component": "MaterialCard",
    "children": [
      "text-d"
    ]
  },
  {
    "id": "text-d",
    "component": "MaterialText",
    "text": "Card D"
  }
]

MaterialRow

Layout-Container, der Elemente gemäß den Material-Richtlinien horizontal anordnet.

In der folgenden Tabelle sind die für die Komponente MaterialRow verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`children`	Ja	-	Definiert die untergeordneten IDs.
`justify`	Nein	`start`	Definiert die Anordnung der untergeordneten Elemente entlang der Hauptachse (horizontal). Einer der folgenden Werte: „start“, „center“, „end“, „spaceAround“, „spaceBetween“, „spaceEvenly“.
`align`	Nein	`stretch`	Vertikale Ausrichtung der untergeordneten Elemente („start“, „center“, „end“, „stretch“).
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialRow",
    "children": [
      "item-icon",
      "item-details",
      "item-action"
    ],
    "justify": "spaceBetween",
    "align": "center"
  },
  {
    "id": "item-icon",
    "component": "MaterialIcon",
    "icon": "shopping_bag",
    "color": "primary"
  },
  {
    "id": "item-details",
    "component": "MaterialColumn",
    "children": [
      "item-title",
      "item-subtitle"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "item-title",
    "component": "MaterialText",
    "text": "Premium Wireless Headphones",
    "usageHint": "subtitle1"
  },
  {
    "id": "item-subtitle",
    "component": "MaterialText",
    "text": "$299.99 \u2022 Active Noise Cancelling",
    "usageHint": "caption"
  },
  {
    "id": "item-action",
    "component": "MaterialButton",
    "label": "Buy Now",
    "variant": "raised",
    "action": {
      "event": {
        "name": "buy_clicked"
      }
    }
  }
]

Inhaltskomponenten des Materialkatalogs

Mit Anzeige- und Inhaltskomponenten werden Informationen, Medien und Status für den Nutzer präsentiert.

MaterialBadge

Zeigt ein Material Design-Badge über einem untergeordneten Element an.

In der folgenden Tabelle sind die für die Komponente MaterialBadge verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`text`	Nein	-	Textinhalt, der im Badge angezeigt werden soll.
`color`	Nein	-	Farbpalette des Badges („primary“, „accent“, „warn“).
`position`	Nein	`above after`	Position des Badges relativ zum Container („above after“, „above before“, „below after“, „below before“).
`size`	Nein	`medium`	Größe des Logos („small“, „medium“, „large“).
`overlap`	Nein	`true`	Gibt an, ob das Badge seinen Container überlappen soll.
`disabled`	Nein	`false`	Gibt an, ob das Logo deaktiviert ist.
`hidden`	Nein	`false`	Gibt an, ob das Logo ausgeblendet ist.
`description`	Nein	-	Barrierefreie Beschreibung für das Badge.
`children`	Ja	-	Definiert die untergeordneten IDs.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

Zeigt ein Material Design-Symbol an.

In der folgenden Tabelle sind die für die Komponente MaterialIcon verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`icon`	Ja	-	Der Name des anzuzeigenden Material-Symbols.
`color`	Nein	-	Farbpalette des Symbols (primär, Akzent, Warnung).
`tooltip`	Nein	-	Optionaler Kurzinfotext, der beim Hovern oder Fokussieren angezeigt wird.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

Eine A2UI-Komponente zum Rendern eines Bildes in einem Material Design-Kontext. Unterstützt die Eigenschaften „rounded-corners“, „aspect-ratio“ und „object-fit“.

In der folgenden Tabelle sind die für die Komponente MaterialImage verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`url`	Ja	-	Die URL des anzuzeigenden Bildes.
`alt`	Nein	-	Barrierefreier Alt-Text für das Bild.
`fit`	Nein	-	Gibt an, wie die Größe des Bildes an den Container angepasst werden soll. Einer der folgenden Werte: „fill“, „contain“, „cover“, „scaleDown“, „none“.
`width`	Nein	-	Benutzerdefinierte Breite des Bildes (z.B. „100px“, „100%“).
`height`	Nein	-	Benutzerdefinierte Höhe des Bildes (z.B. „100px“, „100%“).
`aspectRatio`	Nein	-	Benutzerdefiniertes Seitenverhältnis des Bildes (z.B. „16/9“, „1“).
`roundedCorners`	Nein	`false`	Gibt an, ob die standardmäßigen abgerundeten Ecken von Material Design angewendet werden sollen.
`borderRadius`	Nein	-	Benutzerdefinierter Grenzradius des Bildes (z.B. „50%“, „12px“). Überschreibt „roundedCorners“.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialImage",
    "url": "https://www.gstatic.com/marketing-cms/assets/images/c5/3a/200414104c669203c62270f7884f/google-wordmarks-2x.webp=n-w100-h32-fcrop64=1,00000000ffffffff-rw",
    "width": "100px",
    "height": "32px",
    "fit": "scaleDown",
    "roundedCorners": true,
    "alt": "Google Wordmark"
  }
]

MaterialProgressBar

A2UI-Wrapper für die Angular Material-Komponente „Progress Bar“. Unterstützt die Modi „Determinate“, „Indeterminate“, „Buffer“ und „Query“.

In der folgenden Tabelle sind die für die Komponente MaterialProgressBar verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`value`	Nein	`0`	Der Fortschrittswert (0 bis 100) im deterministischen und im Puffermodus.
`mode`	Nein	`determinate`	Der Modus der Fortschrittsanzeige. Einer der folgenden Werte: „determinate“, „indeterminate“, „buffer“, „query“.
`bufferValue`	Nein	`0`	Der Pufferwert (0 bis 100) im Puffermodus.
`color`	Nein	-	Farbpalette der Fortschrittsanzeige („primary“, „accent“, „warn“).
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

A2UI-Wrapper für die Angular Material-Komponente „Progress Spinner“ Unterstützt deterministische und nicht deterministische Modi sowie benutzerdefinierte Dimensionen.

In der folgenden Tabelle sind die für die Komponente MaterialProgressSpinner verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`value`	Nein	`0`	Der Fortschrittswert (0 bis 100) im bestimmten Modus.
`mode`	Nein	`determinate`	Der Modus des Spinners. Eine der folgenden Möglichkeiten: „determinate“ oder „indeterminate“.
`diameter`	Nein	`40`	Der Durchmesser des Fortschritts-Spinners in Pixeln.
`strokeWidth`	Nein	`4`	Die Breite des Spinner-Strichs in Pixeln.
`color`	Nein	-	Farbpalette des Spinners („primary“, „accent“, „warn“).
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

A2UI-Wrapper für die Angular Material-Tabellenkomponente. Strukturierte Daten werden in Spalten und Zeilen dargestellt.

In der folgenden Tabelle sind die für die Komponente MaterialTable verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`columns`	Ja	-	Ein Array von Spaltendefinitionen, in denen jeweils ein {header, field}-Objekt angegeben wird.
`rows`	Ja	-	Die Liste der Datenzeilen. Kann ein Array von Schlüssel/Wert-Datensätzen oder ein Datenbindungs-Verweis sein.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`caption`	Nein	-	Eine barrierefreie Überschrift/Beschreibung für die Tabelle.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

Zeigt Text mit Material-Typografie an.

In der folgenden Tabelle sind die für die Komponente MaterialText verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`text`	Ja	-	Der anzuzeigende Text. Dies kann ein Literalstring oder ein Verweis auf einen Wert im Datenmodell sein.
`usageHint`	Nein	`body`	Ein Hinweis zum Typografiestil. Einer der folgenden Werte: „h1“, „h2“, „h3“, „h4“, „h5“, „subtitle1“, „subtitle2“, „body1“, „body2“, „body“, „caption“.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Navigationskomponenten für Materialkataloge

Mit Navigations- und Aktionskomponenten können Nutzer Aktionen ausführen oder zwischen Ansichten wechseln.

MaterialButton

Material Design-Schaltfläche.

In der folgenden Tabelle sind die für die Komponente MaterialButton verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Textlabel, das auf dem Button angezeigt werden soll.
`leadingIcon`	Nein	-	Der Name des Material-Symbols, das vor dem Label angezeigt werden soll.
`trailingIcon`	Nein	-	Der Name des Material-Symbols, das nach dem Label angezeigt werden soll.
`variant`	Nein	`basic`	Die Variante des Schaltflächenstils. Einer der folgenden Werte: „raised“, „flat“, „stroked“, „icon“, „fab“, „mini-fab“, „basic“.
`appearance`	Nein	-	Das visuelle Erscheinungsbild des Buttons. Einer der folgenden Werte: „text“, „filled“, „elevated“, „outlined“, „tonal“.
`disabled`	Nein	`false`	Gibt an, ob die Schaltfläche deaktiviert ist.
`action`	Nein	-	Die Aktion, die ausgelöst werden soll, wenn auf den Button geklickt wird.
`tooltip`	Nein	-	Kurzinfo, die angezeigt wird, wenn der Nutzer den Mauszeiger auf das Element bewegt.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`disableRipple`	Nein	`false`	Gibt an, ob der Welleneffekt beim Klicken deaktiviert ist.
`extended`	Nein	`false`	Gibt an, ob die Schaltfläche mit zusätzlichem Platz für ein Label oder Symbol erweitert wird.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Material Design-Symbolschaltfläche.

In der folgenden Tabelle sind die für die Komponente MaterialIconButton verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`icon`	Ja	-	Der Name des anzuzeigenden Material-Symbols.
`action`	Ja	-	Die clientseitige Aktion, die ausgelöst werden soll, wenn auf die Symbolschaltfläche geklickt wird.
`ariaLabel`	Ja	-	Für Screenreader lesbarer Text. Aus Gründen der Barrierefreiheit wird empfohlen, nur ein Symbol zu verwenden.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`color`	Nein	-	Farbpalette des Buttons (primär, Akzent, Warnung).
`disabled`	Nein	`false`	Gibt an, ob die Schaltfläche deaktiviert ist.
`tooltip`	Nein	-	Kurzinfo, die angezeigt wird, wenn der Nutzer den Mauszeiger auf das Element bewegt.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

A2UI-Wrapper für die Angular Material-Menükomponente. Bietet eine Auslöseschaltfläche und Drop-down-Menüelemente.

In der folgenden Tabelle sind die für die Komponente MaterialMenu verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Textlabel, das auf dem Menü-Trigger-Button angezeigt wird.
`icon`	Nein	-	Der Name des Material-Symbols, das auf der Schaltfläche für den Trigger angezeigt werden soll.
`disabled`	Nein	`false`	Gibt an, ob die Schaltfläche zum Aufrufen des Menüs deaktiviert ist.
`value`	Nein	-	Der aktuell ausgewählte Wert. Kann ein Literalstring oder ein Datenbindungsverweis sein.
`options`	Ja	-	Die Liste der verfügbaren Menüoptionen. Kann ein Array von {label, value}-Objekten oder eine Datenbindungsreferenz sein.
`action`	Nein	-	Die clientseitige Aktion, die ausgelöst werden soll, wenn ein Menüelement ausgewählt wird.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialMenu",
    "label": "Options",
    "icon": "more_vert",
    "value": {
      "path": "/menu/selectedOption"
    },
    "options": [
      {
        "label": "Settings",
        "value": "settings"
      },
      {
        "label": "Help",
        "value": "help"
      },
      {
        "label": "Logout",
        "value": "logout"
      }
    ],
    "action": {
      "event": {
        "name": "menuSelection"
      }
    }
  }
]

MaterialTabs

A2UI-Wrapper für die Angular Material-Komponente „Tabs“. Rendert die Tab-Navigation und verwaltet die Auswahl des aktiven Tabs.

In der folgenden Tabelle sind die für die Komponente MaterialTabs verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`tabs`	Ja	-	Ein Array von Tab-Definitionen, in denen jeweils ein {label, content}-Objekt angegeben wird.
`activeTab`	Nein	`0`	Der nullbasierte Index des aktuell aktiven Tabs. Kann eine Literalzahl oder ein Datenbindungsverweis sein.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

Eingabekomponenten für den Materialkatalog

Mit Eingabe- und Formular-Komponenten können Nutzer Text eingeben, Optionen auswählen und Einstellungen aktivieren oder deaktivieren.

MaterialButtonToggle

Material Design-Schaltflächengruppe für die Einzelauswahl.

In der folgenden Tabelle sind die für die Komponente MaterialButtonToggle verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`value`	Nein	-	Der aktuell ausgewählte Wert. Dies kann ein Literalstring oder ein Verweis auf einen Wert im Datenmodell sein.
`options`	Ja	-	Die Liste der Optionen, die zur Auswahl stehen. Kann ein Array von {label, value}-Objekten oder eine Datenbindungsreferenz sein.
`disabled`	Nein	`false`	Gibt an, ob die Gruppe mit Ein/Aus-Schaltflächen deaktiviert ist.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`appearance`	Nein	`standard`	Der Darstellungsstil der Gruppe mit Ein/Aus-Schaltflächen. Einer der folgenden Werte: „legacy“ oder „standard“.
`vertical`	Nein	`false`	Gibt an, ob die Gruppe mit Ein/Aus-Schaltflächen vertikal angeordnet ist.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialButtonToggle",
    "ariaLabel": "Text alignment",
    "value": {
      "path": "/user/alignment"
    },
    "options": [
      {
        "label": "Left",
        "value": "left"
      },
      {
        "label": "Center",
        "value": "center"
      },
      {
        "label": "Right",
        "value": "right"
      }
    ]
  }
]

MaterialCheckbox

Material Design-Komponente „Kästchen“ für boolesche Zustände. Für eine optimale Barrierefreiheit sollten Sie ein beschreibendes Label angeben oder ariaLabel für Hilfstechnologien verwenden.

In der folgenden Tabelle sind die für die Komponente MaterialCheckbox verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Textlabel, das neben dem Kästchen angezeigt wird.
`checked`	Nein	`false`	Gibt an, ob das Kästchen angeklickt ist. Dies kann ein boolesches Literal oder ein Verweis auf einen Wert im Datenmodell sein.
`disabled`	Nein	`false`	Gibt an, ob das Kästchen deaktiviert ist.
`color`	Nein	-	Farbpalette des Kästchens („primary“, „accent“, „warn“).
`labelPosition`	Nein	`after`	Position des Labels relativ zum Kästchen („before“, „after“).
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`tooltip`	Nein	-	Kurzinfo, die angezeigt wird, wenn der Nutzer den Mauszeiger auf das Element bewegt.
`checks`	Nein	-	Ein Array von Validierungsregeln (jede mit einer dynamischen booleschen Bedingung und einer Fehlermeldung), die reaktiv ausgewertet werden, um die Gültigkeit der Eingabe zu bestimmen.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

Material Design-Komponente für die Chip-Listbox für die Einzelauswahl.

In der folgenden Tabelle sind die für die Komponente MaterialChips verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`value`	Nein	-	Der aktuell ausgewählte Wert. Dies kann ein Literalstring oder ein Verweis auf einen Wert im Datenmodell sein.
`options`	Ja	-	Die Liste der Chip-Optionen. Kann ein Array von {label, value}-Objekten oder eine Datenbindungsreferenz sein.
`disabled`	Nein	`false`	Gibt an, ob die Chip-Listbox deaktiviert ist.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`action`	Nein	-	Die Aktion, die ausgelöst werden soll, wenn ein Chip ausgewählt wird.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialChips",
    "ariaLabel": "Filter by status",
    "value": {
      "path": "/user/status"
    },
    "options": [
      {
        "label": "All",
        "value": "all"
      },
      {
        "label": "Active",
        "value": "active"
      },
      {
        "label": "Completed",
        "value": "completed"
      }
    ]
  }
]

MaterialDatepicker

Material Design-Komponente für die Datumsauswahl.

In der folgenden Tabelle sind die für die Komponente MaterialDatepicker verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Label für das Feld zur Datumsauswahl.
`placeholder`	Nein	-	Der Platzhaltertext.
`value`	Nein	-	Das aktuell ausgewählte Datum im ISO-Format.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`disabled`	Nein	`false`	Gibt an, ob die Datumsauswahl deaktiviert ist.
`checks`	Nein	-	Ein Array von Validierungsregeln (jede mit einer dynamischen booleschen Bedingung und einer Fehlermeldung), die reaktiv ausgewertet werden, um die Gültigkeit der Eingabe zu bestimmen.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Material Design-Texteingabefeld.

In der folgenden Tabelle sind die für die Komponente MaterialInput verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Label für das Eingabefeld.
`placeholder`	Nein	-	Der Platzhaltertext.
`value`	Nein	-	Der aktuelle Wert der Eingabe. Dies kann ein Literalstring oder ein Verweis auf einen Wert im Datenmodell sein.
`disabled`	Nein	`false`	Gibt an, ob die Eingabe deaktiviert ist.
`name`	Nein	-	Der Name des Eingabeelements.
`readonly`	Nein	`false`	Gibt an, ob die Eingabe schreibgeschützt ist.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`type`	Nein	`text`	Der Typ des anzuzeigenden Eingabesteuerelements. Einer der folgenden Werte: „text“, „number“, „email“, „tel“, „date“. „password“ ist nicht zulässig.
`validationRegexp`	Nein	-	Regulärer Ausdruck für die Eingabevalidierung.
`checks`	Nein	-	Ein Array von Validierungsregeln (jede mit einer dynamischen booleschen Bedingung und einer Fehlermeldung), die reaktiv ausgewertet werden, um die Gültigkeit der Eingabe zu bestimmen.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

A2UI-Wrapper für die Angular Material-Komponente „Optionsfeld“. Unterstützt die Einzelauswahl aus einer Liste von Optionen innerhalb einer Optionsfeldgruppe.

In der folgenden Tabelle sind die für die Komponente MaterialRadioButton verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`value`	Nein	-	Der aktuell ausgewählte Wert. Kann ein Literalstring oder ein Datenbindungsverweis sein.
`options`	Ja	-	Die Liste der verfügbaren Funkoptionen. Kann ein Array von {label, value}-Objekten oder eine Datenbindungsreferenz sein.
`disabled`	Nein	`false`	Gibt an, ob die Optionsfeldgruppe deaktiviert ist.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`color`	Nein	-	Farbpalette des Optionsfelds („primary“, „accent“, „warn“).
`labelPosition`	Nein	`after`	Position des Labels relativ zum Optionsfeld. Eine der folgenden Möglichkeiten: „before“ oder „after“.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialRadioButton",
    "ariaLabel": "Delivery options",
    "value": {
      "path": "/order/deliverySpeed"
    },
    "options": [
      {
        "label": "Standard",
        "value": "standard"
      },
      {
        "label": "Express",
        "value": "express"
      },
      {
        "label": "Next Day",
        "value": "nextDay"
      }
    ],
    "color": "primary",
    "labelPosition": "after"
  }
]

MaterialSelect

Material Design-Komponente für die Einzelauswahl (Drop-down-Menü). Für eine optimale Barrierefreiheit sollten Sie immer ein aussagekräftiges Label oder aria-label für Hilfstechnologien angeben.

In der folgenden Tabelle sind die für die Komponente MaterialSelect verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Label für das Auswahlfeld.
`placeholder`	Nein	-	Der Platzhaltertext, der angezeigt wird, wenn kein Wert ausgewählt ist.
`value`	Nein	-	Der aktuell ausgewählte Wert. Dies kann ein Literalstring oder ein Verweis auf einen Wert im Datenmodell sein.
`options`	Ja	-	Die Liste der Optionen, die zur Auswahl stehen. Kann ein Array von {label, value}-Objekten oder eine Datenbindungsreferenz sein.
`disabled`	Nein	`false`	Gibt an, ob die Auswahlkomponente deaktiviert ist.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`checks`	Nein	-	Ein Array von Validierungsregeln (jede mit einer dynamischen booleschen Bedingung und einer Fehlermeldung), die reaktiv ausgewertet werden, um die Gültigkeit der Eingabe zu bestimmen.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialSelect",
    "label": "Favorite Color",
    "placeholder": "Choose a color",
    "ariaLabel": "Select your favorite color",
    "value": {
      "path": "/user/favoriteColor"
    },
    "options": [
      {
        "label": "Red",
        "value": "red"
      },
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  }
]

MaterialSlideToggle

A2UI-Wrapper für die Angular Material-Komponente „Slide Toggle“. Unterstützt boolesche Umschaltbindungen und benutzerdefinierte Attribute für Bedienungshilfen.

In der folgenden Tabelle sind die für die Komponente MaterialSlideToggle verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Textlabel, das neben dem Schieberegler angezeigt wird.
`checked`	Nein	`false`	Gibt an, ob der Ein/Aus-Schalter aktiviert ist. Kann ein boolesches Literal oder ein Datenbindungsverweis sein.
`disabled`	Nein	`false`	Gibt an, ob der Schieberegler deaktiviert ist.
`required`	Nein	`false`	Gibt an, ob der Ein/Aus-Schalter erforderlich ist.
`color`	Nein	-	Farbpalette des Schalters („primary“, „accent“, „warn“).
`labelPosition`	Nein	`after`	Position des Labels relativ zum Ein/Aus-Button („before“, „after“).
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`tooltip`	Nein	-	Kurzinfo, die angezeigt wird, wenn der Nutzer den Mauszeiger auf das Element bewegt.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

A2UI-Wrapper für die Angular Material-Komponente „Schieberegler“. Unterstützt die Auswahl numerischer Werte und Bereichsbeschränkungen.

In der folgenden Tabelle sind die für die Komponente MaterialSlider verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`value`	Nein	`0`	Der aktuelle Wert des Schiebereglers. Kann eine Literalzahl oder ein Datenbindungsverweis sein.
`min`	Nein	`0`	Der Mindestwert des Schiebereglers.
`max`	Nein	`100`	Der Höchstwert des Schiebereglers.
`step`	Nein	`1`	Die Schrittweite des Schiebereglers.
`disabled`	Nein	`false`	Gibt an, ob der Schieberegler deaktiviert ist.
`color`	Nein	-	Farbpalette des Schiebereglers („primary“, „accent“, „warn“).
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

A2UI-Wrapper für die Angular Material-Komponente „Timepicker“. Unterstützt die Auswahl von Zeiträumen und die Einbindung von Formularfeldern.

In der folgenden Tabelle sind die für die Komponente MaterialTimepicker verfügbaren Eigenschaften aufgeführt:

Attribut	Erforderlich	Standardwert	Beschreibung
`label`	Nein	-	Das Textlabel für das Zeitpicker-Feld.
`placeholder`	Nein	-	Der Platzhaltertext.
`value`	Nein	-	Die aktuell ausgewählte Zeit im ISO-Format. Kann ein Literalstring oder ein Datenbindungsverweis sein.
`ariaLabel`	Nein	-	Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
`ariaLabelledby`	Nein	-	Gibt das Element (oder die Elemente) an, mit dem das aktuelle Element gekennzeichnet wird. Wird für die Barrierefreiheit verwendet.
`ariaDescribedby`	Nein	-	Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für die Barrierefreiheit verwendet.
`disabled`	Nein	`false`	Gibt an, ob die Zeitachse deaktiviert ist.
`checks`	Nein	-	Ein Array von Validierungsregeln (jede mit einer dynamischen booleschen Bedingung und einer Fehlermeldung), die reaktiv ausgewertet werden, um die Gültigkeit der Eingabe zu bestimmen.
`style`	Nein	-	Inline-Stile, die auf das Element angewendet werden sollen.
`weight`	Nein	-	Layoutgewicht für das Element, wenn es in einem Flex-Container platziert wird.

[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

Grundlegende Katalogkomponenten

Dieser Abschnitt enthält eine Referenz für verfügbare A2UI-Basiskatalogkomponenten.

Einfache Katalogschemadateien

Weitere Informationen zu diesen Attributen finden Sie unter:

Allgemeine grundlegende Katalogattribute

Alle Komponenten haben unabhängig von ihrem spezifischen Typ eine Reihe gemeinsamer Eigenschaften, die konfiguriert werden können:

Attribut	Erforderlich	Beschreibung
`id`	Ja	Eine eindeutige Kennung für die Komponente auf der aktuellen Oberfläche.
`accessibility`	Nein	Attribute zur Verbesserung der Barrierefreiheit, z. B. Labels und Rollen.
`weight`	Nein	Ein Wert, der in `Row`- oder `Column`-Layouts verwendet wird, um zu steuern, wie viel Platz die Komponente im Verhältnis zu ihren gleichgeordneten Elementen einnimmt. Er ähnelt `flex-grow`.

Grundlegende Komponenten des Kataloglayouts

Layoutkomponenten werden verwendet, um andere Komponenten in der Benutzeroberfläche zu strukturieren und anzuordnen. Die folgenden Layoutkomponenten sind verfügbar:

Zeile

Ein Row ist eine Layoutkomponente, mit der untergeordnete Komponenten horizontal von links nach rechts angeordnet werden. Sie dient als Container, in dem Sie mehrere Komponenten nebeneinander platzieren können. Der genaue Abstand und die Positionierung der untergeordneten Elemente in der Zeile können mit den Eigenschaften justify/distribution und align/alignment gesteuert werden.

In der folgenden Tabelle sind die für die Komponente Row verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`children`	v0.9:Array mit Komponenten-IDs oder Vorlagendefinition v0.8:`explicitList` oder `template`	Die untergeordneten Komponenten, die horizontal in der Zeile angeordnet werden sollen.
`justify` (v0.9) `distribution` (v0.8)	`start`, `center`, `end`, `spaceBetween`, `spaceAround`, `spaceEvenly`	Steuert, wie untergeordnete Komponenten entlang der horizontalen Achse verteilt werden.
`align` (v0.9) `alignment` (v0.8)	`start`, `center`, `end`, `stretch`	Steuert, wie untergeordnete Komponenten auf der vertikalen Achse ausgerichtet werden.

v0.9 JSON

{
  "id": "toolbar",
  "component": "Row",
  "children": ["btn1", "btn2", "btn3"],
  "justify": "spaceBetween",
  "align": "center"
}

v0.8 JSON

{
  "id": "toolbar",
  "component": {
    "Row": {
      "children": { "explicitList": ["btn1", "btn2", "btn3"] },
      "distribution": "spaceBetween",
      "alignment": "center"
    }
  }
}

Spalte

Ein Column ist eine Layoutkomponente, mit der untergeordnete Komponenten vertikal von oben nach unten angeordnet werden. Er dient als Container, in dem Sie mehrere Komponenten übereinander platzieren können. Der genaue Abstand und die Positionierung der untergeordneten Elemente in der Spalte können mit den Eigenschaften justify/distribution und align/alignment gesteuert werden.

In der folgenden Tabelle sind die für die Komponente Column verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`children`	v0.9:Array mit Komponenten-IDs oder Vorlagendefinition v0.8:`explicitList` oder `template`	Die untergeordneten Komponenten, die vertikal in der Spalte angeordnet werden sollen.
`justify` (v0.9) `distribution` (v0.8)	`start`, `center`, `end`, `spaceBetween`, `spaceAround`, `spaceEvenly`	Steuert, wie untergeordnete Komponenten entlang der vertikalen Achse verteilt werden.
`align` (v0.9) `alignment` (v0.8)	`start`, `center`, `end`, `stretch`	Legt fest, wie untergeordnete Komponenten auf der horizontalen Achse ausgerichtet werden.

v0.9 JSON

{
  "id": "content",
  "component": "Column",
  "children": ["header", "body", "footer"],
  "justify": "start",
  "align": "stretch"
}

v0.8 JSON

{
  "id": "content",
  "component": {
    "Column": {
      "children": { "explicitList": ["header", "body", "footer"] },
      "distribution": "start",
      "alignment": "stretch"
    }
  }
}

Liste

Ein List ist eine Layoutkomponente, in der eine scrollbare Liste von Elementen angezeigt wird. Es unterstützt statische untergeordnete Elemente und dynamische Vorlagen zum Generieren von Elementen aus Daten. Die Scrollrichtung kann vertikal oder horizontal sein.

In der folgenden Tabelle sind die für die Komponente List verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`children`	v0.9:Array mit Komponenten-IDs oder Vorlagendefinition v0.8:`explicitList` oder `template`	Die in der Liste anzuzeigenden Elemente.
`direction`	`vertical`, `horizontal`	Die Scrollrichtung der Liste.
`align` (v0.9) `alignment` (v0.8)	`start`, `center`, `end`, `stretch`	Steuert, wie Listenelemente auf der Querachse ausgerichtet werden.

v0.9 JSON

{
  "id": "message-list",
  "component": "List",
  "children": {
    "componentId": "message-item",
    "path": "/messages"
  },
  "direction": "vertical"
}

v0.8 JSON

{
  "id": "message-list",
  "component": {
    "List": {
      "children": {
        "template": {
          "dataBinding": "/messages",
          "componentId": "message-item"
        }
      },
      "direction": "vertical"
    }
  }
}

Grundlegende Komponenten für die Katalogdarstellung

Mit Anzeigekomponenten werden Informationen für den Nutzer präsentiert. Die folgenden Displaykomponenten sind verfügbar:

Text

In der Komponente Text wird Textinhalt angezeigt. Sie unterstützt verschiedene Formatierungshinweise wie Überschriften, Untertitel und Fließtext.

In der folgenden Tabelle sind die für die Komponente Text verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`text`	v0.9:String oder `DataBinding` v0.8:`BoundValue`	Der anzuzeigende Textinhalt.
`variant` (v0.9) `usageHint` (v0.8)	`h1`, `h2`, `h3`, `h4`, `h5`, `caption`, `body`	Formatierungshinweis für den Text.

v0.9 JSON

{
  "id": "title",
  "component": "Text",
  "text": "Welcome to A2UI",
  "variant": "h1"
}

v0.8 JSON

{
  "id": "title",
  "component": {
    "Text": {
      "text": { "literalString": "Welcome to A2UI" },
      "usageHint": "h1"
    }
  }
}

Bild

Mit der Komponente Image werden Bilder von einer angegebenen URL angezeigt. Außerdem bietet sie Optionen, mit denen Sie festlegen können, wie das Bild in den Container passt.

In der folgenden Tabelle sind die für die Komponente Image verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`url`	v0.9:String oder `DataBinding` v0.8:`BoundValue`	Die URL des anzuzeigenden Bildes.
`fit`	String	Wie das Bild in den Container passen soll (z.B. „cover“).
`variant` (v0.9) `usageHint` (v0.8)	String	Hinweis zu Nutzungs- oder Stilvarianten (z.B. „Hero“).

v0.9 JSON

{
  "id": "hero",
  "component": "Image",
  "url": "https://example.com/hero.png",
  "fit": "cover",
  "variant": "hero"
}

v0.8 JSON

{
  "id": "hero",
  "component": {
    "Image": {
      "url": { "literalString": "https://example.com/hero.png" },
      "fit": "cover",
      "usageHint": "hero"
    }
  }
}

Symbol

In der Komponente Icon werden Symbole aus einem Standardsatz angezeigt, der im Katalog definiert ist.

In der folgenden Tabelle sind die für die Komponente Icon verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`name`	v0.9:String oder `DataBinding` v0.8:`BoundValue`	Der Name des anzuzeigenden Symbols, z.B. „check“.

v0.9 JSON

{
  "id": "check-icon",
  "component": "Icon",
  "name": "check"
}

v0.8 JSON

{
  "id": "check-icon",
  "component": {
    "Icon": {
      "name": { "literalString": "check" }
    }
  }
}

Trennlinie

Mit der Komponente Divider wird eine visuelle Trennlinie angezeigt, die entweder horizontal oder vertikal sein kann.

In der folgenden Tabelle sind die für die Komponente Divider verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`axis`	`horizontal`, `vertical`	Die Ausrichtung der Trennlinie.

v0.9 JSON

{
  "id": "separator",
  "component": "Divider",
  "axis": "horizontal"
}

v0.8 JSON

{
  "id": "separator",
  "component": {
    "Divider": {
      "axis": "horizontal"
    }
  }
}

Interaktive Basiskatalogkomponenten

Mit interaktiven Komponenten können Sie mit der Anwendung interagieren, z. B. Eingaben machen oder Aktionen auslösen. Die folgenden interaktiven Komponenten sind verfügbar:

Button

Die Komponente Button ist ein klickbares Element, das eine bestimmte Aktion oder ein bestimmtes Ereignis in der Anwendung auslöst.

In der folgenden Tabelle sind die für die Komponente Button verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`child`	Komponenten-ID	Die ID der Komponente, die im Button angezeigt werden soll, z.B. eine Textkomponente.
`variant` (v0.9) `primary` (v0.8)	v0.9:String (z.B. `"primary"`) v0.8:Boolean	Der auf den Button angewendete Formatierungstyp oder die Gewichtung.
`action`	v0.9:Event-Objekt (z.B. mit dem Schlüssel „event“) v0.8:Action-Objekt (z.B. mit dem Schlüssel „name“)	Die Aktion, die ausgelöst werden soll, wenn auf den Button geklickt wird.

v0.9 JSON

{
  "id": "submit-btn",
  "component": "Button",
  "child": "submit-text",
  "variant": "primary",
  "action": {
    "event": {
      "name": "submit_form"
    }
  }
}

v0.8 JSON

{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "submit-text",
      "primary": true,
      "action": {
        "name": "submit_form"
      }
    }
  }
}

TextField

TextField ist eine interaktive Komponente, mit der Sie Text eingeben können. Außerdem wird die optionale Validierung unterstützt.

In der folgenden Tabelle sind die für die Komponente TextField verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`label`	v0.9:String v0.8:`BoundValue`	Das Label für das Textfeld.
`value` (v0.9) `text` (v0.8)	v0.9:String oder `DataBinding` v0.8:`BoundValue`	Der Textinhalt oder der gebundene Pfad.
`textFieldType`	`shortText`: `longText`, `number`, `obscured`, `date`	Der Typ des Textfelds.
`validationRegexp`	String	Regulärer Ausdruck für die Validierung.

v0.9 JSON

{
  "id": "email-input",
  "component": "TextField",
  "label": "Email Address",
  "value": { "path": "/user/email" },
  "textFieldType": "shortText"
}

v0.8 JSON

{
  "id": "email-input",
  "component": {
    "TextField": {
      "label": { "literalString": "Email Address" },
      "text": { "path": "/user/email" },
      "textFieldType": "shortText"
    }
  }
}

CheckBox

Die Komponente CheckBox ist ein boolescher Schalter, mit dem Sie eine Einstellung aktivieren oder deaktivieren können.

In der folgenden Tabelle sind die für die Komponente CheckBox verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`label`	v0.9:String v0.8:`BoundValue`	Das Label für das Kästchen.
`value`	v0.9:`DataBinding` (boolesch) v0.8:`BoundValue` (boolesch)	Der Wert des Kästchens („true“/„false“) oder der gebundene Pfad.

v0.9 JSON

{
  "id": "terms-checkbox",
  "component": "CheckBox",
  "label": "I agree to the terms",
  "value": { "path": "/form/agreedToTerms" }
}

v0.8 JSON

{
  "id": "terms-checkbox",
  "component": {
    "CheckBox": {
      "label": { "literalString": "I agree to the terms" },
      "value": { "path": "/form/agreedToTerms" }
    }
  }
}

Schieberegler

Mit der Komponente Slider können Sie einen numerischen Wert aus einem bestimmten Bereich auswählen.

In der folgenden Tabelle sind die für die Komponente Slider verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`value`	v0.9:`DataBinding` (number) v0.8:`BoundValue` (number)	Der aktuelle Wert des Schiebereglers oder des Grenzpfads.
`minValue`	Zahl	Der Mindestwert des Bereichs.
`maxValue`	Zahl	Der Höchstwert des Bereichs.

v0.9 JSON

{
  "id": "volume",
  "component": "Slider",
  "value": { "path": "/settings/volume" },
  "minValue": 0,
  "maxValue": 100
}

v0.8 JSON

{
  "id": "volume",
  "component": {
    "Slider": {
      "value": { "path": "/settings/volume" },
      "minValue": 0,
      "maxValue": 100
    }
  }
}

DateTimeInput

Mit der Komponente DateTimeInput können Sie ein Datum und eine Uhrzeit auswählen.

In der folgenden Tabelle sind die für die Komponente DateTimeInput verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`value`	v0.9:`DataBinding` v0.8:`BoundValue`	Der ausgewählte Datums-/Uhrzeitwert oder gebundene Pfad.
`enableDate`	Boolesch	Gibt an, ob die Datumsauswahl aktiviert werden soll.
`enableTime`	Boolesch	Gibt an, ob die Auswahl von Zeiträumen aktiviert werden soll.

v0.9 JSON

{
  "id": "date-picker",
  "component": "DateTimeInput",
  "value": { "path": "/booking/date" },
  "enableDate": true,
  "enableTime": false
}

v0.8 JSON

{
  "id": "date-picker",
  "component": {
    "DateTimeInput": {
      "value": { "path": "/booking/date" },
      "enableDate": true,
      "enableTime": false
    }
  }
}

ChoicePicker (v0.9) / MultipleChoice (v0.8)

Wählen Sie eine oder mehrere Optionen aus einer Liste aus. Diese Komponente wurde in Version 0.9 von MultipleChoice in ChoicePicker umbenannt.

In der folgenden Tabelle sind die verfügbaren Attribute aufgeführt:

Attribut	Typ/Werte	Beschreibung
`options`	Array von Objekten	Die Liste der Optionen, die der Nutzer auswählen kann. Jede Option sollte ein Label (String in v0.9, BoundValue in v0.8) und einen Wert haben.
`selections`	v0.9:`DataBinding` v0.8:`BoundValue`	Die ausgewählten Werte oder der gebundene Pfad.
`maxAllowedSelections`	Zahl	Die maximal zulässige Anzahl von Auswahlen.

v0.9 JSON

{
  "id": "country-select",
  "component": "ChoicePicker",
  "options": [
    { "label": "USA", "value": "us" },
    { "label": "Canada", "value": "ca" }
  ],
  "selections": { "path": "/form/country" },
  "maxAllowedSelections": 1
}

v0.8 JSON

{
  "id": "country-select",
  "component": {
    "MultipleChoice": {
      "options": [
        { "label": { "literalString": "USA" }, "value": "us" },
        { "label": { "literalString": "Canada" }, "value": "ca" }
      ],
      "selections": { "path": "/form/country" },
      "maxAllowedSelections": 1
    }
  }
}

Grundlegende Komponenten von Katalogcontainern

Containerkomponenten werden verwendet, um andere Komponenten zu gruppieren und zu organisieren. Die folgenden Containerkomponenten sind verfügbar:

Kartenspiele

Eine Card-Komponente ist ein Container mit Erhebung, Rahmen und Innenabstand, in dem zusammengehörige Inhalte gruppiert werden.

In der folgenden Tabelle sind die für die Komponente Card verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`child`	Komponenten-ID	Die ID der Komponente, die auf der Karte angezeigt werden soll.

v0.9 JSON

{
  "id": "info-card",
  "component": "Card",
  "child": "card-content"
}

v0.8 JSON

{
  "id": "info-card",
  "component": {
    "Card": {
      "child": "card-content"
    }
  }
}

Eine Modal-Komponente ist ein Overlay-Dialogfeld, das durch eine Einstiegspunktkomponente ausgelöst wird.

In der folgenden Tabelle sind die für die Komponente Modal verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`entryPointChild`	Komponenten-ID	Die ID der Komponente, die das Modal auslöst (z.B. eine Schaltfläche).
`contentChild`	Komponenten-ID	Die ID der Komponente, die als Inhalt des Modals angezeigt werden soll.

v0.9 JSON

{
  "id": "confirmation-modal",
  "component": "Modal",
  "entryPointChild": "open-modal-btn",
  "contentChild": "modal-content"
}

v0.8 JSON

{
  "id": "confirmation-modal",
  "component": {
    "Modal": {
      "entryPointChild": "open-modal-btn",
      "contentChild": "modal-content"
    }
  }
}

Tabs

Eine Tabs-Komponente bietet eine Tabbed-Oberfläche, mit der Inhalte in umschaltbaren Bereichen organisiert werden können.

In der folgenden Tabelle sind die für die Komponente Tabs verfügbaren Eigenschaften aufgeführt:

Attribut	Typ/Werte	Beschreibung
`tabItems`	Array von Objekten	Die Liste der Tabs. Jedes Element sollte ein `title` (String in Version 0.9, BoundValue in Version 0.8) und ein `child` (Komponenten-ID) haben.

v0.9 JSON

{
  "id": "settings-tabs",
  "component": "Tabs",
  "tabItems": [
    { "title": "General", "child": "general-tab" },
    { "title": "Privacy", "child": "privacy-tab" }
  ]
}

v0.8 JSON

{
  "id": "settings-tabs",
  "component": {
    "Tabs": {
      "tabItems": [
        { "title": { "literalString": "General" }, "child": "general-tab" },
        { "title": { "literalString": "Privacy" }, "child": "privacy-tab" }
      ]
    }
  }
}

Zusammenfassung der Versionsunterschiede

Die Namen und Eigenschaften der Komponenten sind in den verschiedenen Versionen weitgehend identisch. Die strukturellen Unterschiede sind:

Aspekt	v0.8	v0.9
Komponenten-Wrapper	`"component": { "Text": { ... } }`	`"component": "Text", ...props`
Stringwerte	`{ "literalString": "Hello" }`	`"Hello"`
Untergeordnete Entitäten	`{ "explicitList": ["a", "b"] }`	`["a", "b"]`
Datenbindung	`{ "path": "/data" }`	`{ "path": "/data" }` (gleich)
Text-/Bildstil	`usageHint`	`variant`
Schaltflächenstil	`primary: true`	`variant: "primary"`
Aktionsformat	`{ "name": "..." }`	`{ "event": { "name": "..." } }`
Auswahlkomponente	`MultipleChoice`	`ChoicePicker`
Layoutausrichtung	`distribution`, `alignment`	`justify`, `align`
TextField-Wert	`text`	`value`

Leitfaden zur Weiterentwicklung

Informationen zum Wechsel von Version 0.8 zu Version 0.9 finden Sie im Migrationsleitfaden für Version 0.8 zu Version 0.9.

Live-Beispiele

So sehen Sie alle Komponenten in Aktion:

cd samples/client/angular
yarn start gallery

Nächste Schritte

Eigenen Katalog definieren: Eigene Komponenten erstellen
Leitfaden zum Theming: Komponenten an Ihr Branding anpassen

Referenz zur A2UI-Komponentengalerie Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Materialkatalogkomponenten und grundlegende Katalogkomponenten

Komponenten des Materialkatalogs

Allgemeine Eigenschaften des Materialkatalogs

Layoutkomponenten für Materialkataloge

MaterialCard

MaterialColumn

MaterialDialog

MaterialDivider

MaterialExpansionPanel

MaterialGridList

MaterialRow

Inhaltskomponenten des Materialkatalogs

MaterialBadge

MaterialIcon

MaterialImage

MaterialProgressBar

MaterialProgressSpinner

MaterialTable

MaterialText

Navigationskomponenten für Materialkataloge

MaterialButton

MaterialIconButton

MaterialMenu

MaterialTabs

Eingabekomponenten für den Materialkatalog

MaterialButtonToggle

MaterialCheckbox

MaterialChips

MaterialDatepicker

MaterialInput

MaterialRadioButton

MaterialSelect

MaterialSlideToggle

MaterialSlider

MaterialTimepicker

Grundlegende Katalogkomponenten

Einfache Katalogschemadateien

Allgemeine grundlegende Katalogattribute

Grundlegende Komponenten des Kataloglayouts

Zeile

v0.9 JSON

v0.8 JSON

Spalte

v0.9 JSON

v0.8 JSON

Liste

v0.9 JSON

v0.8 JSON

Grundlegende Komponenten für die Katalogdarstellung

Text

v0.9 JSON

v0.8 JSON

Bild

v0.9 JSON

v0.8 JSON

Symbol

v0.9 JSON

v0.8 JSON

Trennlinie

v0.9 JSON

v0.8 JSON

Interaktive Basiskatalogkomponenten

Button

v0.9 JSON

v0.8 JSON

TextField

v0.9 JSON

v0.8 JSON

CheckBox

v0.9 JSON

v0.8 JSON

Schieberegler

v0.9 JSON

v0.8 JSON

DateTimeInput

v0.9 JSON

v0.8 JSON

ChoicePicker (v0.9) / MultipleChoice (v0.8)

v0.9 JSON

Referenz zur A2UI-Komponentengalerie