Erste Schritte

Was ist tuix-webcomponents?

tuix-webcomponents ist das Tuix Design System als Custom Elements. Jede Komponente ist ein Lit-Element mit eigenem Shadow DOM, die Styles können also weder hinein- noch hinausfliessen, und dasselbe Tag funktioniert in React, Angular, Vue, in reinem HTML oder auf einer server-gerenderten Seite.

Aktuell gibt es vierzehn Elemente: Typografie, Icons, Buttons, Links, Flächen, Formularelemente, eine Tabelle, einen Toast und ein Modal. Alle teilen sich eine Farbpalette und ein helles wie ein dunkles Theme.

<tuix-text size="xl" color="primary">Hallo</tuix-text>
<tuix-button variant="primary" iconleft="check">Speichern</tuix-button>

Installieren

npm-Paket

Paket installieren und die benötigten Elemente importieren.

Web-Bundle

Ein Script-Tag und ein Stylesheet, ohne Build-Schritt.

In eine Anwendung einbauen

React und Next.js

Die generierten Wrapper, Schritt für Schritt.

Vue

Compiler konfigurieren, Properties binden, Events empfangen.

Angular

Das Schema, die Bindings und Reactive Forms.

Danach

Wie die Komponenten funktionieren

Attribute und Properties, Events und Slots: die gemeinsamen Regeln.

Theming

Dark Mode, die Farbpalette und die Schrift Rubik.

Komponenten

Alle vierzehn Elemente, ihre Varianten und ihre API.

Icon-Katalog

Alle Icon-Namen, die tuix-icon kennt.

Live-Beispiele

Die Beispiele auf den Komponentenseiten sind live: die Elemente unten sind die echten und laufen in dieser Seite.

Komponenten werden geladen…

Einen Spielplatz mit einstellbaren Controls für jede Property bietet das Storybook der Bibliothek, das neben dieser Dokumentation unter /storybook liegt.

Diese Dokumentation beschreibt die öffentliche API. Widersprechen sich ein Beispiel und Storybook, gilt der Quellcode in src/; Korrekturen an der Dokumentation sind als PR willkommen.