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 Basiskatalogkomponenten

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

Der Material-Katalog enthält Komponenten, die speziell für die Einhaltung der Google Material Design-Richtlinien entwickelt wurden. Er bietet eine umfangreichere, besser gestaltete Auswahl an UI-Elementen, die in A2UI v0.9-Konfigurationen unterstützt werden.

Der Basiskatalog enthält standardmäßige, vom Designsystem unabhängige UI-Primitive wie Layouts, Aktionen und Eingaben, die sowohl in A2UI v0.9- als auch in v0.8-Konfigurationen 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 Attribute des Materialkatalogs

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

Attribut Erforderlich Beschreibung
id Ja Eine eindeutige Kennung für die Komponente innerhalb 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 des Material-Katalogs

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 Attribute aufgeführt:

Attribut Erforderlich Standardwert Beschreibung
children Ja - Definiert die IDs der untergeordneten Elemente.
appearance Nein raised Der Darstellungsstil der Karte. Einer der folgenden Werte: „outlined“, „raised“.
align Nein start Ausrichtung von untergeordneten Elementen 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
href Nein - Optionale URL, zu der navigiert werden soll, wenn auf die Karte geklickt wird. Wenn diese Option festgelegt 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 - Layoutgewichtung 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

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

In der folgenden Tabelle sind die Attribute aufgeführt, die für die Komponente MaterialColumn verfügbar sind:

Attribut Erforderlich Standardwert Beschreibung
children Ja - Definiert die IDs der untergeordneten Elemente.
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 der untergeordneten Elemente („start“, „center“, „end“, „stretch“).
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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

Dialogfeld-Container für Material Design-Menü.

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

Attribut Erforderlich Standardwert Beschreibung
open Nein false Gibt an, ob das Dialogfeld geöffnet ist. Kann ein Literal-Boolescher Wert oder eine Datenbindungsreferenz 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. „500px“.
height Nein - Die Höhe des Dialogfelds, z.B. „400px“.
children Ja - Definiert die IDs der untergeordneten Elemente.
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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

Material Design-Trennlinie.

In der folgenden Tabelle sind die für die Komponente MaterialDivider verfügbaren Attribute 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 Attribute aufgeführt:

Attribut Erforderlich Standardwert Beschreibung
title Nein - Der Titel, der in der Kopfzeile des Maximierungsbereichs angezeigt wird.
description Nein - Die Beschreibung, die in der Kopfzeile des maximierten Bereichs angezeigt wird.
expanded Nein false Gibt an, ob der Bereich maximiert ist. Kann ein Literal-Boolescher Wert oder eine Datenbindungsreferenz 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Gibt das Element (oder die Elemente) an, das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
children Ja - Definiert die IDs der untergeordneten Elemente.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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 Attribute aufgeführt, die für die Komponente MaterialGridList verfügbar sind:

Attribut Erforderlich Standardwert Beschreibung
children Ja - Definiert die IDs der untergeordneten Elemente.
cols Nein 2 Anzahl der Spalten in der Rasterliste. Kann eine Literalzahl oder eine Datenbindungsreferenz 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 Spaltenabstands. Kann ein Literalstring oder eine Datenbindungsreferenz sein.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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

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

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

Attribut Erforderlich Standardwert Beschreibung
children Ja - Definiert die IDs der untergeordneten Elemente.
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 - Layoutgewichtung 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 Attribute 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 Logos 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 den Container überlappen soll.
disabled Nein false Gibt an, ob das Logo deaktiviert ist.
hidden Nein false Gibt an, ob das Badge ausgeblendet ist.
description Nein - Barrierefreie Beschreibung für das Logo.
children Ja - Definiert die IDs der untergeordneten Elemente.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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 Attribute aufgeführt, die für die Komponente MaterialIcon verfügbar sind:

Attribut Erforderlich Standardwert Beschreibung
icon Ja - Der Name des anzuzeigenden Material Design-Symbols.
color Nein - Farbpalette des Symbols (primär, Akzent, Warnung).
tooltip Nein - Optionaler Kurzinfotext, der beim Hovern oder Fokussieren angezeigt werden soll.
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

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

In der folgenden Tabelle sind die Attribute aufgeführt, die für die Komponente MaterialImage verfügbar sind:

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 angepasst werden soll, damit es in den Container passt. 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 abgerundeten Standardecken von Material Design angewendet werden sollen.
borderRadius Nein - Benutzerdefinierter Rahmenradius 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-Fortschrittsanzeige-Komponente. Unterstützt die Modi „Determinate“, „Indeterminate“, „Buffer“ und „Query“.

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

Attribut Erforderlich Standardwert Beschreibung
value Nein 0 Der Fortschrittswert (0 bis 100) im Determinate- und 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen 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 Progress Spinner-Komponente. Unterstützt determinierte und unbestimmte Modi sowie benutzerdefinierte Dimensionen.

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

Attribut Erforderlich Standardwert Beschreibung
value Nein 0 Der Fortschrittswert (0 bis 100) im bestimmten Modus.
mode Nein determinate Der Modus des Spinners. Einer der folgenden Werte: „determinate“, „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 Ladekreises („primary“, „accent“, „warn“).
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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. Rendert strukturierte Daten in Spalten und Zeilen.

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

Attribut Erforderlich Standardwert Beschreibung
columns Ja - Ein Array von Spaltendefinitionen, die jeweils ein {header, field}-Objekt angeben.
rows Ja - Die Liste der Datenzeilen. Kann ein Array von Schlüssel/Wert-Datensätzen oder eine Datenbindungsreferenz sein.
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
caption Nein - Eine barrierefreie Beschriftung/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 Attribute aufgeführt:

Attribut Erforderlich Standardwert Beschreibung
text Ja - Der anzuzeigende Text. Dies kann ein Stringliteral 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 - Layoutgewichtung 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 den Materialkatalog

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

MaterialButton

Material Design-Button.

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

Attribut Erforderlich Standardwert Beschreibung
label Nein - Das Textlabel, das auf dem Button angezeigt werden soll.
leadingIcon Nein - Der Name des Material Design-Symbols, das vor dem Label angezeigt werden soll.
trailingIcon Nein - Der Name des Material Design-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 der Schaltfläche. 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 ausgeführt werden soll, wenn auf den Button geklickt wird.
tooltip Nein - Kurzinfo, die beim Bewegen des Mauszeigers angezeigt wird.
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 um zusätzlichen 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-Schaltfläche mit Symbol.

In der folgenden Tabelle sind die Attribute aufgeführt, die für die Komponente MaterialIconButton verfügbar sind:

Attribut Erforderlich Standardwert Beschreibung
icon Ja - Der Name des anzuzeigenden Material Design-Symbols.
action Ja - Die clientseitige Aktion, die ausgeführt werden soll, wenn auf die Symbolschaltfläche geklickt wird.
ariaLabel Ja - Erkennbarer Text für Screenreader. Wird für die Barrierefreiheit im Internet empfohlen, da die Schaltfläche nur ein Symbol enthält.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen 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 beim Bewegen des Mauszeigers angezeigt wird.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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 einen Trigger-Button und Drop-down-Menüelemente.

In der folgenden Tabelle sind die Attribute aufgeführt, die für die Komponente MaterialMenu verfügbar sind:

Attribut Erforderlich Standardwert Beschreibung
label Nein - Das Textlabel, das auf der Menü-Trigger-Schaltfläche angezeigt wird.
icon Nein - Der Name des Material Design-Symbols, das auf der Auslöser-Schaltfläche 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 eine Datenbindungsreferenz 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 beim Auswählen eines Menüpunkts ausgeführt werden soll.
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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 Tabs-Komponente. Rendert die Tab-Navigation und verwaltet die Auswahl des aktiven Tabs.

In der folgenden Tabelle sind die Attribute aufgeführt, die für die Komponente MaterialTabs verfügbar sind:

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 eine Datenbindungsreferenz sein.
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen 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 Materialkatalog

Über Eingabe- und Formularkomponenten können Nutzer Text eingeben, eine Auswahl treffen und Optionen umschalten.

MaterialButtonToggle

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

In der folgenden Tabelle sind die Attribute aufgeführt, die für die Komponente MaterialButtonToggle verfügbar sind:

Attribut Erforderlich Standardwert Beschreibung
value Nein - Der aktuell ausgewählte Wert. Dies kann ein Stringliteral 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
appearance Nein standard Der Darstellungsstil der Gruppe mit Ein/Aus-Schaltflächen. Entweder „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 - Layoutgewichtung 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-Kästchenkomponente für booleschen Status. Für eine optimale Barrierefreiheit im Internet 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 Attribute 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 boolescher 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
tooltip Nein - Kurzinfo, die beim Bewegen des Mauszeigers angezeigt wird.
checks Nein - Ein Array von Validierungsregeln (jeweils 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-Chip-Listenfeldkomponente für die Einzelauswahl.

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

Attribut Erforderlich Standardwert Beschreibung
value Nein - Der aktuell ausgewählte Wert. Dies kann ein Stringliteral oder ein Verweis auf einen Wert im Datenmodell sein.
options Ja - Die Liste der Chipoptionen. Kann ein Array von {label, value}-Objekten oder eine Datenbindungsreferenz sein.
disabled Nein false Gibt an, ob das Listenfeld für Chips deaktiviert ist.
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen 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-Datumsauswahlkomponente.

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

Attribut Erforderlich Standardwert Beschreibung
label Nein - Das Label für das Feld „Datumsauswahl“.
placeholder Nein - Der Platzhaltertext.
value Nein - Das aktuell ausgewählte Datum im ISO-Format.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
disabled Nein false Gibt an, ob die Datumsauswahl deaktiviert ist.
checks Nein - Ein Array von Validierungsregeln (jeweils 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 Attribute aufgeführt, die für die Komponente MaterialInput verfügbar sind:

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 Stringliteral 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen 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 (jeweils 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 - Layoutgewichtung 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-Optionsfeldkomponente. Unterstützt die Einzelauswahl aus einer Liste von Optionen in einer Optionsgruppe.

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

Attribut Erforderlich Standardwert Beschreibung
value Nein - Der aktuell ausgewählte Wert. Kann ein Literalstring oder eine Datenbindungsreferenz 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
color Nein - Farbpalette des Optionsfelds („primary“, „accent“, „warn“).
labelPosition Nein after Position des Labels relativ zum Optionsfeld. Einer der folgenden Werte: „before“, „after“.
style Nein - Inline-Stile, die auf das Element angewendet werden sollen.
weight Nein - Layoutgewichtung 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-Auswahlkomponente (Drop-down-Menü) für die Einzelauswahl. Für eine optimale Barrierefreiheit sollten Sie immer ein beschreibendes Label angeben oder aria-label für Hilfstechnologien verwenden.

In der folgenden Tabelle sind die für die Komponente MaterialSelect verfügbaren Attribute 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 Stringliteral 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
checks Nein - Ein Array von Validierungsregeln (jeweils 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 Attribute aufgeführt:

Attribut Erforderlich Standardwert Beschreibung
label Nein - Das Textlabel, das neben dem Ein/Aus-Schalter für die Folie angezeigt wird.
checked Nein false Ob der Schieberegler aktiviert ist. Kann ein Literal-Boolescher Wert oder eine Datenbindungsreferenz sein.
disabled Nein false Gibt an, ob der Schieberegler deaktiviert ist.
required Nein false Gibt an, ob der Schieberegler erforderlich ist.
color Nein - Farbpalette des Schalters („primary“, „accent“, „warn“).
labelPosition Nein after Position des Labels relativ zum Schalter („before“, „after“).
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
tooltip Nein - Kurzinfo, die beim Bewegen des Mauszeigers 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": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

A2UI-Wrapper für die Angular Material-Schiebereglerkomponente. Unterstützt die Auswahl numerischer Werte und Bereichsbeschränkungen.

In der folgenden Tabelle sind die Attribute aufgeführt, die für die Komponente MaterialSlider verfügbar sind:

Attribut Erforderlich Standardwert Beschreibung
value Nein 0 Der aktuelle Wert des Schiebereglers. Kann eine Literalzahl oder eine Datenbindungsreferenz 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 - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen 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 Attribute 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 eine Datenbindungsreferenz sein.
ariaLabel Nein - Für Screenreader lesbarer Text. Empfohlen für die Barrierefreiheit, wenn kein sichtbares Label vorhanden ist.
ariaLabelledby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschriftet. Wird für Bedienungshilfen verwendet.
ariaDescribedby Nein - Kennzeichnet das Element (oder die Elemente), das das aktuelle Element beschreibt. Wird für Bedienungshilfen verwendet.
disabled Nein false Gibt an, ob die Zeitauswahl deaktiviert ist.
checks Nein - Ein Array von Validierungsregeln (jeweils 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 - Layoutgewichtung 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

In diesem Abschnitt finden Sie eine Referenz zu den verfügbaren A2UI-Basiskatalogkomponenten.

Schemadateien für Basiskataloge

Weitere Informationen zu diesen Attributen finden Sie unter:

Allgemeine Attribute des Basiskatalogs

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

Attribut Erforderlich Beschreibung
id Ja Eine eindeutige Kennung für die Komponente innerhalb 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, ähnlich wie flex-grow.

Grundlegende Komponenten des Kataloglayouts

Layoutkomponenten werden verwendet, um andere Komponenten innerhalb 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. Er fungiert als Container, in dem Sie mehrere Komponenten nebeneinander platzieren können. Die genauen Abstände und die Positionierung der untergeordneten Elemente innerhalb der Zeile können mit den Attributen justify/distribution und align/alignment gesteuert werden.

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

Attribut Typ/Werte Beschreibung
children v0.9: Array von 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

Eine Column ist eine Layoutkomponente, mit der untergeordnete Komponenten vertikal von oben nach unten angeordnet werden. Er dient als Container, in dem Sie mehrere Komponenten untereinander platzieren können. Die genauen Abstände und die Positionierung der untergeordneten Elemente innerhalb der Spalte können mit den Attributen justify/distribution und align/alignment gesteuert werden.

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

Attribut Typ/Werte Beschreibung
children v0.9: Array von 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 Steuert, 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 Attribute aufgeführt:

Attribut Typ/Werte Beschreibung
children v0.9:Array mit Komponenten-IDs oder Vorlagendefinition
v0.8:explicitList oder template 		Die Elemente, die in der Liste angezeigt werden sollen.
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

Anzeigekomponenten werden verwendet, um dem Nutzer Informationen zu präsentieren. Die folgenden Anzeigekomponenten 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 Attribute aufgeführt, die für die Komponente Text verfügbar sind:

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 Attribute 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

Die Komponente Icon zeigt Symbole aus einem im Katalog definierten Standardsatz an.

In der folgenden Tabelle sind die für die Komponente Icon verfügbaren Attribute 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

Die Komponente Divider zeigt eine visuelle Trennlinie an, die entweder horizontal oder vertikal sein kann.

In der folgenden Tabelle sind die für die Divider-Komponente verfügbaren Attribute 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 Komponenten des Basiskatalogs

Über interaktive 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 Button-Komponente 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 Attribute aufgeführt:

Attribut Typ/Werte Beschreibung
child Komponenten-ID Die ID der Komponente, die auf der Schaltfläche angezeigt werden soll (z.B. eine Textkomponente).
variant (v0.9)
primary (v0.8) 		v0.9: String (z.B. "primary")
v0.8: Boolescher Wert 		Der Stil oder die Gewichtung, die auf die Schaltfläche angewendet wird.
action v0.9: Ereignisobjekt (z.B. Schlüssel „event“)
v0.8: Aktionsobjekt (z.B. 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 Attribute 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 CheckBox-Komponente verfügbaren Attribute 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 Attribute aufgeführt:

Attribut Typ/Werte Beschreibung
value v0.9: DataBinding (Zahl)
v0.8: BoundValue (Zahl) 		Der aktuelle Wert des Schiebereglers oder des gebundenen Pfads.
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 DateTimeInput-Komponente verfügbaren Attribute 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 des Zeitraums 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 (Version 0.8) 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 vom Nutzer auswählbaren Optionen. 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 Katalogcontainerkomponenten

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 Attribute aufgeführt, die für die Komponente Card verfügbar sind:

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 Attribute 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 zum Organisieren von Inhalten in umschaltbaren Bereichen.

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

Attribut Typ/Werte Beschreibung
tabItems Array von Objekten Die Liste der Tabs. Jeder Artikel sollte ein title (String in Version 0.9, BoundValue in Version 0.8) und eine 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 Komponentennamen und -attribute 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
Button-Stil primary: true variant: "primary"
Aktionsformat { "name": "..." } { "event": { "name": "..." } }
Auswahlkomponente MultipleChoice ChoicePicker
Layoutausrichtung distribution, alignment justify, align
TextField-Wert text value

Entwicklungsleitfaden

Informationen zum Wechsel von v0.8 zu v0.9 finden Sie im Leitfaden zur Entwicklung von v0.8 zu v0.9.

Live-Beispielbilder

So sehen Sie alle Komponenten in Aktion:

cd samples/client/angular
yarn start gallery

Nächste Schritte