Zum Hauptinhalt springen

Select

Die Select-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.

Konstruktion

Code

<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _value="[1]"> Auswahlfeld </kol-select>
<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _multiple _value="[0,2]">
Auswahlfeld (Mehrfachauswahl)
</kol-select>
<kol-select
_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2},{'label':'Herr','value':3},{'label':'Frau','value':4},{'label':'Firma','value':5}]"
_rows="4"
_value="[1]"
>
Auswahlfeld mit _rows
</kol-select>

Beispiel

Auswahlfeld

Auswahlfeld (Mehrfachauswahl)

Auswahlfeld mit rows

Verwendung

Die Auswahlmöglichkeiten werden über das Attribut _options als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte label und value angegeben werden.

Beispiel für die Konstruktion des JSON-Objektes:

[
{ "label": "Herr", "value": 0 },
{ "label": "Frau", "value": 1 },
{ "label": "Firma", "value": 2 }
]

Individuelle Höhe angeben

Über das Attribut _rows kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei _multiple) gewechselt werden und dessen Höhe gesetzt werden.

Tastatursteuerung

TasteFunktion
TabFokussiert das Auswahlfeld.
EnterÖffnet bzw.schließt die Auswahlliste.
Pfeil-Tasten (oben / unten)Wechselt in der Auswahlliste das aktivierte Element. Diese Funktion ist auch bei eingeklappter Auswahlliste aktiv. Bei Mehrfachauswahl muss zur Auswahl mehrerer Einträge zusätzlich die Shift-Taste gedrück gehalten werden.

Single-Select-Filter` für Select-Komponente

Die Select-Komponente liefert bei Auswahl eines Wertes eine Liste

Single-Select-Filter für Select-Komponente

Die Select-Komponente liefert bei Auswahl eines Wertes eine Liste (Array) mit genau einem Wert zurück (im Single-Modus). Das kann bei der weiteren Verarbeitung zu unnötigem Aufwand führen. Einfacher ist es hier, den Wert der Select-Komponente über einen SingeSelectFormatter zu Filtern. Fügen Sie hierzu im Formular nachfolgende Klasse ein:

class SingleSelectFormatter extends AbstractFormatter { public format(value: unknown): unknown { return [value]; } public parse(value: unknown): unknown { if
(Array.isArray(value) && value.length > 0) { return value[0]; } return value; } }

Fügen Sie den Formatter anschließend der Select-Komponente hinzu:

const singleSelectFormatHandler = new FormatHandler(); singleSelectFormatHandler.formatters.add([new SingleSelectFormatter()]); (this.getInput('kategorie') as
InputControl).setFormatHandler(singleSelectFormatHandler);

Beachten Sie, dass der FormatHandler zunächst in die Form importiert wird.

import { xxx..., xxx..., FormatHandler, } from '@leanup/form';

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_alert_alertDefines whether the screen-readers should read out the notification.boolean | undefinedtrue
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_error_error[DEPRECATED] Will be removed in v3. Use msg instead.

Defines the error message text.
string | undefinedundefined
_hideError_hide-errorHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hideLabel_hide-labelHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.stringundefined
_msg--Defines the properties for a message rendered as Alert component.undefined | {} & { _level?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: "error" | "warning" | "info" | "success" | "default" | undefined; _variant?: "card" | "msg" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; }undefined
_multiple_multipleMakes the input accept multiple inputs.boolean | undefinedfalse
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefinedundefined
_options_optionsOptions the user can choose from, also supporting Optgroup.(Option<StencilUnknown> | Optgroup<StencilUnknown>)[] | string | undefinedundefined
_required_requiredMakes the input element required.boolean | undefinedfalse
_rows_rowsDefines how many rows of options should be visible at the same time.number | undefinedundefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_value_valueDefines the value of the input.W3CInputValue[] | string | undefinedundefined

Methods

getValue() => Promise<Stringified<W3CInputValue[]> | undefined>

Returns

Type: Promise<Stringified<W3CInputValue[]> | undefined>

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

Live-Editor

Beispiele