Komponenten
Die vierzehn Elemente des Design Systems im Überblick.
Jedes Element ist ein Custom Element: es funktioniert in jedem Framework, trägt
seine Styles in einem Shadow Root und nimmt eine Property dark entgegen, statt
ein globales Theme zu lesen. Die einzige Ausnahme ist
tuix-table, das keine hat. Die Vorschauen auf diesen
Seiten sind live: sie folgen dem in der Seitenleiste gewählten Theme, jedes
Element wird also mit passendem dark gezeigt.
Jedes Beispiel gibt es in Angular, Vue und React / Next.js die Auswahl über dem Code wechselt zwischen ihnen. Der einmalige Aufbau je Framework steht unter React und Next.js, Vue und Angular.
Typografie und Icons
tuix-text
Vierzehn Textstile und sechzehn semantische Farben.
tuix-icon
88 Icons, vier Grössen, jede Farbe.
Aktionen
tuix-button
Primäre und sekundäre Aktionen, wahlweise mit Icons.
tuix-icon-button
Ein quadratischer Button, dessen Beschriftung ein Icon ist.
tuix-link
Ein gestylter Anchor mit Disabled-Zustand.
Formularelemente
tuix-input
Text, Suche, Passwort und Textarea, mit schwebendem Label.
tuix-dropdown
Ein Select, auf Wunsch mit Filtern beim Tippen.
tuix-checkbox
Eine Checkbox mit Fehlerzustand und Label auf beiden Seiten.
tuix-radio-button
Eine ganze Radio-Gruppe aus einer Liste von Optionen.
tuix-toggle-button
Ein Schalter mit der Checkbox-API und gleitendem Regler.
Flächen und Rückmeldungen
tuix-paper
Das Flächen-Primitiv: Hintergrund, Elevation, Rundung.
tuix-table
Tabelle mit Slot-Zellen, Karten auf Mobile, gesteuerter Pagination.
tuix-toast
Eine kurzlebige Meldung, die sich selbst wieder ausblendet.
tuix-modal
Ein zentrierter Dialog mit Slots für Titel, Body und Aktionen.
Was alle Komponenten teilen
dark | Jedes Element ausser tuix-table hat es; nichts wird von einem Vorfahren oder Provider geerbt |
| Attribute | Immer kleingeschrieben: iconright, nicht iconRight. Objekte und Arrays müssen als Property gesetzt werden |
| Slots | Text kommt in den Default-Slot; die Elemente mit mehreren Bereichen benennen ihre |
| Events | CustomEvents, die bubblen, mit der Nutzlast in event.detail, meist event.detail.value |
| Zustand | Nie im Besitz der Komponente. Sie meldet eine Änderung; die Anwendung schreibt den neuen Wert zurück |
| Typografie | Rubik, über tuix-text, in den Grössen der Typo-Skala |
Varianten im Überblick
| Element | Varianten | Grössen | Zustände |
|---|---|---|---|
tuix-text | 16 Farben | 14 Textstile | Keine |
tuix-icon | jede Farbe + Füllung | small medium large full | Keine |
tuix-button | primary secondary | responsiv | disabled, full, Icons |
tuix-icon-button | primary secondary | responsiv | disabled |
tuix-link | primary secondary | Keine | disabled |
tuix-paper | Elevation 0 bis 4 | 4 Rundungen | Keine |
tuix-input | text search password textarea | Keine | disabled, readonly, 5 Beschreibungszustände |
tuix-dropdown | single search | Keine | disabled, Beschreibungszustände |
tuix-checkbox | Label left / right | Keine | checked, disabled, error |
tuix-radio-button | Label left / right | Keine | disabled, error |
tuix-toggle-button | Label left / right | Keine | checked, disabled |
tuix-table | Tabelle / Karten | Keine | Laden, paginiert |
tuix-toast | text warning error success | Keine | none (versteckt) |
tuix-modal | Keine | Keine | visible, scrollable |