Kiritiş · compound
Rang tanlagiç
Erkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa). Qiymat — #rrggbb; hodisa `fx-colorpicker-change`. Faqat 6–12 ta tayyor rang kerak bölsa — `swatch`. Alfa va ğildirak (4.106): data-alpha — şaffoflik çiziği (şaxmat fon ustida), HEX 8 xonali (#1C7ED6CC), hodisada detail.alpha (0–1); data-shape="wheel" — aylana: burçak — ton, markazdan masofa — töyinganlik, ostidagi çiziq — yorqinlik.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | sm | md |
data-alpha | | — |
data-shape | squarewheel ton ğildiragi | square |
Anatomiya
- root
.fx-colorpickerşart - area
.fx-colorpicker__areaşart - thumb
.fx-colorpicker__thumbixtiyoriy - hue
.fx-colorpicker__hueşart - preview
.fx-colorpicker__previewixtiyoriy - hex
.fx-colorpicker__hexşart - pipette
.fx-colorpicker__pipetteixtiyoriy - rgb
.fx-colorpicker__rgbixtiyoriy - swatches
.fx-colorpicker__swatchesixtiyoriy - swatch
.fx-colorpicker__swatchixtiyoriy - alpha
.fx-colorpicker__alphaixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Töyinganlik ±1 (Shift — ±10) |
| ↑ ↓ | Yorqinlik ±1 (Shift — ±10) |
| Home, End | Töyinganlik 0 / 100 |
| ← → (ton chizigʻida) | Ton ±1 |
| Gʻildirakda ← → | Ton 1° (Shift — 10°) |
| Gʻildirakda ↑ ↓ | Töyinganlik 1 % (Shift — 10 %) |
Maydon role="slider" (aria-valuetext: töyinganlik va yorqinlik foizi), ← → ↑ ↓ (Shift — katta qadam), Home/End. Ton çiziği — native range. HEX notöğri bölsa aria-invalid. Tayyor ranglar aria-pressed bilan va aria-label nomi bilan.
Naqş: WAI-ARIA APG slider · rol slider
Kod
AI uçun: qaçon işlatiladi
- Foydalanuvçi istalgan rangni tanlaşi kerak (mavzu, yorliq, diagramma rangi).
- Oldindan belgilangan bir neçta rang →
swatch - Brend ranglari uçun erkin tanlovni oçmang — tayyor mavzu (`data-fx-theme`) yoki `swatch` yetarli.
- Rangni faqat rang bilan bildirmang: HEX matni körinib tursin.
- Kontrastni tekşirmay matn rangi sifatida saqlamang.
npx foxui add colorpicker
<div class="fx-colorpicker" data-fx-colorpicker data-value="#e8590c">
<div class="fx-colorpicker__area" aria-label="Töyinganlik va yorqinlik"><span class="fx-colorpicker__thumb"></span></div>
<input type="range" class="fx-slider fx-colorpicker__hue" min="0" max="360" aria-label="Rang toni">
<div class="fx-colorpicker__row">
<span class="fx-colorpicker__preview" aria-hidden="true"></span>
<input class="fx-input fx-colorpicker__hex" name="rang" maxlength="7" aria-label="HEX qiymati" spellcheck="false" autocomplete="off">
<button type="button" class="fx-btn fx-colorpicker__pipette" data-variant="outline" data-size="sm" hidden>Pipetka</button>
</div>
<div class="fx-colorpicker__rgb">
<label>R<input class="fx-input" data-size="sm" type="number" min="0" max="255" inputmode="numeric"></label>
<label>G<input class="fx-input" data-size="sm" type="number" min="0" max="255" inputmode="numeric"></label>
<label>B<input class="fx-input" data-size="sm" type="number" min="0" max="255" inputmode="numeric"></label>
</div>
<div class="fx-colorpicker__swatches" role="group" aria-label="Tayyor ranglar">
<button type="button" class="fx-colorpicker__swatch" data-color="#e8590c" aria-label="Zarğaldoq"></button>
<button type="button" class="fx-colorpicker__swatch" data-color="#2f9e44" aria-label="Yaşil"></button>
<button type="button" class="fx-colorpicker__swatch" data-color="#1c7ed6" aria-label="Moviy"></button>
<button type="button" class="fx-colorpicker__swatch" data-color="#7048e8" aria-label="Binafşa"></button>
</div>
</div>
<!-- Alfa va gʻildirak (4.106) -->
<div class="fx-colorpicker" data-fx-colorpicker data-alpha data-value="#1c7ed6cc" style="margin-block-start:var(--fx-space-6)">
<div class="fx-colorpicker__area" aria-label="Töyinganlik va yorqinlik"><span class="fx-colorpicker__thumb"></span></div>
<input type="range" class="fx-slider fx-colorpicker__hue" min="0" max="360" aria-label="Rang toni">
<input type="range" class="fx-slider fx-colorpicker__alpha" min="0" max="100" aria-label="Şaffoflik">
<div class="fx-colorpicker__row"><span class="fx-colorpicker__preview" aria-hidden="true"></span><input class="fx-input fx-colorpicker__hex" name="soya_rangi" maxlength="9" aria-label="HEX qiymati (şaffoflik bilan)" spellcheck="false" autocomplete="off"></div>
</div>
<div class="fx-colorpicker" data-fx-colorpicker data-shape="wheel" data-value="#2f9e44" style="margin-block-start:var(--fx-space-6)">
<div class="fx-colorpicker__area" aria-label="Ton va töyinganlik ğildiragi"><span class="fx-colorpicker__thumb"></span></div>
<input type="range" class="fx-slider fx-colorpicker__hue" min="0" max="100" aria-label="Yorqinlik">
<div class="fx-colorpicker__row"><span class="fx-colorpicker__preview" aria-hidden="true"></span><input class="fx-input fx-colorpicker__hex" name="teg_rangi" maxlength="7" aria-label="HEX qiymati" spellcheck="false" autocomplete="off"></div>
</div>Tokenlar: --fx-bg-muted --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-color-black --fx-color-white --fx-cp-color --fx-cp-dim --fx-cp-hue --fx-cp-rail --fx-cp-solid --fx-cp-wheel --fx-cp-x --fx-cp-y --fx-ease-standard --fx-font-size-xs --fx-motion-instant --fx-motion-press --fx-popover-width --fx-radius-circle --fx-radius-control --fx-shadow-md --fx-size-checkbox --fx-size-control-md --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-sw --fx-text-primary --fx-text-tertiary