Events

Die Komponenten ändern ihren Zustand nie stellvertretend für die Anwendung. Sie melden, was passiert ist, und warten auf die neuen Props. Alle Events sind CustomEvents und alle bubbeln.

Alle Events

Element	Event	Detail
`tuix-button`	`customClick`	Keine
`tuix-icon-button`	`customClick`	Keine
`tuix-input`	`on-change`	`{ value: string }`
`tuix-input`	`on-blur`	`{ value: string }`
`tuix-input`	`on-click`	Keine
`tuix-dropdown`	`select`	`{ value: string \| number \| boolean }`
`tuix-dropdown`	`input-single`	`{ value: string }`
`tuix-checkbox`	`change`	`{ value: boolean, label?: string }`
`tuix-toggle-button`	`change`	`{ value: boolean, label?: string }`
`tuix-radio-button`	`change`	`{ value: string }`
`tuix-table`	`next-page`	`{ page: number, pageSize: number }`
`tuix-table`	`previous-page`	`{ page: number, pageSize: number }`
`tuix-table`	`page-size-change`	`{ page: number, pageSize: number }`
`tuix-toast`	`on-close`	Keine
`tuix-modal`	`on-close`	Keine

Manche Namen weichen bewusst vom nativen ab: ein Button feuert customClick statt click, ein Input on-change statt input, denn beide nativen Events sind composed und würden genau bei dem Listener ankommen, für den das eigene Event der Komponente gedacht ist. Checkbox, Toggle und Radio-Gruppe können change gerade deshalb wiederverwenden, weil das native change nicht composed ist: es verlässt den Shadow Root nie, in dem es gefeuert wurde.

Composed Events

Nur die drei Pagination-Events von tuix-table sind composed und damit die einzigen, die aus einem Shadow Root herauskommen, in dem sie gefeuert werden. Alle anderen bubbeln durch den Baum, in dem sie entstanden sind, und enden an dessen Shadow-Grenze.

In der Praxis zählt das nur, wenn eine Tuix-Komponente im Shadow DOM einer anderen Komponente sitzt: der Listener muss dann im selben Shadow Root sitzen.

Typisierte Listener

import type { CustomEventTuixDropdownSelect, CustomEventTuixInput } from 'tuix-webcomponents'
 
input.addEventListener('on-change', (event: CustomEventTuixInput) => {
    setName(event.detail.value)
})
 
dropdown.addEventListener('select', (event: CustomEventTuixDropdownSelect<string>) => {
    setCountry(event.detail.value)
})

In React

Die Wrapper in tuix-webcomponents/react bilden jedes Event auf eine on*-Prop ab; der Handler bekommt weiterhin das CustomEvent, die Nutzlast liest sich also gleich:

<TuixInput onChange={(event) => setName(event.detail.value)} />
<TuixButton onCustomClick={save}>Speichern</TuixButton>

Die vollständige Tabelle von Prop zu Event steht im React-Guide.

In Vue

Jeder Name oben bindet direkt mit @, customClick eingeschlossen: Vue behält die Schreibweise eines Listener-Namens mit Grossbuchstaben bei, sobald das Tag ein Custom Element ist.

<tuix-input @on-change="onChange" @on-blur="onBlur" /> <tuix-button @customClick="save">Speichern</tuix-button>

Siehe den Vue-Guide.

In Angular

Gebunden wird mit dem nativen Event-Namen, Angular hört direkt am DOM-Element:

<tuix-input (on-change)="onChange($event)"></tuix-input> <tuix-button (customClick)="save()">Speichern</tuix-button>

Siehe den Angular-Guide.