Skip to main content

Wie style ich eine Komponente?

· 2 minutes of reading time
Martin Oppitz
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Am Beispiel der Badge-Komponente wollen wir einmal schauen, wie das Stylen funktioniert.

Herausforderung​

Die Badge-Komponente hat einen Smart-Button und der soll optisch kleiner aussehen, wie ein Button, der immer mindestens 44px hoch und breit ist.

  • Bild einfügen vorher

Wir sehen im nachfolgenden HTML-Snippet, dass der umschließende Span die Badge-Hintergrundfarbe bestimmt. Da der Button innerhalb des Span ist, wird die Hintergrundfarbe auch auf den Button gesetzt. Der Button muss mindestens 44px hoch und breit sein, also wird auch der äußere Span mindestens 44px hoch und breit. Das wollen wir nicht.

<span class="smart-button" style="background-color: rgb(204, 222, 218); color: rgb(0, 78, 55);">
 <kol-span-wc class="hydrated">
  <span>
   <span>Badge mit Schalter</span>
  </span>
 </kol-span-wc>
 <kol-button-wc _hide-label="" class="hydrated">
  <button aria-labelledby="cf22bf" class="normal icon-only" type="button">
   <kol-span-wc class="icon-only hydrated" _hide-label="">
    <span>
     <kol-icon class="icon left hydrated" style=""></kol-icon>
    </span>
   </kol-span-wc>
  </button>
  <kol-tooltip aria-hidden="true" class="hydrated">
   <div id="floating" style="left: 1233.91px; top: 312.5px; display: none; visibility: hidden;">
    <div id="arrow" style="left: 19px; bottom: -5px;"></div>
    <kol-badge id="cf22bf" class="hydrated" style=""></kol-badge>
   </div>
  </kol-tooltip>
 </kol-button-wc>
</span>

Lösung​

Idee 1​

Wir optimieren die Komponente, indem wir die Hintergrundfarbe vom umschließenden Span entfernen und auf die beiden inneren Span-Elemente übertragen.

<span class="smart-button" style="color: rgb(0, 78, 55);">
 <kol-span-wc class="hydrated" style="background-color: rgb(204, 222, 218);">
  <span>
   <span>Badge mit Schalter</span>
  </span>
 </kol-span-wc>
 <kol-button-wc _hide-label="" class="hydrated">
  <button aria-labelledby="cf22bf" class="normal icon-only" type="button">
   <kol-span-wc class="icon-only hydrated" _hide-label="" style="background-color: rgb(204, 222, 218);">
    <span>
     <kol-icon class="icon left hydrated" style=""></kol-icon>
    </span>
   </kol-span-wc>
  </button>
  <kol-tooltip aria-hidden="true" class="hydrated">
   <div id="floating" style="left: 1233.91px; top: 312.5px; display: none; visibility: hidden;">
    <div id="arrow" style="left: 19px; bottom: -5px;"></div>
    <kol-badge id="cf22bf" class="hydrated" style=""></kol-badge>
   </div>
  </kol-tooltip>
 </kol-button-wc>
</span>

Das geht aber nicht, weil wir an den 2. Span nicht rankommen. Wir müssen also eine andere Lösung finden.

Idee 2​

Es bleibt beim der initialen Komponenten-Konstruktion. Wir versuchen es mit CSS und erzwingen eine Zeilenhöhe für den umschließenden Span.

  • Bild Heihgt 1.75rem einfügen

Wir sehen im Bild, dass der linke Rand des Button oben rausragt. Das können wir aber leicht lösen, indem wir den linken Rand des Buttons auf 0 setzen und stattdessen einen rechten Rand am Text-Span setzen.