Look and Feel Einstellungen:
Name(obligatorisch) - Name der Komponente.
Direction(obligatorisch) - wie die Elemente innerhalb des Containers angeordnet sind, vertikal oder horizontal. Horizontal ist Standard.
Wrap(obligatorisch) - Umbruch des Inhalts, wenn er über die Grenzen des Containers hinausgeht. Nowrap als Voreinstellung
Alignment (obligatorisch) - Ausrichtung der Elemente in einem Container. Start standardmäßig.
Sizes(obligatorisch) - Abmessungen des Containers. In Pixel oder Prozent. Breite 100% als Voreinstellung
Max Width (obligatorisch) - maximale Breite des Containers in Pixeln oder in Prozent. Standardmäßig 100%.
Margin(obligatorisch) - äußerer Einzug. Standardmäßig 0.
Padding(obligatorisch) - innerer Einzug. 0 standardmäßig Bild, Farbverlauf oder Überlagerung (nicht obligatorisch) - für den Hintergrund.
Background color (nicht obligatorisch) - Primärfarbe für den Hintergrund.
Border(nicht obligatorisch) - Einstellungen für den Komponentenrahmen.
Visible(obligatorisch) - macht die Komponente sichtbar, wenn sie aktiviert ist. Standardmäßig aktiviert.
Workflow-Auslöser:
- onCreate- wird ausgelöst, wenn das Element auf der Seite erstellt wird;
- onShow- wird ausgelöst, wenn die Komponente ihren Status auf sichtbar (auf der Seite angezeigt) ändert;
- onHide- wird ausgelöst, wenn die Komponente in den Zustand "verborgen" wechselt (nicht mehr angezeigt wird);
- onDestroy- wird ausgelöst, wenn die Komponente zerstört wird;
- onClick- wird ausgelöst, wenn die Komponente angeklickt wird.
Komponenten-Aktionen:
Container get properties
Ruft die Eigenschaften des Containers ab.
Eingabeparameter:
- Component Id [string] - Identifikator der Container-Komponente.
Ausgabeparameter:
- Width[string] - die Breite der Komponente;
- Height[string] - die Höhe der Komponente;
- Flex direction [enum] - die Richtung der Komponente;
- Wrap[enum] - Umbruch der Komponente;
- Alignment horizontal [enum] - Ausrichtung der Komponente in der Horizontalen;
- Alignment vertical [enum] - die vertikale Ausrichtung der Komponente;
- Margin[string] - Rand der Komponente;
- Padding[string] - Padding der Komponente;
- Border[string] - Rand der Komponente;
- Background color[string] - die Hintergrundfarbe der Komponente;
- Visible[boolean] - Sichtbarkeitsstatus der Komponente.
Container set properties
Ruft die Eigenschaften des Containers ab.
Eingabe-Parameter:
- Component Id [string] - Bezeichner der Container-Komponente.
Ausgabe-Parameter:
- Width[string] - Breite der Komponente;
- Height [string] - Höhe der Komponente;
- Flex direction [enum] - die Richtung der Komponente;
- Wrap [enum] - Umbruch der Komponenten;
- Alignment horizontal[enum] - Ausrichtung der Komponente in der Horizontalen;
- Alignment vertical [enum] - die vertikale Ausrichtung der Komponente;
- Margin[string] - Rand der Komponente;
- Padding[string] - Padding der Komponente;
- Border[string] - Rand der Komponente;
- Background color [string] - die Hintergrundfarbe der Komponente;
- Visible [boolean] - Sichtbarkeitsstatus der Komponente.
Container update properties
Aktualisiert die Eigenschaften des Containers
Eingabeparameter:
- Component Id [string] - Bezeichner der Komponente des Containers;
- Width[string] - die Breite der Komponente;
- Height[string] - Höhe der Komponente;
- Flex direction [enum] - die Richtung der Komponente;
- Wrap [enum] - Umbruch der Komponente;
- Alignment horizontal [enum] - Ausrichtung der Komponente in der Horizontalen;
- Alignment vertica l [enum] - die vertikale Ausrichtung der Komponente;
- Margin[string] - Rand der Komponente;
- Padding[string] - Padding der Komponente;
- Border[string] - Rand der Komponente;
- Border radius [string] - Radius des Rahmens der Komponente;
- Background color [string] - die Hintergrundfarbe der Komponente;
- Visible [boolean] - Sichtbarkeitsstatus der Komponente.
Beispiel für die Verwendung
Ein Container kann verwendet werden, um Elemente zu gruppieren. Zum Beispiel, um ein Formular aus mehreren verschiedenen Eingabefeldern zusammenzustellen:
