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
GIP_interaction({
uniqueId: "",
embedded: {
},
blocks: [{
value: *any*,
}],
})
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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|