ColorPicker Farbwähler
Einführung
Ein fortschrittliches Eingabesteuerelement, mit dem Benutzer Farben über einen Sättigungs/Helligkeits-Bereich, Farbton- und Alpha-Slider, editierbare Kanal-Eingaben (HEX, RGBA, HSLA) und vordefinierte Farbfelder auswählen und anpassen können.
Die ColorPicker-Komponente ist vollständig als interaktiver colorPicker-Block im Page Builder integriert, sodass Inhaltsautoren und Entwickler Labels, Standardzustände, Popover-Trigger-Modi und Größenstufen direkt im CMS konfigurieren können.
Verwendung
Diese Beispiele veranschaulichen, wie Inhaltsredakteure Farbwähler-Komponenten binden und strukturieren.
1. Inline-Customizer (Standard-Hex-Standardwert)
Ein Inline-Farbwähler, der Block-Level-Raum im Seitenlayout einnimmt und beim Laden sofort das Sättigungsfeld, Farbton-Slider und Kanal-Eingaben rendert.
{
"type": "colorPicker",
"label": "Brand Primary Color",
"defaultValue": "#7c3aed",
"interactive": true
}
2. Popover-Farbfeld-Trigger mit Schließen bei Auswahl
Eine elegante, platzsparende Designoption, die einen kleinen farbigen Farbfeld-Trigger rendert. Beim Klicken auf das Farbfeld öffnet sich das Farbwähler-Panel in einer Popover-Ebene und schließt automatisch nach Auswahl eines vordefinierten Farbfelds.
{
"type": "colorPicker",
"label": "Choose Theme Accent",
"defaultValue": "#22c55e",
"trigger": true,
"closeOnSelect": true,
"interactive": true
}
3. Deaktivierter Picker-Zustand
Zeigt einen gesperrten oder inaktiven Farb-Customizer. Dies deaktiviert alle Slider, Eingabekanäle, Farbfeld-Auswahl-Buttons und Trigger.
{
"type": "colorPicker",
"label": "Accent Tint (Inactive)",
"defaultValue": "#e2e8f0",
"disabled": true,
"interactive": true
}
Eigenschaften
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Label-Text (label) | string | - | Optionale visuelle Begleittextposition oberhalb des Farbwähler-Bereichs oder Popover-Triggers. |
Standardwert (defaultValue) | string | "#7c3aed" | Anfangs aktive Farbe. Akzeptiert Hex-Format-Strings (z. B. "#7c3aed", "#3b82f6"). |
Trigger (Popover) (trigger) | boolean | false | Wenn true, ersetzt das vollständige Inline-Picker-Layout durch eine schwebende Popover-Karte, die an einen farbigen Farbfeld-Button angeheftet ist. |
Schließen bei Auswahl (closeOnSelect) | boolean | false | Wenn true, schließt das Popover unmittelbar nach Auswahl eines vordefinierten Farbfelds. (Nur anwendbar, wenn trigger true ist). |
Deaktiviert (disabled) | boolean | false | Friert alle visuellen Slider, benutzerdefinierte Preset-Auswahlen, Pipetten und Eingabefelder ein. |
Größenstufe (size) | select | "md" | Skaliert Breite und Höhe des Sättigungs-Boards, der Farbfelder und der Ränder. • Optionen: "sm", "md", "lg". |
Entwicklerhinweise & Barrierefreiheit
- Intelligente Hydration-Insel: Um Maus-Ziehen auf dem Sättigungs-Raster und dynamische Slider-Positionierung zu handhaben, hydriert der ColorPicker automatisch als Preact-Insel auf Client-Maschinen.
- Formular-Integration: Er gibt ein natives verstecktes
<input type="hidden">aus, das den Hex-String-Wert der aktiven Farbe trägt. Dies garantiert, dass native Formularübermittlungen die aktiven Werte direkt erfassen. - Aria-zugängliche Slider: Alle Slider-Felder, Slider-Boards und Eingabefelder tragen semantische ARIA-Attribute (
role="slider",aria-valuemin,aria-valuemax,aria-valuenow). Standard-Tastaturnavigation (Pfeiltasten links/rechts/oben/unten) wird nativ vollständig unterstützt. - Präzise Konvertierungen: Konvertierungen zwischen HSVA-, HSL-, RGB- und Hex-Formaten erfolgen intern auf Rendering-Ebene. Dies verhindert Farbdrift und Rundungsfehler über ausgewählte Eingabeformate hinweg.