Flex Box
Einführung
Eine FlexBox in SAP UI5 ist ein Layout-Container, der Komponenten flexibel anordnet und sich automatisch an verschiedene Bildschirmgrößen anpasst. Sie ermöglicht es, Inhalte horizontal oder vertikal auszurichten und den verfügbaren Platz effizient zu nutzen.
Attribute im Designer
| Attribut | Beschreibung | Standardwert |
|---|---|---|
| controlId | Eindeutige Id der Komponente | Wird automatisch generiert |
| width | Definiert die Breite des Controls | 100% |
| height | Definiert die Höhe des Controls | |
| backgroundDesign | Definiert das Aussehen des Hintergrunds mit möglichen Werten: Solid, Transparent, Translucent | Transparent |
| direction | Richtung der FlexBox mit möglichen Werten: Row, Column, RowReverse, ColumnReverse, Inherit | Column |
| alignContent | Spezifiziert, wie der Inhalt ausgerichtet werden soll, wenn an der Querachse Platz über ist. Mögliche Werte: Start, End, Center, SpaceBetween, SpaceAround, Stretch, Inherit | Stretch |
| alignItems | Spezifiziert die Ausrichtung der Items an der Querachse. Mögliche Werte: Start, End, Center, Baseline, Stretch, Inherit | Stretch |
| justifyContent | Spezifiziert die Ausrichtung der Items an der Hauptachse. Mögliche Werte: Start, End, Center, SpaceBetween, SpaceAround, Inherit | End |
| renderType | Bestimmt, wie das Layout gerendert werden soll. Mögliche Optionen: Div, List, Bare | Div |
| fitContainer | Bestimmt, ob die Größe der FlexBox so gewählt werden soll, dass sie komplett in ihren Container (also Parent) passt | false |
| wrap | Spezifiziert das Wrapping-Verhalten. Mögliche Optionen: NoWrap, Wrap, WrapReverse | NoWrap |
| visible | Gibt an, ob die Komponente angezeigt werden soll | true |
| spanS | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |
| spanM | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |
| spanL | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |
| spanXL | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |