Interaction

Mit dem Interaction-Modul erweckst du deine Datenbank-Elemente zum Leben und gestaltest interaktive Oberflächen, die deine Nutzer begeistern werden. 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 Interaction-Modul ist von Grund auf als interaktiver Button konzipiert. Das bedeutet, du musst dich nicht um das Styling und die grundlegende Optik kümmern – unser Modul bringt bereits die notwendigen Eigenschaften mit, um wie ein anklickbares Element auszusehen. Du kannst es nutzen, um Aktionen auszulösen, Informationen ein- oder auszublenden oder einfach nur als klaren Navigationspunkt. Wie bei allen Modulen des Essential UI Bundles kannst du das Aussehen über den Style-Key oder den Class-Key an dein individuelles Design anpassen. Nutze den Class-Key, um deine eigenen globalen Classes zu referenzieren.

Nutzer-Interaktion

Die Stärke des Interaction-Moduls liegt in seinen vielseitigen Interaktionsmöglichkeiten. Du kannst jedem interaktiven Element 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_interaction({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   direction: "",
   class: "",
   style: "",
   blocks: [{
   	class: "",
   	style: "",
   	value: *any*,
   	actions: [{
   		trigger: "",
   		scripts: [{
   			type: "",
   		}],
   	}],
   }],
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
})

Minimaler Code

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

Vollständiger Code mit Master

html( raw(GIP_master({})) + 
raw(GIP_interaction({
   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.