Badge

Mit dem Badge-Modul verleihst du deinen Datenbank-Einträgen eine schnelle und prägnante visuelle Aussagekraft. Ob Statusanzeigen, Kategorisierungen oder Kennzeichnungen – Badges machen Informationen auf einen Blick erfassbar. 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 Badge-Modul ist darauf ausgelegt, kleine, aber aussagekräftige Informationen visuell hervorzuheben. Du kannst Badges in verschiedenen Formen, Größen und Farben gestalten, um sie perfekt in dein bestehendes Design zu integrieren. Sie eignen sich ideal, um beispielsweise den Status eines Auftrags, die Priorität einer Aufgabe oder die Anzahl ungelesener Nachrichten anzuzeigen. Die individuelle Gestaltung erfolgt wie gewohnt über den Style-Key oder den Class-Key. Nutze den Class-Key, um deine eigenen globalen Classes zu referenzieren.

Nutzer-Interaktion

Obwohl Badges primär zur Anzeige dienen, können auch sie mit Interaktionen versehen werden. Du kannst jedem Badge 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

Vollständiger Code

GIP_badge({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   direction: "",
   class: "",
   style: "",
   blocks: [{
   	class: "",
   	style: "",
   	value: *any*,
   	actions: [{
   		trigger: "",
   		scripts: [{
   			type: "",
   		}],
   	}],
   }],
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
})

Minimaler Code

GIP_badge({
   uniqueId: "",
   embedded: {
   },
   blocks: [{
   	value: *any*,
   }],
})

Vollständiger Code mit Master

html( raw(GIP_master({})) + 
raw(GIP_badge({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   direction: "",
   class: "",
   style: "",
   blocks: [{
   	class: "",
   	style: "",
   	value: *any*,
   	actions: [{
   		trigger: "",
   		scripts: [{
   			type: "",
   		}],
   	}],
   }],
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
})
))

Key-Table

arrow_rightuniqueIdRequired string Default: - Eindeutige Kennung des eingesetzten Moduls. Ideal ist eine Kombination aus Text und der Record-ID, also z.B.: uniqueId: "LayoutÜberschrift" + Nr Ist die ID nicht einzigartig, kann es zu Fehlern bei Anzeige und Funktion der eingesetzten Module in der Tabelle kommen.

arrow_rightembeddedRequired boolean, object Default: false Wenn des Modul in einem anderen Modul eingebettet ist, wird der boolesche Wert true eingetragen. Liegt das Modul alleine, bzw. als äußerster Container in einem Formelfeld, kann entweder false oder ein Object mit Angaben zur Höhe und Styling des Formelfeldes angegeben werden.

arrow_rightheight string Default: "auto" Höhe des Moduls in Pixeln (px).

arrow_rightstyleHtml string Default: - Inline CSS-Styling des Html-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightstyleStri string Default: - Inline CSS-Styling des Stringeditor-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightdirection string Default: "horizontal" Für die Ausrichtung der Blöcke des Moduls gibt es die Befehle "horizontal" (von links nach rechts nebeneinander) und "vertical" (von oben nach unten untereinander).

arrow_rightclass string Default: - Styling des Moduls mithilfe der in GIP_globalCSS vordefinierten CSS-Stylings (siehe globaler GIP-Modul-Code). Um mehrere CSS-Stylings zu referenzieren, werden sie einfach als String mit Leerzeichen zwischen den Class-names aneinandergereiht.

arrow_rightstyle string Default: Siehe Globaler CSS-Code Inline CSS-Styling des Moduls.

arrow_rightblocksRequired array of objects Default: - Enthält ein Array der Inhaltsblocks des Moduls. Für jeden Block können Wert, Styling und Aktionen bei Interaktion mit dem Block angegeben werden.

arrow_rightclass string Default: - Styling des Moduls mithilfe der in GIP_globalCSS vordefinierten CSS-Stylings (siehe globaler GIP-Modul-Code). Um mehrere CSS-Stylings zu referenzieren, werden sie einfach als String mit Leerzeichen zwischen den Class-names aneinandergereiht.

arrow_rightstyle string Default: Siehe Globaler CSS-Code Inline CSS-Styling des Moduls.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightactions array of objects Default: - Enthält ein Array mehrerer Actions. Jede Action ist aus einem Trigger, der die Action auslöst, und einem Array der auszuführenden Funktionen nach Auslösen des Triggers (Script) aufgebaut.

arrow_righttriggerRequired string Default: - Legt fest, durch welche User-Eingaben die Funktionen der Action ausgelöst werden. Als Trigger können alle HTML Mouse Events gewählt werden.

arrow_rightscriptsRequired array of objects Default: - Enthält ein Array der Funktionen, die durch den Trigger der Aktion ausgeführt werden.

arrow_righttypeRequired string Default: - Der Typ der Funktion wird aus der Liste der verfügbaren Funktionen gewählt.

arrow_rightactions array of objects Default: - Enthält ein Array mehrerer Actions. Jede Action ist aus einem Trigger, der die Action auslöst, und einem Array der auszuführenden Funktionen nach Auslösen des Triggers (Script) aufgebaut.

arrow_righttriggerRequired string Default: - Legt fest, durch welche User-Eingaben die Funktionen der Action ausgelöst werden. Als Trigger können alle HTML Mouse Events gewählt werden.

arrow_rightscriptsRequired array of objects Default: - Enthält ein Array der Funktionen, die durch den Trigger der Aktion ausgeführt werden.

arrow_righttypeRequired string Default: - Der Typ der Funktion wird aus der Liste der verfügbaren Funktionen gewählt.