Enums and types

The attribute values are strings, so the enums are optional. They are, however, the list of what is accepted, and they turn a typo into a compile error.

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

MainVariant

The two-way split used by every button and link.

Member	Value
`MainVariant.PRIMARY`	`primary`
`MainVariant.SECONDARY`	`secondary`

TextVariant

Sixteen semantic colours, resolved per theme. The mapping to Palette and DarkPalette is on tuix-text.

Palette and DarkPalette

The raw colours, one enum per theme, with the same member names. Values are in Theming.

IconName and IconSizeVariant

IconName has 88 members, listed in the icon catalog. IconSizeVariant is SMALL (16px), MEDIUM (24px), LARGE (32px) and FULL (100%).

InputType and DescriptionType

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

Both are used by tuix-input and tuix-dropdown.

DropdownType

Member	Value	Behaviour
`DropdownType.SINGLE`	`single`	Read-only field, click to open
`DropdownType.SEARCH`	`search`	Type to filter the options

CheckboxLabelSide

Member	Value
`CheckboxLabelSide.LEFT`	`left`
`CheckboxLabelSide.RIGHT`	`right`

Shared by the checkbox, the radio group and the toggle.

PaperElevation and BorderRadiusPaper

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

LinkTarget

Member	Value
`LinkTarget.BLANK`	`_blank`
`LinkTarget.SELF`	`_self`
`LinkTarget.PARENT`	`_parent`
`LinkTarget.TOP`	`_top`

ToastType

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

ScreenSizes

Member	Value
`ScreenSizes.TABLET`	`1280`
`ScreenSizes.MOBILE`	`640`

Types

Type	Shape
`DetailValue<T>`	`{ value: T }`, the payload of most events
`DetailValueCheckbox`	`DetailValue<boolean>` plus an optional `label`
`TuixDropdownPlainOption`	`string \| number \| boolean`
`TuixDropdownObjectOption`	`{ name: string, value: TuixDropdownPlainOption }`
`TuixDropdownOption`	Either of the two above
`TuixRadioButtonOption`	`string \| number`, one entry of the radio group's `options`
`IDataTableHeader<TRowData>`	A table column; see tuix-table
`TuixTableElement<TRowData>`	`HTMLElement` typed with the table's properties
`ThreeDotsLoaderConfig`	The table's `loader`; see tuix-table
`PaginationEventDetail`	`{ page: number, pageSize: number }`
`CustomEventTuixButton`	`CustomEvent<undefined>`
`CustomEventTuixInput`	`CustomEvent<DetailValue<string>>`
`CustomEventTuixCheckbox`	`CustomEvent<DetailValueCheckbox>`
`CustomEventTuixToggle`	Same as the checkbox event
`CustomEventTuixRadioButton<T>`	`CustomEvent<DetailValue<T>>`
`CustomEventTuixDropdownSelect<T>`	`CustomEvent<DetailValue<T>>`
`CustomEventTuixDropdownInput`	Same as the input event
`TuixPaginationEvent`	`CustomEvent<PaginationEventDetail>`

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

Importing a class registers its tag. The ready-made React wrappers built on them are exported from tuix-webcomponents/react; see the React guide.