Grid
Das Grid-Modul ermöglicht es dir, Inhalte präzise in einem von dir festgelegten Raster in Zeilen und Spalten anzuordnen. Da es auf dem CSS-Grid-System basiert, hast du die volle Kontrolle über die Strukturierung. Außerdem haben wir wie immer auf hohe Performance und Flexibilität Wert gelegt.
Unterscheidung zwischen Grid und Layout
Das Layout-Modul nutzt seinen flexiblen Charakter, um Elemente dynamisch entlang einer einzigen Achse – also entweder in einer Reihe oder in einer Spalte – zu verteilen und auszurichten. Das Grid-Modul hingegen spannt ein festes Raster mit Zeilen und Spalten auf, das eine präzise, zweidimensionale Positionierung von Elementen erlaubt.
Funktion und Aussehen
Der Aufbau des Grids besteht aus dem äußeren Grid-Raster und Blocks, also Blöcken, die du in diesem Grid-Raster anordnest. Der Inhalt der Blocks ist frei gestaltbar und kann beispielsweise Text, andere GIP- oder arcRider-Module sowie HTML-Elemente enthalten.
Für die Anordnung deiner Blöcke im Grid legst du zunächst die Hauptrichtung fest (horizontal / vertical), in der die Blöcke automatisch angeordnet werden.
- direction: "horizontal": Deine Blöcke werden in horizontalen Zeilen angeordnet und fließen von links nach rechts.
- direction: "vertical": Deine Blöcke werden in vertikalen Spalten angeordnet und fließen von oben nach unten.
Sobald das Ende einer Zeile / Spalte erreicht ist, brechen die Blöcke in die nächste Zeile / Spalte um. Damit das Grid weiß, wie viele Block-Elemente in eine Zeile / Spalte passen, definierst du sogenannte Tracks.
- direction: "horizontal": Dein Track sind die Spalten des Grids.
- direction: "vertical": Dein Track sind die Zeilen des Grids.
Für Tracks legst du mindestens eine der folgenden Dimensionen fest: Anzahl der Tracks und Weite jedes Tracks. Du kannst eine feste Anzahl von Tracks mit einer variablen Breite festlegen. Oder du legst eine variable Anzahl von Tracks mit festen Breiten fest. Auch eine feste Anzahl mit festen Breiten ist natürlich möglich. Du kannst aber nicht beides (Anzahl und Weite) variabel machen, da dem Grid dann die Info fehlt, wann es umbrechen soll.
In den folgenden Schaubildern haben wir dasselbe Array mit Tiernamen (["Koala", "Panda", "Tiger", "Zebra", "Bison"]) verwendet um drei verschiedene Darstellungen zu erzielen. Sie unterscheiden sich nur in der Hauptausrichtung und der Track-Anzahl.
Variante 1: Ein horizontales Grid mit 3 Tracks
{
direction: "horizontal",
gridTrackCount: 3,
block: animalArray.[{
value: animal
}]
}Variante 2: Ein horizontales Grid mit 4 Tracks
{
direction: "horizontal",
gridTrackCount: 4,
block: animalArray.[{
value: animal
}]
}Variante 3: Ein vertikales Grid mit 3 Tracks
{
direction: "vertical",
gridTrackCount: 3,
block: animalArray.[{
value: animal
}]
}Du hast außerdem die Möglichkeit, dein Grid und die Blocks unabhängig voneinander zu stylen. Nutzer dafür einfach die style- und class-Keys. Ein besonderer Vorteil des Grids ist außerdem die Möglichkeit, mit einfachen Styling-Angaben einzelne Blöcke über mehrere Zeilen oder mehrere Spalten zu spannen.
Nutzer-Interaktion
Sowohl dem Grid selbst als auch den Blocks kannst du eine beliebige Anzahl an Actions zuweisen. Jede Action besteht aus einem auslösenden Trigger und einem Array von Scripts, die bei Auslösen des Triggers ausgeführt werden. Als Trigger können Klick, Mausbewegung und alle weiteren HTML Mouse Events eingesetzt werden. Je nach Anwendung können auch andere HTML Events funktionieren. Eine Liste solcher Events findest du beispielsweise hier. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.
Modulcode
GIP_grid({
uniqueId: "",
embedded: {
},
blocks: [{
value: *any*,
}],
})html( raw(GIP_master({})) +
raw(GIP_grid({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
presets: "",
},
gridTrackCount: "" / 0,
gridTrackSize: "",
direction: "",
class: "",
style: "",
blocks: [{
class: "",
style: "",
value: *any*,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
}],
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
})
))Key-Table
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Beispiele
Grid: Basis Horizontal
Beschreibung
Wir möchten ein horizontales Grid erstellen, dass eine Track-Breite, also eine Spaltenbreite, von mindestens 150px und maximal 1fr hat. Das Grid soll automatisch so viele Tracks wie möglich pro Zeile erzeugen und automatisch in die nächste Zeile umbrechen.
Für diese Anforderung können wir größtenteils die Default-Einstellungen des Grids nutzen. Dort ist für die Tracks, also Spalten des Grids, eine Breite zwischen 150px und 1fr festgelegt durch minmax(150px, 1fr). Zusätzlich sagt repeat(auto-fit, ...), dass wir so viele Spalten wie möglich mit dieser Spaltenbreite pro Zeile erzeugen wollen. Für die Zeilen ist mit auto-flow definiert, dass diese automatisch erzeugt werden sollen.
grid: auto-flow / repeat(auto-fit, minmax(150px, 1fr));Wir vergeben zusätzliche eine Höhe für das Grid. Wenn mehr Zeilen erzeugt werden, als in diese Höhe passen, wird das Grid scrollbar. Als Inhalt der Grid-Blöcke wird hier beispielhaft das GIP-Card-Modul verwendet.
Code des Beispiels
let speedTestData := ((select '4. Data for Speedtest' where number(Nr) < 20) order by -number(Nr));
GIP_grid({
uniqueId: "Basis Horizontal" + Nr,
embedded: true,
direction: "horizontal",
class: "",
style: "height: 900px;",
blocks: speedTestData.{
class: "",
style: "",
value: GIP_card({
uniqueId: "Basis Horizontal" + Nr,
embedded: true,
direction: "vertical",
class: "",
style: "",
blocks: [{
style: "",
value: GIP_materialSymbols({
icon: "spa"
})
}, {
style: "",
value: 'Input Text 1'
}],
actions: [{
trigger: "click",
scripts: [{
type: "popupRecord",
recordId: raw(Nr)
}]
}]
})
}
})Grid: Basis Vertikal
Beschreibung
Wir möchten ein vertikales Grid erstellen, dass eine Track-Weite, also eine Zeilenhöhe, von mindestens 150px und maximal 1fr hat. Das Grid soll automatisch so viele Tracks wie möglich pro Spalte erzeugen und automatisch in die nächste Spalte umbrechen.
Für diese Anforderung können wir größtenteils die Default-Einstellungen des Grids nutzen. Dort ist für die Tracks, also Zeilen des Grids, eine Höhe zwischen 150px und 1fr festgelegt durch minmax(150px, 1fr). Zusätzlich sagt repeat(auto-fit, ...), dass wir so viele Zeilen wie möglich mit dieser Zeilenhöhe pro Spalte erzeugen wollen. Für die Spalten ist mit auto-flow definiert, dass diese automatisch erzeugt werden sollen.
grid: repeat(auto-fit, minmax(150px, 1fr)) / auto-flow;Die Höhe des Ninox-Formelfeldes schrumpft durch embedded: false in diesem Beispiel immer auf die Track-Höhe zusammen. In einem Praxisbeispiel würde man entweder eine feste Höhe für das Grid vergeben oder es in einem Container einbetten, dessen Höhe variiert werden kann. Als Inhalt der Grid-Blöcke wird hier beispielhaft das GIP-Card-Modul verwendet.
Code des Beispiels
let speedTestData := ((select '4. Data for Speedtest' where number(Nr) < 20) order by -number(Nr));
GIP_grid({
uniqueId: "Basis Horizontal" + Nr,
embedded: true,
direction: "vertical",
class: "",
style: "",
blocks: speedTestData.{
class: "",
style: "",
value: GIP_card({
uniqueId: "Basis Horizontal" + Nr,
embedded: true,
direction: "vertical",
class: "",
style: "height: 100%; width: 150px;",
blocks: [{
style: "",
value: GIP_materialSymbols({
icon: "spa"
})
}, {
style: "",
value: 'Input Text 1'
}],
actions: [{
trigger: "click",
scripts: [{
type: "popupRecord",
recordId: raw(Nr)
}]
}]
})
}
})Grid: Track-Anzahl und -Weite
Beschreibung
Wir möchten ein Grid erstellen, in dem wir 5 Tracks mit jeweils einer Breite von 200px haben.
Die Anzahl der Tracks übergeben wir mit gridTrackCount: 5 und die Breite (Weite) der Tracks mit gridTrackSize: "200px". Diese Angaben werden vom GIP-Grid zu folgendem CSS-Ausdruck umgebaut:
grid: auto-flow / repeat(5, 200px);Mit diesem Styling platziert das Grid in jeder Zeile 5 Blöcke mit je 200px Breite. Sollte die zur Verfügung stehende Breite nicht ausreichen, wird das Grid scrollbar.
Code des Beispiels
let speedTestData := ((select '4. Data for Speedtest' where number(Nr) < 20) order by -number(Nr));
GIP_grid({
uniqueId: "Fixed Tracks" + Nr,
embedded: true,
direction: "horizontal",
gridTrackCount: 5,
gridTrackSize: "200px",
class: "",
style: "height: 900px;",
blocks: speedTestData.{
class: "",
style: "",
value: GIP_card({
uniqueId: "Fixed Tracks" + Nr,
embedded: true,
direction: "vertical",
class: "",
style: "",
blocks: [{
style: "",
value: GIP_materialSymbols({
icon: "spa"
})
}, {
style: "",
value: 'Input Text 1'
}],
actions: [{
trigger: "click",
scripts: [{
type: "popupRecord",
recordId: raw(Nr)
}]
}]
})
}
})