InputColor
Synonyme: Farbwähler, Farbpicker, Color Picker
Beschreibung: Die InputColor-Komponente erzeugt ein Eingabefeld zur Definition und Auswahl von Farben. Die Farbe kann in hexadezimaler Schreibweise (#xxxxxx), RGB- oder HSL-Schreibweise eingegeben werden. Die Auswahl kann über einen interaktiven Farbpicker oder durch direkte Eingabe von Farbwerten erfolgen.
Beispiel
Einfaches Farbwahlfeld mit Beschriftung und Standard-Farbe:
<KolInputColor _label="Favoriten-Farbe" _value="#d4fcf4" />Barrierefreiheit
Die InputColor-Komponente hat bekannte Barrierefreiheits-Einschränkungen:
- Eingeschränkte Screenreader-Unterstützung: Die Ausgabe der gewählten Farbe über Screenreader ist technisch begrenzt. Der Farbwert wird möglicherweise nicht aussagekräftig vorgelesen.
- Farbpicker-Dialog: Der interaktive Farbpicker-Dialog ist über Tastatursteuerung erreichbar, aber die Farbauswahl über Screenreader ist schwierig.
- Tipp für bessere Barrierefreiheit: Für Formulare mit verstärktem Fokus auf Barrierefreiheit erwägen Sie alternative Lösungen, wie vordefinierte Farbauswahllisten über Checkboxen oder Select-Felder.
Links und Referenzen
Verwendung
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert das Eingabefeld. Bei geöffnetem Dialogfeld wechselt Tab zwischen den Steuerfeldern des Dialogfeldes. |
Enter | Öffnet oder schließt das Dialogfeld des Farbpickers. Wenn die Pipette fokussiert ist, startet Enter die Pipettenfunktion. |
ESC | Beendet die Pipettenfunktion. Schließt das Dialogfeld, falls die Pipettenfunktion nicht aktiv ist. |
Pfeiltasten (→ ←) | Verschieben den Auswahlpunkt im Farbspektrum nach links oder rechts. |
Pfeiltasten (↑ ↓) | Ändern die Farbauswahl nach oben oder unten. |
Best Practices / Empfehlungen
- Default-Farbe setzen: Nutzen Sie das Attribut
_valuemit einem hexadezimalen Farbwert (z.B._value="#d4fcf4"), um eine Vorauswahl zu treffen. - Aussagekräftige Beschriftung: Setzen Sie
_labelmit einem klaren Beschreibungstext, damit Nutzer wissen, welche Farbe gefordert ist (z.B. "Primärfarbe", "Hintergrundfarbe"). - Formular-Integration: Vergessen Sie nicht, das Attribut
_namekorrekt zu setzen, damit der Farbwert beim Formularversand mitgesendet wird. - Kontext-Hilfe: Nutzen Sie
_hint, um zusätzliche Hinweise zu geben, beispielsweise zulässige Farbformate oder Anforderungen. - Alternative für komplexe Szenarien: Bei vielen Voreinstellungen oder beschränkter Farbauswahl verwenden Sie eine Select-Liste oder Radiobutton-Gruppe mit festen Farben.
Anwendungsfälle
- Theme- oder Design-Kustomisierung in Anwendungen
- Brand-Color-Auswahl in CMS-Systemen
- Personalisierung von Benutzerprofilen (z.B. Akzentfarbe)
- Grafisches Design und Bild-Bearbeitung
- Farbschema-Generator für Webseiten
- Visuelle Markierungen und Tagging-Funktionen
FAQ
Kann ich die Farbe in RGB- oder HSL-Format eingeben?
Ja, der Farbpicker unterstützt hexadezimale, RGB- und HSL-Schreibweise. Der Wert wird intern in hexadezimales Format konvertiert.
Wie stelle ich eine vorausgewählte Farbe ein?
Nutzen Sie das Attribut _value mit einem hexadezimalen Farbwert: _value="#ff0000".
Ist die Komponente in Formularen obligatorisch?
Nein, Sie können sie über _required optional oder erforderlich machen. Die Eingabe ist nicht auswahlzwingend.
Konstruktion / Technik
Playground
Testen Sie die verschiedenen Eigenschaften der InputColor-Komponente:
<KolInputColor _label="Hintergrundfarbe" _value="#d4fcf4" />Funktionalitäten (mit Code)
Basis-Konfiguration
Die Komponente mit Beschriftung, wahlweise mit Tooltip-Stil:
<KolInputColor _label="Wählen Sie eine Farbe" _value="#d4fcf4" />Mit voreingestelltem Wert
Farbfeld mit einer Standard-Farbe:
<KolInputColor _label="Ihre Farbe" _value="#ff6b6b" />Mit Hinweis und Icons
Farbfeld mit zusätzlichem Hinweistext und grafischen Symbolen:
<KolInputColor _hint="Wählen Sie eine Farbe für Ihr Design" _icons={{"left":"fa-solid fa-palette"}} _label="Primärfarbe" _value="#d4fcf4" />Deaktiviert und Nur-Lesen
Deaktiviertes Eingabefeld (nicht fokussierbar und nicht veränderbar):
<KolInputColor _disabled={true} _label="Gespeicherte Farbe" _value="#3498db" />Mit Fehlermeldung
Farbfeld mit Validierungsmeldung:
<KolInputColor _label="Farbe auswählen" _msg="Bitte wählen Sie eine gültige Farbe aus." _value="#d4fcf4" />Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Eingabefeld wird angeklickt | — |
focus | Eingabefeld wird fokussiert | — |
blur | Eingabefeld verliert Fokus | — |
input | Wert wird durch Eingabe geändert | Aktueller Farbwert des Eingabefelds |
change | Eingabe wurde abgeschlossen | Aktueller Farbwert des Eingabefelds |
API
Overview
The Color input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the key combination that can be used to trigger or focus the component's interactive element. | string | undefined | undefined |
_autoComplete | _auto-complete | Defines whether the input can be auto-completed. | string | undefined | 'off' |
_disabled | _disabled | Makes the element not focusable and ignore all events. | 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 |
_hideMsg | _hide-msg | Hides the error message but leaves it in the DOM for the input's aria-describedby. | 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 |
_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. | Omit<AlertProps, "_on" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _description: string; } | string | undefined | 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 & InputTypeOnKeyDown | undefined | undefined |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | 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; } & { _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; } | undefined |
_suggestions | _suggestions | Suggestions to provide for the input. | W3CInputValue[] | string | 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 element. | string | undefined | undefined |
Methods
click
click() => Promise<void>
Clicks the primary interactive element inside this component.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
getValue() => Promise<string | undefined>
Returns the current value.
Returns
Type: Promise<string | undefined>
Slots
| Slot | Description |
|---|---|
| The label of the input field. |