CSS-Klasse
Aktionen - Kurzfassung
Setzt oder entfernt eine oder mehrere CSS (Cascading Style Sheets) Klassen für ein Formularelement.
Setzt oder entfernt eine oder mehrere CSS (Cascading Style Sheets) Klassen für ein Formularelement.
►HINWEIS◄ Diese Aktion ist für erweiterte Anwendungsmöglichkeiten für Animationen oder benutzerdefinierte Styles gedacht und setzt Grundwissen über Cascading Style Sheets voraus.
Die Aktion CSS-Klasse verwendet folgende Parameter:
Das Zielement bestimmt, mit welchem Element die Aktion ausgeführt werden soll. Ohne Angaben gilt das Element, in dem die Aktion konfiguriert wird als Zielelement.
Der CSS-Klassenname legt fest, welche CSS-Klassen für das Zielelement hinzugefügt oder entfernt werden sollen. HTML konform werden mehrere Klassennamen mit einem Leerzeichen voneinander getrennt angegeben (z.B. Klasse1 Klasse2 Klasse3). Zusätzlich wird der hier eingegebene Wert als Berechnungsausdruck interpretiert, somit können die Klassennamen auch beliebig hergeleitet und zusammengesetzt werden.
Abhängig von der Option Klasse hinzufügen werden die Klassen hinzugefügt (ausgewählt) oder entfernt (abgewählt).
Im Bereich "Experteneinstellungen" im Menüpunkt Styles können auch eigene CSS-Klassen definiert werden, um sie über diese Aktion anzusprechen.
►HINWEIS◄ CSS-Klassen können für Formularelemente über die Eigenschaft 'CSS-Klasse' auch statisch, also ohne einen Aktionsaufruf, zugeordnet werden.
Beispiel
Beim Klicken auf einen Knopf soll ein Lobster_data-Profil ausgeführt werden, das eine relativ hohe Laufzeit von mehreren Sekunden haben kann.
Um dem Benutzer zu signalisieren, dass dieser Profilaufruf "in Arbeit" ist, soll das benachbarte Symbol (Zahnrad-Icon) bis zum Abschluss des Prozesses rotierend dargestellt werden.
Hierfür kann die vorgefertigte CSS-Klasse "lb-rotate-z-infinite" genutzt werden, die dem Bild/Icon-Element durch zwei separate Verhalten des Buttons hinzugefügt und wieder entfernt wird:
Der Screenshot wurde so manipuliert, dass beide Verhalten gleichzeitig aufgeklappt und nebeneinander erscheinen.
Die beiden Verhalten werden durch den Angeklickt-Auslöser des Buttons aktiviert und in der konfigurierten Reihenfolge (startRotation, runProfile) ausgeführt.
startRotation weist dem Icon-Element mit Beschriftung Profil die CSS-Klasse lb-rotate-z-infinite zu (Option Klasse hinzufügen ausgewählt).
runProfile führt unter Verhalten das Profil aus und entfernt anschließend die CSS-Klasse lb-rotate-z-infinite wieder (Option Klasse hinzufügen abgewählt).
Effekt:
Im operativen Betrieb des Portals (bzw. Testmodus) rotiert das Icon nach einem Knopfdruck, bis das Profil durchgelaufen ist.