tuix-dropdown

tuix-dropdown umschliesst ein tuix-input mit einer Liste von Optionen. Im Modus single ist das Feld nur lesbar und ein Klick öffnet die Liste; im Modus search filtert das Tippen die Optionen.

Komponenten werden geladen…

Die Liste wird als Property gesetzt. Das Attribut gibt es, und es liest JSON: options='["Draft", "Sent"]' funktioniert für eine kurze Liste einfacher Werte, alles Längere gehört in die Property:

const dropdown = document.querySelector('tuix-dropdown')
 
dropdown.options = [
    { name: 'Schweiz', value: 'CH' },
    { name: 'Deutschland', value: 'DE' },
]
dropdown.value = dropdown.options[0]
 
dropdown.addEventListener('select', (event) => console.log(event.detail.value)) // 'CH'

Typen

Single

Der Standard. Das Feld nimmt keine Eingabe an; das ganze Feld ist der Auslöser.

Komponenten werden geladen…

Optionen dürfen einfache Werte sein, wie hier; dann ist die Beschriftung der Wert selbst.

Search

Das Tippen filtert die Liste, und beim Verlassen des Feldes erscheint wieder die Beschriftung der gewählten Option.

Komponenten werden geladen…

Beschreibung und Status

Die Hilfszeile ist die des Inputs, es gelten also dieselben fünf Beschreibungszustände.

Komponenten werden geladen…

Typen der Optionen

type TuixDropdownPlainOption = string | number | boolean
 
interface TuixDropdownObjectOption {
    name: string // wird in der Liste angezeigt
    value: TuixDropdownPlainOption // wird vom select-Event gemeldet
}
 
type TuixDropdownOption = TuixDropdownPlainOption | TuixDropdownObjectOption

Tastatur

Taste	Wirkung
`Enter` im Feld	Öffnet oder schliesst die Liste
`ArrowDown` / `ArrowUp`	Bewegt sich durch die Optionen
`Enter` auf einer Option	Wählt sie aus
`Escape`	Schliesst die Liste

Ein Klick irgendwo ausserhalb der Komponente schliesst die Liste ebenfalls.

API

Properties

Property	Attribut	Typ	Standard	Beschreibung
`options`	`options`	`TuixDropdownOption[]`	`[]`	Die Liste. Property oder JSON im Attribut
`value`	`value`	`TuixDropdownOption`	Keine	Die gewählte Option. Property oder JSON
`type`	`type`	`DropdownType`	`single`	`single` oder `search`
`title`	`title`	`string`	`''`	Schwebendes Label
`placeholder`	`placeholder`	`string`	`''`	Platzhaltertext
`description`	`description`	`string`	Keine	Hilfetext unter dem Feld
`descriptionType`	`descriptiontype`	`DescriptionType`	`text`	Status der Hilfszeile
`disabled`	`disabled`	`boolean`	`false`	Verhindert das Öffnen der Liste
`dark`	`dark`	`boolean`	`false`	Dunkle Palette

Events

Event	Detail	Wann
`select`	`{ value: TuixDropdownPlainOption }`	Eine Option wird per Klick oder Enter gewählt
`input-single`	`{ value: string }`	Der Nutzer tippt, im Modus `search`

Das Detail von select ist der value der Option, nie das Objekt. Typisiert als CustomEventTuixDropdownSelect und CustomEventTuixDropdownInput.

Hinweise

Ein neues options-Array löscht die aktuelle Auswahl; value wird danach erneut gesetzt, wenn sie erhalten bleiben soll.
Die Liste ist innerhalb der Komponente absolut positioniert: das Dropdown braucht Platz nach unten, oder die Seite muss scrollen.

tuix-dropdown

Auf dieser Seite