Raster

Ca. 4 Min. Lesezeit

TwGrid · Kategorie: Container · Container (andere Widgets können darin platziert werden)

Einstellungen

Diese Einstellungen finden Sie bei ausgewähltem Widget rechts im Eigenschaftenbereich. Der Standardwert ist der Wert, den das Widget beim ersten Einfügen in eine Seite hat.

Layout

Einstellung	Typ	Standardwert	Beschreibung
Layout-Vorlage layoutPreset	Rastervorlage	—	Visuelles Spaltenlayout. Spaltenvorlagen werden auf kleinen Bildschirmen einspaltig. Ist eine Vorlage gewählt, werden die Spaltenanzahl und Spalten (Mobil/Tablet/Desktop) ignoriert; wählen Sie Benutzerdefiniert, um die Spaltenanzahl wieder zu verwenden.
Spalten (Mobil) columnsMobile	Zahl	—	Spaltenanzahl je Bildschirmgröße (1-12). Mobil gilt für alle Bildschirme, Tablet ab mittlerer, Desktop ab großer Breite; ein leerer Wert übernimmt den der nächstkleineren Größe. Ist einer gesetzt, wird die Spaltenanzahl ignoriert; bei gewählter Layout-Vorlage werden diese Werte ignoriert.
Spalten (Desktop) columnsDesktop	Zahl	—	Spaltenanzahl je Bildschirmgröße (1-12). Mobil gilt für alle Bildschirme, Tablet ab mittlerer, Desktop ab großer Breite; ein leerer Wert übernimmt den der nächstkleineren Größe. Ist einer gesetzt, wird die Spaltenanzahl ignoriert; bei gewählter Layout-Vorlage werden diese Werte ignoriert.
Zeilenabstand (px) rowGapPx	Zahl	—	Abstand nur zwischen Zeilen bzw. Spalten in Pixeln. Überschreibt Abstand (px) und Gap in dieser Richtung.
Vertikale Ausrichtung alignItems	Auswahl	—	Vertikale Ausrichtung der Elemente in ihren Zellen. Standard streckt die Elemente auf Zellenhöhe. Optionen: "" Standard, start Anfang, center Mitte, end Ende, stretch Strecken
Min. Elementbreite (px) minItemWidth	Zahl	240	Mindestbreite jedes Elements für die Vorlage Automatisch anpassen. Elemente, die nicht mehr passen, brechen in neue Zeilen um.
Spalten (Tablet) columnsTablet	Zahl	—	Spaltenanzahl je Bildschirmgröße (1-12). Mobil gilt für alle Bildschirme, Tablet ab mittlerer, Desktop ab großer Breite; ein leerer Wert übernimmt den der nächstkleineren Größe. Ist einer gesetzt, wird die Spaltenanzahl ignoriert; bei gewählter Layout-Vorlage werden diese Werte ignoriert.
Abstand (px) gapPx	Zahl	—	Abstand zwischen Elementen in Pixeln. Ersetzt bei Angabe den Gap-Skalenwert. Leer lassen, um Gap zu verwenden.
Spaltenabstand (px) columnGapPx	Zahl	—	Abstand nur zwischen Zeilen bzw. Spalten in Pixeln. Überschreibt Abstand (px) und Gap in dieser Richtung.
Horizontale Ausrichtung justifyItems	Auswahl	—	Horizontale Ausrichtung der Elemente in ihren Zellen. Standard streckt die Elemente auf Zellenbreite. Optionen: "" Standard, start Anfang, center Mitte, end Ende, stretch Strecken

Weitere Einstellungen

Einstellung	Typ	Standardwert	Beschreibung
Spaltenanzahl columnCount	Zahl	12	Anzahl gleich breiter Spalten. Wird ignoriert, wenn eine Layout-Vorlage gewählt oder ein Wert für Spalten (Mobil/Tablet/Desktop) gesetzt ist.
Spaltengröße columnSize	Zahl	—	Liegt dieses Raster in einem anderen Raster, die Anzahl der Spalten, die es dort überspannt (1–12). Leer überspannt eine Spalte.
Startspalte columnStart	Zahl	—	Spalte des übergeordneten Rasters, in der dieses Raster beginnt. Leer platziert es automatisch.
Zeilenanzahl rowCount	Zahl	—	Anzahl gleich hoher Zeilen (1–12). Leer oder 0 erzeugt Zeilen automatisch nach Bedarf.
Zeilengröße rowSize	Zahl	—	Liegt dieses Raster in einem anderen Raster, die Anzahl der Zeilen, die es dort überspannt (1–12). Leer überspannt eine Zeile.
Startzeile rowStart	Zahl	—	Zeile des übergeordneten Rasters, in der dieses Raster beginnt. Leer platziert es automatisch.
Fluss flow	Auswahl	—	Reihenfolge, in der Elemente das Raster füllen: Zeile füllt zuerst die Zeilen, Spalte zuerst die Spalten. Standard behält die Standardreihenfolge (Zeilen). Optionen: "" Standard, row Zeile, col Spalte
Subgrid subgrid	Auswahl	—	Zeile oder Spalte übernimmt die Zeilen bzw. Spalten des übergeordneten Rasters (CSS-Subgrid). Standard verwendet eigene Zeilen und Spalten. Optionen: "" Standard, row Zeile, col Spalte
Abstand gap	Zahl	—	Abstandsskala zwischen den Elementen (1-12). Wird ignoriert, wenn Abstand (px) gesetzt ist.
Enable Flashing enableFlashing	Kontrollkästchen	Aus	Lässt das Widget blinken (ein Transparenzimpuls pro Sekunde). Wird meist an eine Alarmbedingung gebunden.
Log Button logButton	Kontrollkästchen	Aus	Zeigt zur Laufzeit beim Überfahren des Widgets ein Diagrammsymbol; ein Klick fügt die an das Widget gebundenen Tags der Log-Tag-Liste hinzu.

Bindungen

Im Abschnitt Bindungen (Regeln) des Eigenschaftenbereichs kann ein Tag mit einer Direct-Bindung an die folgenden Eigenschaften dieses Widgets gebunden werden. Die Bindungstypen (Direct, IntRange, FloatRange, Boolean, Bit) sind für alle Widgets gleich; sie werden auf der Seite Widget-Referenz beschrieben.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, subgrid, flow, layoutPreset, minItemWidth, columnCount, rowCount, columnStart, rowStart, columnSize, rowSize, gap, columnsMobile, columnsTablet, columnsDesktop, gapPx, rowGapPx, columnGapPx, alignItems, justifyItems

Zusätzlich können die Stilfelder des Widgets als style.<feld> gebunden werden (z. B. style.width, style.height, style.left, style.top).

Gemeinsame Abschnitte

Bei ausgewähltem Widget zeigt der Eigenschaftenbereich außerdem diese gemeinsamen Abschnitte: Allgemein, Layout, Aussehen, Bindungen (Regeln). Diese Abschnitte werden auf der Seite Seiteneditor beschrieben.