Kiritiş · molecule
Burçak / knob
Dumaloq tutqiç (4.89): qiymat yoki burçakni aylantirib tanlaş. Standart — min…max 270° yoy böylab (ovoz, harorat, intensivlik), data-type="angle" — 0…359° töliq aylana (gradient yönalişi, soya burçagi). Sudraş markaz atrofida, klaviatura APG slider böyiça. Örtada raqam va birlik (holat söz bilan), yaşirin input formaga.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-type | value min…max, 270° yoyangle 0…359°, aylanib ötadi | value |
data-size | smmdlg | md |
Anatomiya
- root
.fx-knobşart - track
.fx-knob__trackixtiyoriy - dial
.fx-knob__dialixtiyoriy - value
.fx-knob__valueixtiyoriy - field
.fx-knob-fieldixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| → ↑ | Bir qadam oşiradi |
| ← ↓ | Bir qadam kamaytiradi |
| PageUp / PageDown | 10 qadam (burçakda 15°) |
| Home / End | Eng kam / eng köp qiymat |
role="slider", aria-valuenow / aria-valuetext («65 %», «135°»), aria-label majburiy. Içki qismlar aria-hidden. Burçak rejimida 359 dan keyin 0 ga aylanadi.
Naqş: WAI-ARIA APG slider · rol slider
Kod
AI uçun: qaçon işlatiladi
- Burçak: gradient yönalişi, soya, aylantiriş.
- Ixçam panelda sozlama: ovoz, harorat, intensivlik (audio/IoT boşqaruv).
npx foxui add knob
<div style="display:flex;flex-wrap:wrap;gap:var(--fx-space-8);align-items:end"> <label class="fx-knob-field"><div class="fx-knob" data-fx-knob data-min="0" data-max="100" data-value="65" data-unit="%" data-name="ovoz" aria-label="Qönğiroq ovozi"></div>Qönğiroq ovozi</label> <label class="fx-knob-field"><div class="fx-knob" data-fx-knob data-min="16" data-max="30" data-step="0.5" data-value="22.5" data-unit="°C" aria-label="Ofis harorati"></div>Ofis harorati</label> <label class="fx-knob-field"><div class="fx-knob" data-fx-knob data-type="angle" data-value="135" data-name="burchak" aria-label="Gradient burçagi"></div>Gradient burçagi</label> <label class="fx-knob-field"><div class="fx-knob" data-fx-knob data-size="sm" data-value="30" data-unit="%" aria-label="Şaffoflik"></div>Şaffoflik</label> </div>
Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-surface --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-motion-instant --fx-radius-circle --fx-radius-pill --fx-shadow-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-text-primary --fx-text-secondary