Globaler CSS-Code
Der globale CSS-Code ist die Design-Grundlage für alle GIP-Module und wird dir daher immer mit dem globalen Code geliefert. Das Besondere: Du kannst in allen GIP-Modulen (wenn sie einen Class-Key haben) die im globalen CSS-Code enthaltenen Classes referenzieren, um dein Modul zu stylen. Wir bieten dir sogar die Möglichkeit, eigene Classes anzulegen und sie in den Modulen zu nutzen. Damit kannst du beispielsweise ein einheitliches Design für Button festlegen oder deinen Input-Feldern ein bestimmtes Aussehen geben.
Um deine eigenen CSS-Classes einzufügen, haben wir für dich die Funktion GIP_customCSS() vorbereitet. Hier hast du folgende Möglichkeiten: Schreibe deine CSS-Classes einfach als Text in die Variable "customStyleCSS" ODER schreibe deine CSS-Classes in deiner Datenbank in ein Textfeld und verweise in GIP_customCSS() auf dieses Textfeld .
Achtung
Wir raten davon ab, die von uns erstellten CSS-Classes zu verändern, da wir diese in unseren Modulen nutzen und Veränderungen die Funktionsweise beeinträchtigen könnten.
Beachte außerdem, dass du deine Classes überschreiben könntest, wenn du nach einem Modul-Update den globalen Code komplett ersetzt. Lege dir vorsichtshalber Sicherungen deiner Classes ab.
GIP-Color-Classes
Als Grundlage für individuelle Design haben wir eine Auswahl an CSS-Classes angelegt, die teilweise auf Ninox-eigenen Button-Stylings basieren. Dadurch kannst du schnell einen Standard-Ninox-Look mit deinen Modulen erreichen oder sie als Grundlage für deine ganz eigenen Styling nutzen.
Die GIP-Color-Classes sind am Ende der Funktion GIP_globalCSS() zu finden und sind folgende:
Beispiele
CSS-Classes: Global Corporate Design anlegen
Beschreibung
Wir möchten unser Corporate Design global anlegen, um es überall in unserer Datenbank für Module nutzen zu können. Dafür fügen wir den folgenden CSS-Code in der globalen Ninox-Funktion GIP_customCSS() ein und laden Ninox neu (STRG + F5 drücken):
Mit diesen Classes können wir nun überall in unserer Datenbank die entsprechenden Module stylen.
Code des Beispiels
---
############### Füge den folgenden CSS-Code in die globale Funktion "GIP_customCSS()" ein und lade Ninox neu: ###############
---;
"
.CompanyButton {
background-color: #e5f1ff;
border-color: #003e8d;
color: #003e8d
}
.CompanyBadge {
background-color: #ffe9cc;
border-color: #ff9b2c;
color: #ff9b2c;
width: 100px;
height: 30px;
font-size: 12px;
border-radius: 15px;
}
.CompanyDialog {
border-color: #ff9b2c;
color: #522e00;
width: 400px;
height: 270px;
}
";
---
############### Füge den folgenden Code in dein Ninox-Formelfeld ein: ###############
---;
let dialogId := "MeinDialog" + Nr;
GIP_dialog({
uniqueId: dialogId,
class: "CompanyDialog",
style: "padding: 30px",
value: GIP_layout({
uniqueId: "Layout" + Nr,
embedded: true,
direction: "vertical",
style: "height: 100%;",
blocks: [{
style: "justify-content: center;",
value: GIP_interaction({
uniqueId: "Badge" + Nr,
embedded: true,
class: "CompanyBadge",
blocks: [{
value: "MyCompany"
}]
})
}, {
style: "height: 190px;",
value: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}, {
value: GIP_interaction({
uniqueId: "Button" + Nr,
embedded: true,
class: "CompanyButton",
blocks: [{
value: "Schließe Dialog"
}],
actions: [{
trigger: "click",
scripts: [{
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
})
}]
}),
showCloseButton: true,
showAsModal: true
})) +
raw(GIP_interaction({
uniqueId: "OpenDialog" + Nr,
embedded: true,
blocks: [{
value: "Öffne Dialog als Beispiel"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: dialogId
}]
}]
}))Interaction: Global CSS-Classes
Beschreibung
Wir möchten ein GIP-Interaction stylen und dafür eine globale CSS-Class nutzen. Dafür können wir entweder eine Auswahl an GIP-Color-Classes nutzen (teilweise basierend auf Ninox-eigenen Button-Stylings) oder wir legen eine eigene CSS-Class an.
Infos zu den existierenden GIP-Color-Classes und dazu, wie du eigene CSS-Classes anlegst, findest du im Kapitel "Globaler CSS-Code".
Code des Beispiels
---
############### Füge den folgenden CSS-Code in die globale Funktion "GIP_customCSS()" ein und lade Ninox neu: ###############
---;
"
.MyCustomClass {
color: #FFAA3A;
border-width: 2px;
border-color: #7F0000;
border-style: dotted dashed solid double;
}
";
---
############### Füge den folgenden Code in dein Ninox-Formelfeld ein: ###############
---;
GIP_layout({
uniqueId: "Horizontal" + Nr,
embedded: true,
direction: "horizontal",
style: "gap: 8px;",
blocks: [{
value: GIP_layout({
uniqueId: "Vertical1" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_interaction({
uniqueId: "GIPColorPlain" + Nr,
embedded: true,
class: "GIPColorPlain",
blocks: [{
value: "GIPColorPlain"
}]
})
}, {
value: GIP_interaction({
uniqueId: "GIPColorPurple" + Nr,
embedded: true,
class: "GIPColorPurple",
blocks: [{
value: "GIPColorPurple"
}]
})
}, {
value: GIP_interaction({
uniqueId: "GIPColorBlue" + Nr,
embedded: true,
class: "GIPColorBlue",
blocks: [{
value: "GIPColorBlue"
}]
})
}, {
value: GIP_interaction({
uniqueId: "GIPColorRed" + Nr,
embedded: true,
class: "GIPColorRed",
blocks: [{
value: "GIPColorRed"
}]
})
}]
})
}, {
value: GIP_layout({
uniqueId: "Vertical2" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_interaction({
uniqueId: "GIPColorGreen" + Nr,
embedded: true,
class: "GIPColorGreen",
blocks: [{
value: "GIPColorGreen"
}]
})
}, {
value: GIP_interaction({
uniqueId: "GIPColorWhite" + Nr,
embedded: true,
class: "GIPColorWhite",
blocks: [{
value: "GIPColorWhite"
}]
})
}, {
value: GIP_interaction({
uniqueId: "GIPColorNyan" + Nr,
embedded: true,
class: "GIPColorNyan",
blocks: [{
value: "GIPColorNyan"
}]
})
}, {
value: GIP_interaction({
uniqueId: "MyCustomClass" + Nr,
embedded: true,
class: "MyCustomClass",
blocks: [{
value: "MyCustomClass"
}]
})
}]
})
}]
})Badge: Globale CSS-Classes
Beschreibung
Wir möchten ein GIP-Badge stylen und dafür eine globale CSS-Class nutzen. Dafür können wir entweder eine Auswahl an GIP-Color-Classes nutzen (teilweise basierend auf Ninox-eigenen Button-Stylings) oder wir legen eine eigene CSS-Class an. Wie im Bild zu sehen, wird durch die Class auch das Material-Symbol im Text beeinflusst. Das liegt daran, dass Material-Symbols im Hintergrund eine spezielle Schriftart sind, die mit den herkömmlichen CSS-Stylings für Schriften gestyled werden kann.
Infos zu den existierenden GIP-Color-Classes und dazu, wie du eigene CSS-Classes anlegst, findest du im Kapitel "Globaler CSS-Code".
Code des Beispiels
---
############### Füge den folgenden CSS-Code in die globale Funktion "GIP_customCSS()" ein und lade Ninox neu: ###############
---;
"
.MyCustomClass {
color: #FFAA3A;
border-width: 2px;
border-color: #7F0000;
border-style: dotted dashed solid double;
}
";
---
############### Füge den folgenden Code in dein Ninox-Formelfeld ein: ###############
---;
GIP_layout({
uniqueId: "HorizontalBadge" + Nr,
embedded: true,
direction: "horizontal",
style: "gap: 8px;",
blocks: [{
value: GIP_layout({
uniqueId: "VerticalBadge1" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_badge({
uniqueId: "GIPColorPlain" + Nr,
embedded: true,
class: "GIPColorPlain",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorPlain"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorPurple" + Nr,
embedded: true,
class: "GIPColorPurple",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorPurple"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorBlue" + Nr,
embedded: true,
class: "GIPColorBlue",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorBlue"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorRed" + Nr,
embedded: true,
class: "GIPColorRed",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorRed"
}]
})
}]
})
}, {
value: GIP_layout({
uniqueId: "VerticalBadge2" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_badge({
uniqueId: "GIPColorGreen" + Nr,
embedded: true,
class: "GIPColorGreen",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorGreen"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorWhite" + Nr,
embedded: true,
class: "GIPColorWhite",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorWhite"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorNyan" + Nr,
embedded: true,
class: "GIPColorNyan",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorNyan"
}]
})
}, {
value: GIP_badge({
uniqueId: "MyCustomClass" + Nr,
embedded: true,
class: "MyCustomClass",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "MyCustomClass"
}]
})
}]
})
}]
})