Karkas · pattern
Röyxat sahifasi
Röyxat sahifasi qolipi (PDP «Masdar»): sarlavha + son + asosiy amal → xulosa tasmasi → saqlangan körinişlar → filtr qatori → jadval → sahifalaş; ommaviy panel jadval ostida suzadi. Qolip faqat tartib beradi, komponentlar — alohida.
Arizalar 248
| Mijoz | Summa |
|---|---|
| Aziz | 1 200 000 |
| Bobur | 450 000 |
Anatomiya
- root
.fx-listpageşart - head
.fx-listpage__headixtiyoriy - title
.fx-listpage__titleixtiyoriy - n
.fx-listpage__nixtiyoriy - actions
.fx-listpage__actionsixtiyoriy - table
.fx-listpage__tableixtiyoriy - foot
.fx-listpage__footixtiyoriy
Klaviatura va kiriş
Sarlavha <h2>, filtr qatori role="search", jadvalda <caption>; tanlov özgarganda ommaviy panel aria-live bilan e'lon qiladi (bulkbar).
Kod
AI uçun: qaçon işlatiladi
Işlating
- CRM/ERP'da jadvalli röyxat ekrani.
npx foxui add listpage
<div class="fx-listpage"> <header class="fx-listpage__head"><h2 class="fx-listpage__title">Arizalar <span class="fx-listpage__n">248</span></h2><div class="fx-listpage__actions"><button class="fx-btn" data-variant="primary" type="button">Yangi ariza</button></div></header> <div class="fx-views" role="group" aria-label="Körinişlar"><button class="fx-views__item" type="button" aria-pressed="true">Hammasi <span class="fx-views__count">248</span></button><button class="fx-views__item" type="button" aria-pressed="false">Muddati ötgan <span class="fx-views__count" data-tone="error">12</span></button></div> <div class="fx-filterbar" data-fx-filterbar><div class="fx-filterbar__main" role="search" aria-label="Filtrlaş"><div class="fx-filterbar__search"><label class="fx-search" data-size="sm"><input class="fx-search__input" type="search" placeholder="Qidiriş" aria-label="Qidiriş"></label></div></div></div> <div class="fx-listpage__table"><div class="fx-table-scroll"><table class="fx-table"><caption class="fx-sr-only">Arizalar</caption><thead><tr><th scope="col">Mijoz</th><th scope="col" data-type="num">Summa</th></tr></thead><tbody><tr><td>Aziz</td><td data-type="num">1 200 000</td></tr><tr><td>Bobur</td><td data-type="num">450 000</td></tr></tbody></table></div></div> <div class="fx-listpage__foot"><nav class="fx-pagination" data-variant="minimal" aria-label="Sahifalar"><span class="fx-pagination__info">1–2 / 248</span><a class="fx-pagination__page" aria-disabled="true" aria-label="Oldingi">‹</a><a class="fx-pagination__page" href="#" aria-label="Keyingi">›</a></nav></div> </div>
Tokenlar: --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-font-size-md --fx-font-size-xl --fx-font-weight-regular --fx-font-weight-semibold --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-tertiary
Şu toifadan
AkkordeonYiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.Maqola sahifasiBlog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi).Kiriş sahifasiKiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).Bento törLanding xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense).Bleed (manfiy çet)Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi.Blog röyxatiBlog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).