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.

Allgemeine Eigenschaften

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.

Eine vollständige Spezifikation aller Attribute, einschließlich der allgemeinen und komponentenspezifischen, finden Sie in der Standard Catalog Definition (JSON Schema).

Layoutkomponenten

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 Attributen distribution und alignment gesteuert werden.

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

Attribut Typ/Werte Beschreibung
children explicitList oder template Die untergeordneten Komponenten, die horizontal in der Zeile angeordnet werden sollen.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Steuert, wie untergeordnete Komponenten entlang der horizontalen Achse verteilt werden.
alignment start, center, end, stretch Steuert, wie untergeordnete Komponenten auf der vertikalen Achse ausgerichtet werden.

JSON

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

Spalte

Ein Column ist eine Layoutkomponente, mit der die untergeordneten 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 distribution und alignment gesteuert werden.

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

Attribut Typ/Werte Beschreibung
children explicitList oder template Die untergeordneten Komponenten, die vertikal in der Spalte angeordnet werden sollen.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Steuert, wie untergeordnete Komponenten entlang der vertikalen Achse verteilt werden.
alignment start, center, end, stretch Legt fest, wie untergeordnete Komponenten auf der horizontalen Achse ausgerichtet werden.

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 explicitList oder template Die in der Liste anzuzeigenden Elemente.
direction vertical, horizontal Die Scrollrichtung der Liste.
alignment start, center, end, stretch Steuert, wie Listenelemente auf der Querachse ausgerichtet werden.

JSON

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

Displaykomponenten

Anzeigekomponenten werden verwendet, um dem Nutzer Informationen zu präsentieren. Die folgenden Displaykomponenten sind verfügbar:

Text

Mit der Komponente Text wird Textinhalt angezeigt. Sie unterstützt verschiedene Formatierungshinweise wie Überschriften, Untertitel und Textkörper.

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

Attribut Typ/Werte Beschreibung
text BoundValue Der anzuzeigende Textinhalt.
usageHint h1, h2, h3, h4, h5, caption, body Formatierungshinweis für den Text.

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 BoundValue Die URL des anzuzeigenden Bildes.
fit String Wie das Bild in den Container passen soll (z.B. „cover“).
usageHint String Hinweis zur Verwendung (z.B. „Hero“).

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 BoundValue Der Name des anzuzeigenden Symbols, z.B. „check“.

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.

JSON

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

Interaktive Komponenten

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.
primary Boolesch Gibt an, ob dies ein primärer (hervorgehobener) Button ist.
action Objekt Die Aktion, die ausgelöst werden soll, wenn auf die Schaltfläche geklickt wird.

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 BoundValue Das Label für das Textfeld.
text 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.

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 BoundValue Das Label für das Kästchen.
value BoundValue (boolesch) Der Wert des Kästchens („true“/„false“) oder der gebundene Pfad.

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 BoundValue (Zahl) Der aktuelle Wert des Schiebereglers oder des Grenzpfads.
minValue Zahl Der Mindestwert des Bereichs.
maxValue Zahl Der Höchstwert des Bereichs.

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

JSON

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

Multiple-Choice-Frage

Mit der Komponente MultipleChoice können Sie eine oder mehrere Optionen aus einer Liste auswählen.

In der folgenden Tabelle sind die für die Komponente MultipleChoice verfügbaren Eigenschaften 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 und einen Wert haben.
selections BoundValue Die ausgewählten Werte oder der gebundene Pfad.
maxAllowedSelections Zahl Die maximal zulässige Anzahl von Auswahlen.

JSON

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

Containerkomponenten

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.

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.

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

Attribut Typ/Werte Beschreibung
tabItems Array von Objekten Die Liste der Tabs. Jedes Element sollte ein title- und ein child-Element (Komponenten-ID) haben.

JSON

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

Nächste Schritte