Körsatiş · molecule
Oldin/keyin taqqoslaş
Ikki holatni ustma-ust qöyib, ajratgiçni sudrab soliştiriş (4.77): eski va yangi dizayn, «kulrang qolip» va tayyor libos, rasm tahriri. Boşqaruv — butun maydon ustidagi körinmas haqiqiy range: siçqonça bilan sudraş, bosiş, barmoq va klaviatura (← → Home End) özidan işlaydi. Tutqiç fokusda halqa oladi, «Oldin» / «Keyin» yorliqlari burçaklarda. Içida rasm, video yoki istalgan HTML (masalan jonli komponentlar) bölişi mumkin.
Bugungi arizalar
Keça bilan soliştirganda 12 ta köproq
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-ratio | video 16:9square 1:1 | auto |
data-side | beforeafter | before |
Anatomiya
- root
.fx-compareşart - before
.fx-compare__beforeşart - after
.fx-compare__afterşart - label
.fx-compare__labelixtiyoriy - handle
.fx-compare__handleixtiyoriy - range (boşqaruv)
.fx-compare__rangeşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Ajratgiçni 1% ga siljitadi |
| PageUp, PageDown | Katta qadam |
| Home, End | Butunlay «oldin» yoki «keyin» |
Boşqaruv — haqiqiy <input type="range"> (aria-label majburiy): ← → qadamlab, Home/End çetga, PageUp/PageDown katta qadam. aria-valuetext ikki tomonning uluşini söz bilan aytadi (data-before, data-after nomlari). Tutqiç va yorliqlar aria-hidden; fokus halqasi tutqiçda.
Naqş: WAI-ARIA APG slider · rol slider
Kod
AI uçun: qaçon işlatiladi
- Redizayn, «oldin va keyin» natija, rasm tahriri yoki filtrni körsatiş.
- Landingda «kulrang qolip → tayyor libos» kabi özgarişni his ettiriş.
- Bir neçta rasmni körsatiş →
carousel - Kod özgarişlari →
code - Bir-biriga öxşamagan ikki rasmni soliştirmang — kompozitsiya bir xil bölsin.
- Içidagi tugma va havolalarni bosiladigan qilib qoldirmang — range ustida turadi; namoyiş elementlariga tabindex="-1".
- Yorliqsiz qoldirmang — qaysi tomon «oldin» ekani yozilsin.
npx foxui add compare
<div class="fx-compare" data-fx-compare data-ratio="video">
<div class="fx-compare__before" style="display:grid;align-content:center;gap:var(--fx-space-3);padding:var(--fx-space-8) var(--fx-space-12);background:var(--fx-bg-surface)">
<span class="fx-skeleton" style="inline-size:40%;block-size:var(--fx-space-6)"></span>
<span class="fx-skeleton" style="inline-size:70%"></span>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fx-space-3)"><span class="fx-skeleton" style="block-size:calc(var(--fx-space-12) * 2)"></span><span class="fx-skeleton" style="block-size:calc(var(--fx-space-12) * 2)"></span><span class="fx-skeleton" style="block-size:calc(var(--fx-space-12) * 2)"></span></div>
<span class="fx-skeleton" style="inline-size:25%;block-size:var(--fx-size-control-sm)"></span>
</div>
<div class="fx-compare__after" style="display:grid;align-content:center;gap:var(--fx-space-3);padding:var(--fx-space-8) var(--fx-space-12);background:var(--fx-bg-page)">
<h3 class="fx-heading" data-size="h3" style="margin:0">Bugungi arizalar</h3>
<p style="margin:0;color:var(--fx-text-secondary)">Keça bilan soliştirganda 12 ta köproq</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fx-space-3)"><div class="fx-stat" data-color="purple"><span class="fx-stat__label">Yangi</span><span class="fx-stat__value">48</span></div><div class="fx-stat" data-color="blue"><span class="fx-stat__label">Jarayonda</span><span class="fx-stat__value">17</span></div><div class="fx-stat" data-color="green"><span class="fx-stat__label">Yopildi</span><span class="fx-stat__value">9</span></div></div>
<button class="fx-btn" data-variant="primary" type="button" tabindex="-1" style="justify-self:start">Ariza qöşiş</button>
</div>
<span class="fx-compare__label" data-side="before" aria-hidden="true">Kulrang qolip</span>
<span class="fx-compare__label" data-side="after" aria-hidden="true">FoxUI libosi</span>
<span class="fx-compare__handle" aria-hidden="true"></span>
<input class="fx-compare__range" type="range" min="0" max="100" value="50" aria-label="Kulrang qolip va FoxUI libosini soliştiriş" data-before="kulrang qolip" data-after="FoxUI libosi">
</div>Tokenlar: --fx-bg-muted --fx-bg-static-light --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-compare-pos --fx-ease-standard --fx-font-size-xs --fx-font-weight-medium --fx-knob-blur --fx-knob-motion --fx-motion-fast --fx-radius-badge --fx-radius-circle --fx-radius-surface --fx-shadow-md --fx-size-control-md --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-primary --fx-text-secondary