Installation

Es gibt zwei Wege, die Komponenten in eine Anwendung zu holen: das npm-Paket (für alles mit Bundler) und das fertige Web-Bundle (für eine Seite ohne Build-Schritt).

npm-Paket

Paket installieren.

npm i tuix-webcomponents

Die benötigten Elemente importieren. Der Import registriert das Custom Element, ein Seiteneffekt-Import genügt also.

// alles
import 'tuix-webcomponents'
 
// oder ein einzelnes Element mit seinen Enums
import { TuixButton, MainVariant } from 'tuix-webcomponents'

Das Stylesheet mit den Design-Tokens einmal an der Wurzel der Anwendung einbinden.

import 'tuix-webcomponents/dist/assets/tuix-styles.css'

Es definiert die Custom Properties --tuix-light-color-* und --tuix-dark-color-* auf :root. Die Komponenten bringen ihre Farben selbst mit, nötig ist das also nur, wenn die Anwendung die Palette selbst verwendet.

Das Stylesheet holt auch Rubik, die Schrift der Typografie, mehr ist also nicht nötig. Damit die Anfrage nicht auf den CSS-Import warten muss, kommt der Link zusätzlich in den Head des Dokuments:

<link rel="preconnect" href="https://hccdn.tuix.ch" />
<link rel="stylesheet" href="https://hccdn.tuix.ch/rubik_d444e2375d.css" />

Siehe Theming.

Web-Bundle

Die CI veröffentlicht bei jedem Release ein eigenständiges Bundle und das passende Stylesheet auf S3. Beides braucht keinen Bundler:

<link rel="stylesheet" href="https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/[email protected]" />
<script src="https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/[email protected]"></script>
 
<tuix-button variant="primary">Speichern</tuix-button>

Das Bundle registriert beim Laden alle Custom Elements. Es darf nicht mit dem npm-Paket auf derselben Seite kombiniert werden: die zweite Registrierung eines Tag-Namens wirft einen Fehler.

Voraussetzungen

Voraussetzung	Hinweis
Browser	Chrome 119+, Firefox 119+, Edge 118+, Safari 17+ (die Ziele, für die das Bundle gebaut wird)
Node	20 oder höher
Peer-Runtime	Keine für die Elemente: `lit` ist die einzige Runtime-Dependency des Pakets
Peers	`react` und `@lit/react`, optional und nur für `tuix-webcomponents/react`

TypeScript

Das Paket bringt seine Typen mit (dist/src/index.d.ts). Neben den Element-Klassen exportiert es die Enums der Attribute und die typisierten Custom Events:

import { type CustomEventTuixInput, IconName, InputType, Palette, TuixInput } from 'tuix-webcomponents'

In einer .tsx-Datei sind Custom Elements nicht Teil von JSX.IntrinsicElements. Dafür liefert das Paket fertige React-Wrapper unter tuix-webcomponents/react; siehe den React-Guide.

Editor-Unterstützung

Das Feld customElements des Pakets verweist auf ein Custom Elements Manifest, custom-elements.json, das jeden Tag mit Attributen, Properties, Events und Slots beschreibt. Editoren, die es lesen (VS Code und die JetBrains-IDEs über ihre Web-Components-Unterstützung), vervollständigen die Tags und ihre Attribute damit auch in reinem HTML, ohne weitere Konfiguration ausser der Installation des Pakets.