Komponentenstyling mit ORGENIC UI

Von ORGENIC Team |

ORGENIC UI ist ein stetig wachsendes Set von Web Components mit Fokus auf optimaler User Experience (UX) und modernem Design. ORGENIC UI gelingt dabei der Spagat zwischen individuellen Anpassungen an das eigene Farbschema und der einfachen Integration in alle Webprojekte.

Obwohl ORGENIC UI mit einem umfangreichen Theming-System ausgestattet ist, ist es als Frontend-Entwickler oftmals nützlich, ein bestehendes Theme schnell und gezielt individuell anzupassen, anstatt es von Grund auf neu zu entwickeln. Dieser Artikel zeigt, wie leicht die Styles der Tab-Komponente verändert werden können.

Wie du ORGENIC UI in deinem Projekt einbindest, erklären wir auf docs.orgenic.org

Einbinden der Komponente

Innerhalb eines ORGENIC UI-Projekts genügen diese Zeilen, um das Tab-Control zu verwenden:

<og-tab-container>

    <og-tab label=”Tab Überschrift”>

        <!-- INHALT DES TABS -->

    </og-tab>

</og-tab-container>

Listing 1: Einbindung des Tab-Controls im Template

See the Pen ORGENIC UI: Tabs by ORGENIC (@orgenic-team) on CodePen.

Das Beispiel auf Codepen: https://codepen.io/orgenic-team/pen/rgMzMB

Styling der Komponente

Da alle ORGENIC UI-Komponenten native WebComponents mit ShadowDOM sind, können diese nicht beliebig mittels CSS überschrieben werden. Deshalb ist es nicht möglich, die Hintergrundfarbe des aktuell ausgewählten Tabs auf die bekannte Weise zu ändern:

.og-tabs__list-item--selected {

 background: red;

}

Listing 2: So geht es nicht

Custom-properties zur rettung

Themability ist eines der grundlegenden Konzepte von ORGENIC UI. Um Styles innerhalb des ShadowDOM von außen (einem externen Stylesheet) zu manipulieren, greifen wir auf Custom Properties aka CSS-Variablen zurück. Aus diesem Grund bringen sämtliche Komponenten einen Satz an Variablen mit, mit denen der Nutzer das Design individualisieren kann.

Auf docs.orgenic.org sind die bereits vorhandenden UI-Komponenten und dere Custom Propertiers dokumentiert.

Anpassung des Designs

Alle CSS-Variablen sind in der Dokumentation hinterlegt. Um eine andere Tab-Hintergrundfarbe zu nutzen, muss folgendes Set verändert werden:

--og-tabs__tab-Background

--og-tabs__tab-Background--hover

--og-tabs__tab-Background--active

Nun erzeugen wir eine neue CSS-Datei (z.B. custom-theme.css), in der die Werte der CSS-Variablen gesetzt werden und bindet sie als letztes Stylesheet im HTML ein:

og-tab-container {

--og-tabs__tab-Background:                #39b6e4;

--og-tabs__tab-Background--active:        #1ca2d2;

--og-tabs__tab-Background--hover:         #1ca2d2;

color:                                                                    #FFFFFF;             // Textcolor of tab title

}



og-tab {

color:                                                                #333333;            // Textcolor of tab content

}

Listing 3: Überschreiben des Standard-Designs

Da die Textfarbe der Tabs und deren Inhalte auf inherit steht, genügt es, trotz ShadowDOM, die CSS-Eigenschaft color auf dem Elternelement zu setzen, um sie auch ohne eigene Custom Property zu ändern.

See the Pen QROGjN by JFuhrmann (@jfuhrmann) on CodePen.

Das ganze Beispiel ist auf Codepen verfügbar: https://codepen.io/jfuhrmann/pen/QROGjN

Zusammenfassung

Mittels vordefinierten CSS-Variablen ist es möglich, ORGENIC UI-Komponenten schnell und gezielt dem eigenen Design anzupassen, ohne direkt ein allumfassendes Theme erstellen zu müssen. Die Kapselung der Komponenten mittels ShadowDOM machen sie immun gegen unerwünschte Nebeneffekte durch CSS aus anderen Quellen, aber durchlässig für die eigenen spezifischen Custom Properties. Damit lässt sich jedes Element genauso einfach wie das Tab verändern.

Weitere Informationen auf:

orgenic.org

github.com

twitter

ORGENIC Team

Mehr zu ORGENIC Team