Körsatiş · compound
Kartalar dastasi
Ustma-ust turgan kartalar (4.80): oldingisi töliq, orqadagilari biroz yuqorida va kiçikroq — «yana bor» hissi. Avtomatik (data-autoplay, ms) yoki tugmalar va ← → bilan almaşadi; oldingi karta pastga sirpanib ketadi. Mijozlar fikri, yangilik va e'lonlar uçun. Avtomatik almaşiş faqat körinişda, siçqonça yoki fokus ustida töxtaydi, harakat kamaytirilganda öçadi.
-
«Arizalar endi bitta oynada: sayt, bot va qönğiroqlar. Menejerlar javob beriş vaqti 2 soatdan 15 daqiqaga tuşdi.»
-
«Ombor qoldiği har kuni ertalab özi hisoblanadi — Excel'dan butunlay voz keçdik.»
-
«Bemorlar navbatni Telegram orqali oladi, qabulxonada tirbandlik yöq.»
-
«Öqituvçilar davomatni telefondan belgilaydi, ota-onalar şu zahoti xabar oladi.»
1 / 4
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-autoplay | ms avtomatik almaşiş oraliği (≥ 2500) | 0 |
data-depth | 123 yaşirin | 0 |
Anatomiya
- root
.fx-cardstackşart - list
.fx-cardstack__listşart - card
.fx-cardstack__cardşart - quote
.fx-cardstack__quoteixtiyoriy - author
.fx-cardstack__authorixtiyoriy - nav
.fx-cardstack__navixtiyoriy - count
.fx-cardstack__countixtiyoriy
Holatlar
leaving
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Oldingi / keyingi karta |
| Tab | Oldingi kartadagi havolalar va tugmalar |
role="region" + aria-roledescription va aria-label; orqadagi kartalar inert va aria-hidden (fokus faqat oldingisida). Hisoblagiç aria-live="polite" — «2 / 4». ← → fokus içida almaştiradi; avtomatik almaşiş hover/fokusda töxtaydi, reduced-motion va data-fx-motion="none" da yöq (WCAG 2.2.2).
Naqş: WAI-ARIA APG carousel · rol region
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing sahifasidagi mijozlar fikri — bir vaqtda bittasi, «yana bor» körinib tursin.
- Dashboard'dagi e'lonlar yoki maslahatlar dastasi.
Işlatmang
- Köp rasm yoki mahsulotlarni varaqlaş →
carousel - Hamma fikrlar bir vaqtda körinsin →
testimonials - Muhim ma'lumotni faqat orqadagi kartalarga qoldirmang — foydalanuvçi ularni körmasligi mumkin.
- Avtomatik almaşişni 5 soniyadan tez qilmang va töxtatiş imkonini olib taşlamang.
- 6 tadan köp karta qöymang — röyxat yoki karusel işlating.
npx foxui add cardstack
<div class="fx-cardstack" data-fx-cardstack data-autoplay="6000" role="region" aria-roledescription="kartalar dastasi" aria-label="Mijozlar fikri">
<ul class="fx-cardstack__list">
<li class="fx-cardstack__card">
<blockquote class="fx-cardstack__quote">«Arizalar endi bitta oynada: sayt, bot va qönğiroqlar. Menejerlar javob beriş vaqti 2 soatdan 15 daqiqaga tuşdi.»</blockquote>
<div class="fx-cardstack__author"><span class="fx-avatar" data-color="pink" role="img" aria-label="Dilnoza Rahimova">DR</span><div><strong>Dilnoza Rahimova</strong><small>Savdo bölimi rahbari, «Mebel Uy»</small></div></div>
</li>
<li class="fx-cardstack__card">
<blockquote class="fx-cardstack__quote">«Ombor qoldiği har kuni ertalab özi hisoblanadi — Excel'dan butunlay voz keçdik.»</blockquote>
<div class="fx-cardstack__author"><span class="fx-avatar" data-color="green" role="img" aria-label="Javlon Toshmatov">JT</span><div><strong>Javlon Toshmatov</strong><small>Boş hisobçi, «Agro Savdo»</small></div></div>
</li>
<li class="fx-cardstack__card">
<blockquote class="fx-cardstack__quote">«Bemorlar navbatni Telegram orqali oladi, qabulxonada tirbandlik yöq.»</blockquote>
<div class="fx-cardstack__author"><span class="fx-avatar" data-color="blue" role="img" aria-label="Malika Yusupova">MY</span><div><strong>Malika Yusupova</strong><small>Klinika administratori</small></div></div>
</li>
<li class="fx-cardstack__card">
<blockquote class="fx-cardstack__quote">«Öqituvçilar davomatni telefondan belgilaydi, ota-onalar şu zahoti xabar oladi.»</blockquote>
<div class="fx-cardstack__author"><span class="fx-avatar" data-color="yellow" role="img" aria-label="Bobur Aliyev">BA</span><div><strong>Bobur Aliyev</strong><small>Direktor, «Tong maktabi»</small></div></div>
</li>
</ul>
<div class="fx-cardstack__nav">
<button class="fx-btn" data-variant="ghost" data-shape="icon" data-stack="prev" aria-label="Oldingi fikr"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z"/></svg></button>
<span class="fx-cardstack__count" aria-live="polite">1 / 4</span>
<button class="fx-btn" data-variant="ghost" data-shape="icon" data-stack="next" aria-label="Keyingi fikr"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></button>
</div>
</div>Tokenlar: --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-ease-emphasized --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-line-height-relaxed --fx-motion-base --fx-motion-exit-base --fx-motion-slow --fx-radius-overlay --fx-shadow-md --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-tertiary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.