InputColor
Der Input-Typ Color erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
Konstruktion
Code
<kol-input-color _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>
Beispiel
Verwendung
Stellen Sie die Default-Farbe über das Attribut _value ein. Verwenden Sie hierfür eine hexadezimale Schreibweise (#xxxxxx).
Best practices
- Achten Sie darauf
idundnamekorrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
Barrierefreiheit
Beachten Sie, dass die InputColor-Komponente nicht vollständig barrierefrei ist. Die Auswahl einer Farbe ist über Tastatursteuerung möglich. Die Ausgabe der gewählten Farbe über Screenreader ist jedoch technisch eingeschränkt. Siehe auch: [https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md#input-color](Known Issues).
Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das Eingabefeld. Bei geöffnetem Dialogfeld kann mit der Tab-Taste zwischen den Steuerfeldern gewechselt werden. |
Enter | Öffnet bzw. schließt das Dialogfeld der Komponente. Bei fokussierter Pipette wird mit der Enter-Taste die Funktion Pipette gestartet. |
ESC | Beendet die Pipettenfunktion. Schließt das Dialogfeld, wenn die Pipettenfunktion nicht aktiv ist. |
Pfeil-Tasten (rechts / links) | Verschieben bei fokussiertem Feld Farbspektrum den Auswahlpunkt. |
Pfeil-Tasten (oben / unten) | Ändert bei fokussiertem Feld Farbsystem die Auswahl. |
Links und Referenzen
Der Input-Typ Color erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
Konstruktion
Code
<kol-input-color _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>
Beispiel
Verwendung
Stellen Sie die Default-Farbe über das Attribut _value ein. Verwenden Sie hierfür eine hexadezimale Schreibweise (#xxxxxx).
Best practices
- Achten Sie darauf
idundnamekorrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
Barrierefreiheit
Beachten Sie, dass die InputColor-Komponente nicht vollständig barrierefrei ist. Die Auswahl einer Farbe ist über Tastatursteuerung möglich. Die Ausgabe der gewählten Farbe über Screenreader ist jedoch technisch eingeschränkt.
Siehe auch: [https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md#input-color](Known Issues).
Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das Eingabefeld. Bei geöffnetem Dialogfeld kann mit der Tab-Taste zwischen den Steuerfeldern gewechselt werden. |
Enter | Öffnet bzw. schließt das Dialogfeld der Komponente. Bei fokussierter Pipette wird mit der Enter-Taste die Funktion Pipette gestartet. |
ESC | Beendet die Pipettenfunktion. Schließt das Dialogfeld, wenn die Pipettenfunktion nicht aktiv ist. |
Pfeil-Tasten (rechts / links) | Verschieben bei fokussiertem Feld Farbspektrum den Auswahlpunkt. |
Pfeil-Tasten (oben / unten) | Ändert bei fokussiertem Feld Farbsystem die Auswahl. |
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines which key combination can be used to trigger or focus the interactive element of the component. | string | undefined | undefined |
_alert | _alert | [DEPRECATED] Will be removed in v3. Use automatic behaviour instead. Defines whether the screen-readers should read out the notification. | boolean | undefined | undefined |
_autoComplete | _auto-complete | Defines whether the input can be auto-completed. | "off" | "on" | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_error | _error | [DEPRECATED] Will be removed in v3. Use msg instead.Defines the error message text. | string | undefined | undefined |
_hideError | _hide-error | Hides the error message but leaves it in the DOM for the input's aria-describedby. | boolean | undefined | false |
_hideLabel | _hide-label | Hides 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 | undefined | false |
_hint | _hint | Defines the hint text. | string | undefined | '' |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; } | undefined |
_id | _id | Defines the internal ID of the primary component element. | string | undefined | undefined |
_label (required) | _label | Defines 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. | string | undefined |
_msg | _msg | Defines the properties for a message rendered as Alert component. | string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: "default" | "info" | "success" | "warning" | "error" | undefined; _variant?: "card" | "msg" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; } | undefined |
_name | _name | Defines the technical name of an input field. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefined | undefined |
_shortKey | _short-key | Adds a visual short key hint to the component. | string | undefined | undefined |
_smartButton | _smart-button | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean | undefined; _accessKey?: string | undefined; _role?: "button" | "link" | "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: "primary" | "secondary" | "normal" | "tertiary" | "danger" | "ghost" | "custom" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; } | undefined |
_suggestions | _suggestions | Suggestions to provide for the input. | W3CInputValue[] | string | undefined | undefined |
_tabIndex | _tab-index | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | undefined | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_touched | _touched | Shows if the input was touched by a user. | boolean | undefined | false |
_value | _value | Defines the value of the input. | string | undefined | undefined |
Methods
focus
focus() => Promise<void>
[DEPRECATED] Use kolFocus instead.
Returns
Type: Promise<void>
getValue() => Promise<string | undefined>
Returns
Type: Promise<string | undefined>
kolFocus() => Promise<void>
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Die Beschriftung des Eingabefeldes. |