Skip to main content

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" _icon='{"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 id und name korrekt 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.

Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.

Tastatursteuerung

TasteFunktion
TabFokussiert 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.
ESCBeendet 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.

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
_autoComplete_auto-completeDefines whether the input can be auto-completed."off" | "on" | undefinedundefined
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_error_errorDefines 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''
_icon_icon[DEPRECATED] Use _icons.

string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }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_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.string | undefinedundefined
_list_list[DEPRECATED] Use _suggestions instead.

Deprecated: Gibt die Liste der Vorschlagswörter an.
W3CInputValue[] | string | undefinedundefined
_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
_smartButton_smart-buttonAllows to add a button with an arbitrary action within the element (_hide-label only).string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _accessKey?: string | undefined; _iconAlign?: AlignPropType | undefined; _iconOnly?: boolean | undefined; _icon?: IconsPropType | undefined; _role?: AlternativeButtonLinkRolePropType | undefined; _ariaControls?: string | undefined; _ariaCurrent?: AriaCurrentPropType | undefined; _ariaExpanded?: boolean | undefined; _ariaLabel?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: ButtonTypePropType | undefined; _variant?: ButtonVariantPropType | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }undefined
_suggestions_suggestionsSuggestions to provide for the input.W3CInputValue[] | string | 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.string | undefinedundefined

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

Live-Editor

Beispiele