Kiritiş · compound
Gradient tanlagiç
Gradient yasaş (4.107): banner, kartoçka foni, prezentatsiya sarlavhasi uçun. Töxtaş nuqtalari yölakda — bosib qöşiladi (şu joydagi rang bilan), sudraladi yoki klaviaturada suriladi (← →, Shift — 10 %), Delete öçiradi (kamida 2 ta). Tanlangan nuqta rangi — tizimning rang tanlagiçi, örni — son maydoni. Çiziqli / radial, burçak — knob (data-type="angle"). Natija — tayyor CSS matni (nusxa oliş uçun) va yaşirin input.
Nuqta: sudrang yoki ← →, Delete — öçiriş (kamida 2 ta).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-type | linear burçak bilanradial doira, markazdan | linear |
Anatomiya
- root
.fx-gradientpickerşart - preview
.fx-gradientpicker__previewixtiyoriy - track
.fx-gradientpicker__trackşart - stop
.fx-gradientpicker__stopşart - row
.fx-gradientpicker__rowixtiyoriy - color
.fx-gradientpicker__colorixtiyoriy - position
.fx-gradientpicker__posixtiyoriy - label
.fx-gradientpicker__labelixtiyoriy - angle
.fx-gradientpicker__angleixtiyoriy - css
.fx-gradientpicker__cssixtiyoriy - hint
.fx-gradientpicker__hintixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Tanlangan nuqta → rang → örin → tur → burçak |
| ← → / ↑ ↓ | Nuqtani 1 % suradi (Shift — 10 %) |
| Home / End | Nuqtani 0 / 100 % ga |
| Delete / Backspace | Nuqtani öçiradi (kamida 2 ta qoladi) |
Har nuqta role="slider" (aria-valuenow — foiz, aria-valuetext — «#E8590C, 45 %», aria-label — «Töxtaş nuqtasi 2 / 3»), tanlangan nuqta aria-selected va qalin halqa + uçburçak (rangdan qat'i nazar). Tur tugmalari aria-pressed. Köriniş role="img".
Naqş: WAI-ARIA APG slider-multithumb · rol slider
Kod
AI uçun: qaçon işlatiladi
- Konstruktor / CMS'da banner yoki kartoçka foni.
- Mavzu muharririda brend gradienti.
- Bitta rang tanlaş →
colorpicker - Tayyor ranglardan tanlaş →
swatch - Matn ostidagi gradientni kontrastsiz qoldirmang — eng oç nuqtada ham matn öqilsin.
- Interfeys holatlarini (xato, muvaffaqiyat) gradient bilan bildirmang — tokenlar bor.
- 5 tadan köp nuqta qöyişni tavsiya qilmang — «kamalak» köriniş çiqadi.
npx foxui add gradientpicker
<div class="fx-gradientpicker" data-fx-gradientpicker data-name="banner_fon" data-type="linear" data-angle="135" data-stops="#e8590c 0, #f59f00 45, #7048e8 100">
<div class="fx-gradientpicker__preview" role="img" aria-label="Gradient körinişi"></div>
<div class="fx-gradientpicker__track" role="group" aria-label="Töxtaş nuqtalari — yölakni bosib yangisini qöşing"></div>
<div class="fx-gradientpicker__row">
<label class="fx-gradientpicker__label">Rang<input type="color" class="fx-gradientpicker__color" aria-label="Tanlangan nuqta rangi"></label>
<label class="fx-gradientpicker__label">Örni, %<input class="fx-input fx-gradientpicker__pos" data-size="sm" type="number" min="0" max="100" inputmode="numeric" aria-label="Tanlangan nuqta örni, foiz"></label>
<div class="fx-segment" data-size="sm" role="group" aria-label="Gradient turi"><button type="button" class="fx-segment__item" data-gtype="linear">Çiziqli</button><button type="button" class="fx-segment__item" data-gtype="radial">Radial</button></div>
<div class="fx-gradientpicker__angle"><div class="fx-knob" data-fx-knob data-size="sm" aria-label="Gradient burçagi"></div></div>
</div>
<input class="fx-input fx-gradientpicker__css" data-size="sm" readonly aria-label="CSS qiymati">
<p class="fx-gradientpicker__hint">Nuqta: sudrang yoki ← →, Delete — öçiriş (kamida 2 ta).</p>
</div>Tokenlar: --fx-bg-field --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-field --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-ease-standard --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-xs --fx-motion-instant --fx-motion-press --fx-popover-width --fx-radius-badge --fx-radius-control --fx-shadow-md --fx-size-checkbox --fx-space-1 --fx-space-12 --fx-space-3 --fx-space-6 --fx-text-primary --fx-text-tertiary