Tile Image / Icon
Einführung
Ein Tile ist ein interaktives Kachel-Element, das als Einstiegspunkt zu einer Anwendung, Funktion oder Auswertung dient. Es bietet eine kompakte visuelle Darstellung (z. B. Titel, Status, Kennzahlen) und ermöglicht den schnellen Zugriff per Klick oder Touch. Dieses Tile bietet die Möglichkeit, ein Icon oder ein Bild zu verlinken, das mittig auf dem Tile angezeigt wird. Das Tile tritt nur im Frontend auf, und ist daher für das Backend irrelevant. Er ist nicht im SAP-System zu finden.
Attribute im Designer
| Attribut | Beschreibung | Standardwert |
|---|---|---|
| controlId | Eindeutige Id der Komponente | Wird automatisch generiert |
| width | Breite des Tile | |
| header | Gibt den anzuzeigenden Text im Header an. Dieser ist links oben in der Tile platziert und fett geschrieben. | |
| subheader | Gibt den anzuzeigenden Text im Subheader an. Dieser ist unter dem Header platziert und grau. | |
| backgroundImage | Hier kann ein Bild als Hintergrund für den Tile hinterlegt werden. Das eingefügte Bild füllt den Tile vollständig aus. | |
| sizeBehavior | Steuert, ob sich das Tile responsiv an das Layout anpasst oder immer eine feste, aber kleine Größe behält. Man kann zwischen "Responsive" (passt die Größe responsiv an) und "Small" (immer feste Größe) wählen. | Responsive |
| mode | Steuert, wie der Kopfbereich (Header, Subheader) dargestellt wird. Man kann zwischen "ContentMode", "HeaderMode" und "LineMode" (blendet nur Header und Subheader ein. Das Tile wird in einer Zeile dargestellt) wählen. | ContentMode |
| frameType | Steuert die Größe des Tiles und legt fest, wie viel Platz Header und Content bekommen. Man kann zwischen den folgenden We rten wählen: "OneByOne", "TwoByOne", "TwoThirds", "Auto", "TwoByHalf", "OneByHalf", "Stretch". | OneByOne |
| visible | Steuert die Sichtbarkeit des Tiles. Bei True ist es sichtbar, bei False nicht | True |
| footer | Legt den Text im Footer fest. Dieser wird unten links angezeigt und ist standardmäßig grau. | |
| footerColor | Legt die Farbe des Textes im Footer fest. Man kann zwischen "Neutral" (Grau), "Good" (Grün), "Critical" (Gelb), "Error" (Rot), "None" (Schwarz) wählen | Neutral |
| unit | Legt einen Text als Einheit fest. Diese wird links von dem Footer angezeigt und ist grau. Unit und Footer sind mit einem Komma getrennt. | |
| class | Platz für benutzerdefinierte CSS. | sapUiTinyMarginBegin sapUiTinyMarginTop |
| 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 |
| description | Gibt eine Beschreibung des Tile an. Diese wird als Tooltip angezeigt, wenn die Maus das Tile berührt. | |
| src | Link zum Hinzufügen eines Icons oder eines Bildes. Beides wird mittig auf der Tile angezeigt und füllt es nicht vollständig aus |