Layout
Mit dem Layout-Modul gestaltest du Datenbank-Layouts ganz nach deinen Vorstellungen, zum Beispiel ausklappbare Menüs, interaktive Formulare oder einladende Dashboards. Es ist Teil unseres Essential UI Bundles, das vier Module für eine optimale Darstellung deiner Inhalte bietet: Layout, Interaction, Badge und Card. Während sich die Module unseres Bundles den gleichen optimierten JS-Code teilen und dadurch eine hohe Performance und Flexibilität bieten, ermöglichen sie dir durch ihr unterschiedliches Grunddesign eine schnellere Umsetzung passender Darstellungen.
Funktion und Aussehen
Das Layout-Modul basiert auf dem Konzept von Blocks, also Blöcken, die du entweder horizontal (von links nach rechts) oder vertikal (von oben nach unten) anordnen kannst. Der Inhalt der Blocks ist frei gestaltbar und kann beispielsweise Text, andere GIP- oder arcRider-Module sowie HTML-Elemente enthalten. Deiner Kreativität sind keine Grenzen gesetzt. Außerdem kannst du deinen Layouts und Blocks ganz einfach eine individuelle Optik verleihen. Nutze dafür entweder den Style-Key für Inline-Styling oder den Class-Key, um deine eigenen globalen Classes zu referenzieren.
Nutzer-Interaktion
Auch bei der Gestaltung der Nutzer-Interaktion mit dem Modul lassen wir dir alle Freiheiten. Sowohl dem Layout 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_layout({
uniqueId: "",
embedded: {
},
blocks: [{
value: *any*,
}],
})html( raw(GIP_master({})) +
raw(GIP_layout({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
},
direction: "",
class: "",
style: "",
blocks: [{
class: "",
style: "",
value: *any*,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
}],
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
})
))Key-Table
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Beispiele
Text mit Layout anordnen
Wir möchten Inhalt mit dem Layout-Modul anordnen, in diesem Beispiel den Text für ein Brot-Rezept. Das Ergebnis soll wie folgt aussehen: 
Um die Überschrift "Rezept für Dinkel-Mischbrot" oberhalb des eigentlichen Rezepts anzulegen, benötigen wir zuerst ein vertikales Layout mit zwei Blöcken.Der erste Block enthält die Überschrift, der zweite Block ist für das Rezept.
GIP_layout({
uniqueId: "Outer Layout" + Nr,
embedded: false,
direction: "vertical",
blocks: [{
style: "",
value: "Rezept für Dinkel-Mischbrot"
},
{
style: "",
value: "" //Hier kommt gleich der Inhalt für das Rezept rein.
}]
})Dem Block der Überschrift geben wir einen Inline-Style, um die Aspekte wie Schriftart, Farbe, Größe, etc.einzustellen und den Text mittig im Block darzustellen.
color: #7F0000; font: small-caps bold 25px/2 times-new-roman; text-align: center;Das Rezept selbst ordnen wir mit einem weiteren Layout in zwei Spalten an, um links unsere Mengenangaben und rechts die Anweisungen anzuzeigen.Das Layout hat in diesem Fall die Ausrichtung "horizontal" und istembedded: true.
Für dieses zweite Layout verändern wir nun insgesamt Schriftart, Größe, Zeilenabstand und Farbe:
color: #1F305E; font: 14px/2 arial;Zusätzlich zu diesem Styling erhalten die beiden Layout-Blöcke noch eine Breite, Padding und im Fall des linken Blocks eine Border.Die Texte schreiben wir jeweils als HTML-Listen.