Enums und Typen

Die Attributwerte sind Strings, die Enums sind also optional. Sie sind aber die Liste des Erlaubten und machen aus einem Tippfehler einen Compile-Fehler.

import {
    BorderRadiusPaper,
    CheckboxLabelSide,
    DarkPalette,
    DescriptionType,
    DropdownType,
    IconName,
    IconSizeVariant,
    InputType,
    LinkTarget,
    MainVariant,
    PaperElevation,
    Palette,
    ScreenSizes,
    TextSize,
    TextVariant,
    ToastType,
} from 'tuix-webcomponents'

MainVariant

Die Zweiteilung, die jeder Button und jeder Link verwendet.

Eintrag	Wert
`MainVariant.PRIMARY`	`primary`
`MainVariant.SECONDARY`	`secondary`

TextVariant

Sechzehn semantische Farben, je Theme aufgelöst. Die Zuordnung zu Palette und DarkPalette steht bei tuix-text.

Palette und DarkPalette

Die reinen Farben, ein Enum pro Theme, mit denselben Einträgen. Die Werte stehen unter Theming.

IconName und IconSizeVariant

IconName hat 88 Einträge, aufgelistet im Icon-Katalog. IconSizeVariant ist SMALL (16px), MEDIUM (24px), LARGE (32px) und FULL (100%).

InputType und DescriptionType

Enum	Einträge
`InputType`	`TEXT` `text`, `SEARCH` `search`, `PASSWORD` `password`, `TEXT_AREA` `textarea`
`DescriptionType`	`TEXT` `text`, `WARNING` `warning`, `ERROR` `error`, `SUCCESS` `success`, `LOADING` `loading`

Beide werden von tuix-input und tuix-dropdown verwendet.

DropdownType

Eintrag	Wert	Verhalten
`DropdownType.SINGLE`	`single`	Nur lesbares Feld, Klick öffnet
`DropdownType.SEARCH`	`search`	Tippen filtert die Optionen

CheckboxLabelSide

Eintrag	Wert
`CheckboxLabelSide.LEFT`	`left`
`CheckboxLabelSide.RIGHT`	`right`

Gemeinsam genutzt von Checkbox, Radio-Gruppe und Toggle.

PaperElevation und BorderRadiusPaper

Enum	Einträge
`PaperElevation`	`VARIANT_0` `0` … `VARIANT_4` `4`
`BorderRadiusPaper`	`NONE` `0px`, `SOFT` `4px`, `MEDIUM` `10px`, `STRONG` `20px`

LinkTarget

Eintrag	Wert
`LinkTarget.BLANK`	`_blank`
`LinkTarget.SELF`	`_self`
`LinkTarget.PARENT`	`_parent`
`LinkTarget.TOP`	`_top`

ToastType

NONE none, TEXT text, WARNING warning, ERROR error, SUCCESS success. Siehe tuix-toast.

ScreenSizes

Eintrag	Wert
`ScreenSizes.TABLET`	`1280`
`ScreenSizes.MOBILE`	`640`

Typen

Typ	Form
`DetailValue<T>`	`{ value: T }`, die Nutzlast der meisten Events
`DetailValueCheckbox`	`DetailValue<boolean>` plus ein optionales `label`
`TuixDropdownPlainOption`	`string \| number \| boolean`
`TuixDropdownObjectOption`	`{ name: string, value: TuixDropdownPlainOption }`
`TuixDropdownOption`	Eines der beiden oben
`TuixRadioButtonOption`	`string \| number`, ein Eintrag der `options` der Radio-Gruppe
`IDataTableHeader<TRowData>`	Eine Tabellenspalte, siehe tuix-table
`TuixTableElement<TRowData>`	`HTMLElement`, typisiert mit den Properties der Tabelle
`ThreeDotsLoaderConfig`	Der `loader` der Tabelle, siehe tuix-table
`PaginationEventDetail`	`{ page: number, pageSize: number }`
`CustomEventTuixButton`	`CustomEvent<undefined>`
`CustomEventTuixInput`	`CustomEvent<DetailValue<string>>`
`CustomEventTuixCheckbox`	`CustomEvent<DetailValueCheckbox>`
`CustomEventTuixToggle`	Wie das Checkbox-Event
`CustomEventTuixRadioButton<T>`	`CustomEvent<DetailValue<T>>`
`CustomEventTuixDropdownSelect<T>`	`CustomEvent<DetailValue<T>>`
`CustomEventTuixDropdownInput`	Wie das Input-Event
`TuixPaginationEvent`	`CustomEvent<PaginationEventDetail>`

TuixButton, TuixCheckbox, TuixDropdown, TuixIcon, TuixIconButton, TuixInput, TuixLink, TuixModal, TuixPaper, TuixRadioButton, TuixTable, TuixText, TuixToast, TuixToggleButton.

Der Import einer Klasse registriert ihr Tag. Die fertigen React-Wrapper darauf exportiert tuix-webcomponents/react; siehe den React-Guide.