Karkas · primitive
Aylanuvçi maydon
Çegaralangan aylanuvçi maydon: kontent davom etayotgan çetda yumşoq söniş (data-fade-start/end xulq tomonidan qöyiladi) — «yana bor» işorasi. Vertikal (standart) yoki gorizontal (data-axis="x"). Ingiçka çiziq; siğsa — söniş çiqmaydi. Progressiv xiralik (data-edge="blur"): çetda söniş örniga kontent xiralaşib ostidan ötadi — vertikal maydonda; qöllanmasa oddiy söniş. Uşlab suriş (data-drag, 20.10 — Manbaa'dan): siçqonça bilan sudrab suriladi (5 px çegara, surilgandan keyingi bosiş bekor), çiziq yaşirin, çetdagi söniş qoladi; barmoq va klaviatura özgarmaydi. Sönişsiz (data-fade="none", 21.10 — Manbaa/Ustoz): çetda kesilgan karta özi «davomi bor» deydi; uşlab suriladigan javon (data-drag) uçun standart. Içki çekinişli (padding) gorizontal qatorda scroll-padding-inline'ni şu padding qiymatiga teng bering — aks holda scroll-snap birinçi elementni surib qöyadi.
Buyurtma #1040 — yetkazib berilmoqda.
Buyurtma #1041 — tayyorlanmoqda.
Buyurtma #1042 — tölov kutilmoqda.
Buyurtma #1043 — yakunlandi.
Buyurtma #1044 — yetkazib berilmoqda.
Buyurtma #1045 — tayyorlanmoqda.
Buyurtma #1046 — tölov kutilmoqda.
Buyurtma #1047 — yakunlandi.
Buyurtma #1048 — yetkazib berilmoqda.
Buyurtma #1049 — tayyorlanmoqda.
09:00 — Jasur Qodirovga qönğiroq.
10:30 — «Baraka» MChJ bilan uçraşuv.
12:00 — Hisob-faktura yuboriş.
14:00 — Yangi mijozlar röyxatini tekşiriş.
15:30 — Ğolib Ergashevga taklif.
17:00 — Kunlik hisobot.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-axis | yx | y |
data-edge | fadeblur progressiv xiralik, faqat vertikal | fade |
data-drag | true | — |
data-fade | auto çetda söniş — faqat tik aylanişda standart; gorizontalda (data-axis="x") faqat data-fade="auto" bilan (Ustoz 21.10: gorizontal surişda söniş yöq)none sönişsiz — kesilib turgan karta özi davomi borligini bildiradi (Apple javonlari kabi); data-drag uçun standart | auto |
Anatomiya
- root
.fx-scrollareaşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↑ ↓ / PageUp PageDown | Aylantiradi (fokus maydonda) |
| ← → | Gorizontal maydonda aylantiradi |
Aylantiriladigan bölsa tabindex=0 (klaviatura ↑ ↓ bilan aylantiradi) va role=region + aria-label; söniş bezak, mazmun yaşirilmaydi.
Kod
AI uçun: qaçon işlatiladi
- Çeklangan balandlikdagi röyxat, panel yoki jadval uzun bölib, qolgani borligini bildiriş kerak bölganda.
- Butun sahifa aylantiriş →
layout - Köp sahifali ma'lumot →
pagination - Maydonga balandlik/kenglik çegarasini bermasdan işlatmang — aylantiriş bölmaydi.
- Sönişni yagona işora qilib qöymang: uzun röyxatda hisoblagiç ham yozing.
- Içki çekinişli (padding) gorizontal qatorda scroll-padding-inline'siz scroll-snap — birinçi element 1–2 px surilib, çap çet notöğri sönadi; scroll-padding-inline = padding bering.
npx foxui add scrollarea
<div class="fx-scrollarea" data-fx-scrollarea aria-label="Oxirgi buyurtmalar" role="region" style="max-block-size: 9rem; max-inline-size: 22rem"> <p>Buyurtma #1040 — yetkazib berilmoqda.</p> <p>Buyurtma #1041 — tayyorlanmoqda.</p> <p>Buyurtma #1042 — tölov kutilmoqda.</p> <p>Buyurtma #1043 — yakunlandi.</p> <p>Buyurtma #1044 — yetkazib berilmoqda.</p> <p>Buyurtma #1045 — tayyorlanmoqda.</p> <p>Buyurtma #1046 — tölov kutilmoqda.</p> <p>Buyurtma #1047 — yakunlandi.</p> <p>Buyurtma #1048 — yetkazib berilmoqda.</p> <p>Buyurtma #1049 — tayyorlanmoqda.</p> </div> <div class="fx-scrollarea" data-fx-scrollarea data-edge="blur" aria-label="Bugungi vazifalar" role="region" style="max-block-size: 9rem; max-inline-size: 22rem; margin-block-start: var(--fx-space-4)"> <p>09:00 — Jasur Qodirovga qönğiroq.</p> <p>10:30 — «Baraka» MChJ bilan uçraşuv.</p> <p>12:00 — Hisob-faktura yuboriş.</p> <p>14:00 — Yangi mijozlar röyxatini tekşiriş.</p> <p>15:30 — Ğolib Ergashevga taklif.</p> <p>17:00 — Kunlik hisobot.</p> </div>
Tokenlar: --fx-border-color-focus --fx-border-width-focus --fx-ease-standard --fx-motion-fast --fx-space-1 --fx-space-2 --fx-space-8 --fx-z-raised