Zum Hauptinhalt springen

2 Posts getaggt mit "theming"

Alle Tags anzeigen

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>

Wie kann ich Icons im Theme ändern?

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

Heute wollen wir in einem kurzen Blog-Post zeigen, wie Ihr die standardmäßig hinterlegten Icons über das Theming (Theme-Designer) ändern könnt.

1. Icon-Font integrieren​

Damit Icons angezeigt werden können, muss zunächst die gewünschte Icon-Font (z.B. Font Awesome Free) in der Webseite (HTML) eingebunden werden. Dies geschieht in der Regel mittels folgendem HTML:

<head>
 <link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
</head>

Icon-Font im Theme hinterlegen​

Die Icon-Komponente von KoliBri kapselt die Icon-Font und muss daher die CSS-Definitionen von den im Design System ausgewählten Icon-Identifier kennen. Dazu muss das CSS aus der gleichen CSS-Datei, wie aus 1., in das Theme kopiert und damit hinterlegt werden.

  1. Theme-Designer öffnen
  2. Theme auswählen
  3. Icon-Komponente auswählen
  4. Schalter auf Komponent-Styling umstellen
  5. CSS aus der Icon-Font einfügen und speichern
  6. Theme in Projekt übernehmen

Standard-Icons im Theme ändern​

Das Ändern eines Icons ist ganz einfach, wenn folgendes Prinzip klar ist. Alle Icons werden durch die Web Component kol-icon abgebildet. Diese Komponente exportiert immer den Part icon. Über einen Part kann man auf festgelegte CSS-Eigenschaften innerhalb einer Web Component zugreifen. Exemplarisch sieht das so aus:

kol-icon::part(icon) {
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
}
kol-icon::part(icon):before {
 content: '😃';
}

Um ein Icon über den Designer zu ändern, sind folgende Schritte zu durchlaufen:

  1. Theme-Designer öffnen
  2. Theme auswählen
  3. Komponente auswählen, wo ein Icon geändert werden soll
  4. Schalter auf Komponent-Styling umstellen
  5. Spezifischen Selektor auf ein Icon ermitteln
  6. Spezifischen Selektor verwenden, um Schriftart und Content anzupassen
  7. Komponent-CSS speichern
  8. Theme in Projekt übernehmen

Hier mal ein komplexeres Beispiel für die Pagination:

kol-button::part(icon) {
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
}
kol-button.first::part(icon):before,
kol-button.previous::part(icon):before,
kol-button.next::part(icon):before,
kol-button.last::part(icon):before {
 content: '😃';
}

FAQ​

Warum hängt das Icon im KolIcon etwas tiefer?​

Mit der CSS-Definition display: contents; am kol-icon-Tag wird das Icon passend ausgerichtet. Die Ausrichtung der Icon-Komponente innerhalb anderer Komponenten hängt immer von der jeweiligen Verwendung ab.

Warum kann ich die Schriftgröße nicht ändern?​

kol-icon::part(icon) {
 font-family: 'Font Awesome 6 Free';
 font-size: 2rem !important;
 font-weight: 900;
}

Der Grund liegt in der font CSS-Definition in der Icon-Font selbst und in der Notwendigkeit, die Schriftgröße bei Icons von Außen setzen übernehmen (erben).

.codicon[class*='codicon-'] {
 font: 16px / 1 codicon;
}
:host > i,
:host > i::before {
 font-size: inherit !important;
}

Möchte man ein Icon in seiner Größe anpassen, so kann man das einfach von Außen tun.

kol-icon {
 font-size: 2rem;
}