Zum Hauptinhalt springen

Wie kann ich einen eigenen Button-Typ hinzufügen?

· 2 Minuten Lesezeit
Martin Oppitz
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Im Grunde ist es so, dass jede Komponente innerhalb ihrere HTML-Struktur frei gestylt werden kann.

Mit Hilfe unsereres Designers oder dem SCSS-Script können vorhandene Themes angepasst oder eigenes Theme erstellt werden.

Button und Custom-Class​

Beim Button/Schalter gibt es 5 Typen, die von der Design Sprache der Design Systeme abgeleitet wurden:

  • primary: Schalter für Hauptaktion (z.B. speichern)
  • secondary: Schalter für Sekundäraktion (z.B. abbrechen)
  • normal/tertiary: Schalter für Tertiäraktion (z.B. zurück)
  • danger: Schalter für "„gefährliche” Aktionen (z.B. löschen)
  • ghost:Schalter für "unscheinbare” Aktionen (z.B. Hilfe)

Neben diesen Basis-Typen können noch weiterer Typen mittels Custom-Class hinzugefügt werden. Dazu müssen jedoch alle Custom-Classes im CSS des Theme hinterlegt werden.

In der Umsetzung soll ein abgestimmtes Design System / Design Sprache nicht willkürlich geändert oder erweitert werden. Alle definierten Custom-Buttons werden schon bei der Erstellung des Themes bereitgestellt und deren Verwendung in der Dokumentation des eigenen Design Systems beschrieben.

Custom-Class im Theme hinterlegen​

  1. Theme-Designer öffnen
  2. Theme auswählen
  3. Button-Komponente auswählen
  4. Schalter auf Komponent-Styling umstellen
  5. CSS für den Custom-Button eintragen und speichern (bei primary abschauen)
  6. Theme in Projekt übernehmen

Beispiel für Custom-Class loading:

.loading :is(a, button) > kol-span-wc kol-icon {
 animation: spin 2.5s infinite linear;
 display: block;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
@media (prefers-reduced-motion) {
 .loading :is(a, button) > kol-span-wc kol-icon {
  animation-duration: 5s;
 }
}
@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

Custom-Class verwenden​

Um in den Custom-Modus zu schalten, muss das Property _variant auf custom gesetzt werden. Danach können über das Property _custom-class beliebige vordefinierte Custom-Classes übergeben werden.

<kol-button _custom-class="loading" _label="Speichern" variant="custom"></kol-button>

Icon im Button von außen stylen​

Es ist möglich dem Button einen Icon-Style zu übergeben. Dazu muss dem Property _icon der gewünschte Style übergeben werden.

<KolButton
 _icons={{
  left: {
   icon: 'codicon codicon-home',
   style: {
    color: 'red',
    'font-size': '300%',
   },
  },
 }}
 _label="Schalter mit großen roten Icon"
></KolButton>