Die GAPTEQ-Komponente Button ist eine Schaltfläche, mit der ein Benutzer interagieren kann, um verschiedene Aktionen auszuführen. Der Button lässt sich nach Größe, Farbauswahl und Hover-, Focus und Active-Eigenschaften konfigurieren.
In diesem Artikel lesen Sie folgende Inhalte:
Tipp! Hier sehen Sie mehr über die Komponente.
1. Button Properties
|
Properties |
Beschreibung |
|---|---|
|
ID |
Bezeichnung / Benamung des Buttons |
|
Color scheme |
Initiale Farbschemen:
|
|
Konfiguriert in Color Schemes |
|
|
CSS class |
Elemente einer Gruppe/Klasse zuordnen, für die dann bestimmte Formatierungen gelten z.B. CSS class: “customNavButton”  |
|
Tab index |
Sprungreihenfolge durch Tab Taste |
|
Access |
Zugriffsrechte auf Komponente |
|
Text |
Buttontext |
|
Icon |
HTML Code eines Icons einfügen Beispiel: Klassenname eines Icon aus der von GAPTEQ unterstützen Fontawesome-Bibliothek (Find Icons with the Perfect Look & Feel | Font Awesome) z.B.: fa-solid fa-user (Achtung: hier nur den Klassennamen angeben)  |
|
Styling mode |
verschiedene Anzeigemöglichkeiten eines Buttons (hier im “default”-Mode):
 Beachten: im Color scheme “normal” ist bei Contained & Outlined kein Unterschied zu erkennen |
2. Button Funktionalitäten
Events
|
Event |
Beschreibung |
|---|---|
|
clicked |
This Event fires when the Button is klicked by the user |
Actions
|
Kategorisierung |
Action |
Beschreibung |
|---|---|---|
|
State |
enable() |
Enable the button. |
|
disable() |
Disable the button. |
|
|
setEnabled(enabled) |
Enable/disable the button. |
|
|
show() |
Shows the button. |
|
|
hide() |
Hides the button. |
|
|
setVisible(visible) |
Show/hide the button. |
|
|
focus() |
Sets the focus on the button. |
|
|
Appearance |
setText(text) |
Set the text of the button. |
|
setIcon(text) |
Set the icon of the button. |