Kiritiş · pattern
Faset filtr paneli
Röyxat yonidagi guruhlangan filtrlar (4.167, Algolia/Polaris uslubida): har guruh yiğiladi, har variantda natijalar soni, uzun röyxatda «Yana N ta» va guruh içida qidiruv, guruh sarlavhasida tanlanganlar soni, yuqorida «Tozalaş». Natijasi 0 variant xira. CRM röyxati, katalog, hisobotlar uçun.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-limit | son guruhda şunça variant, qolgani «Yana N ta» ostida | — |
Anatomiya
- root
.fx-facetsşart - head
.fx-facets__headixtiyoriy - title
.fx-facets__titleixtiyoriy - clear
.fx-facets__clearixtiyoriy - group
.fx-facets__groupşart - legend
.fx-facets__legendşart - badge
.fx-facets__badgeixtiyoriy - body
.fx-facets__bodyixtiyoriy - search
.fx-facets__searchixtiyoriy - list
.fx-facets__listşart - option
.fx-facets__optionşart - label
.fx-facets__labelixtiyoriy - count
.fx-facets__countixtiyoriy - more
.fx-facets__moreixtiyoriy - none
.fx-facets__noneixtiyoriy
Holatlar
empty-optionchecked
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Guruh sarlavhasi, variantlar, «Yana», «Tozalaş» böylab |
| Enter / Boʻsh joy | Guruhni yiğadi/oçadi, variantni belgilaydi |
Guruh — details/summary (Enter/Böş joy bilan yiğiladi), variantlar — haqiqiy checkbox yorliği bilan; badge'da aria-label («2 ta tanlangan»); «Yana N ta» tugmasi aria-expanded va aria-controls bilan.
Naqş: WAI-ARIA APG disclosure · rol group
Kod
AI uçun: qaçon işlatiladi
Işlating
- Köp maydonli röyxat yoki katalogni bir neçta mezon böyiça toraytiriş (bosqiç, şahar, mas'ul).
Işlatmang
- 2–3 tezkor filtr →
filterbar - Murakkab şartlar (VA/YOKI) →
filterbar - Har variant yonidagi sonni olib taşlamang — foydalanuvçi böş natijaga tuşmasin.
- Guruhda 5–7 dan köp variantni birdaniga körsatmang — data-limit va qidiruv bering.
- Tor ekranda çap ustun sifatida qoldirmang — filterbar «Filtrlar» varaği (sheet) içiga oling.
npx foxui add facets
<aside class="fx-facets" data-fx-facets aria-label="Bitimlar filtri">
<div class="fx-facets__head"><h2 class="fx-facets__title">Filtrlar</h2><button class="fx-facets__clear" type="button" data-facets-clear hidden>Tozalaş (<span data-facets-count>0</span>)</button></div>
<details class="fx-facets__group" open>
<summary class="fx-facets__legend">Bosqiç <span class="fx-facets__badge" hidden></span></summary>
<div class="fx-facets__body">
<ul class="fx-facets__list" aria-label="Bosqiç">
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="bosqich" value="yangi"><span class="fx-check__box"></span></span><span class="fx-facets__label">Yangi lid</span><span class="fx-facets__count">48</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="bosqich" value="aloqa"><span class="fx-check__box"></span></span><span class="fx-facets__label">Aloqa</span><span class="fx-facets__count">31</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="bosqich" value="taklif" checked><span class="fx-check__box"></span></span><span class="fx-facets__label">Taklif</span><span class="fx-facets__count">19</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="bosqich" value="muzokara"><span class="fx-check__box"></span></span><span class="fx-facets__label">Muzokara</span><span class="fx-facets__count">7</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="bosqich" value="yutildi"><span class="fx-check__box"></span></span><span class="fx-facets__label">Yutildi</span><span class="fx-facets__count">5</span></label></li>
</ul></div>
</details>
<details class="fx-facets__group" open data-limit="4">
<summary class="fx-facets__legend">Şahar <span class="fx-facets__badge" hidden></span></summary>
<div class="fx-facets__body"><input class="fx-input fx-facets__search" data-size="sm" type="search" placeholder="Şahar qidiriş" aria-label="Şahar qidiriş">
<ul class="fx-facets__list" aria-label="Şahar">
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="tsh"><span class="fx-check__box"></span></span><span class="fx-facets__label">Toşkent</span><span class="fx-facets__count">64</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="smq"><span class="fx-check__box"></span></span><span class="fx-facets__label">Samarqand</span><span class="fx-facets__count">22</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="bux"><span class="fx-check__box"></span></span><span class="fx-facets__label">Buxoro</span><span class="fx-facets__count">11</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="nam"><span class="fx-check__box"></span></span><span class="fx-facets__label">Namangan</span><span class="fx-facets__count">9</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="and"><span class="fx-check__box"></span></span><span class="fx-facets__label">Andijon</span><span class="fx-facets__count">6</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="far"><span class="fx-check__box"></span></span><span class="fx-facets__label">Farğona</span><span class="fx-facets__count">4</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="xor"><span class="fx-check__box"></span></span><span class="fx-facets__label">Xorazm</span><span class="fx-facets__count">2</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="shahar" value="nuk"><span class="fx-check__box"></span></span><span class="fx-facets__label">Nukus</span><span class="fx-facets__count">0</span></label></li>
</ul></div>
</details>
<details class="fx-facets__group" open>
<summary class="fx-facets__legend">Mas'ul <span class="fx-facets__badge" hidden></span></summary>
<div class="fx-facets__body">
<ul class="fx-facets__list" aria-label="Mas'ul">
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="masul" value="aziz"><span class="fx-check__box"></span></span><span class="fx-facets__label">Aziz Karimov</span><span class="fx-facets__count">28</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="masul" value="dilnoza"><span class="fx-check__box"></span></span><span class="fx-facets__label">Dilnoza Yusupova</span><span class="fx-facets__count">21</span></label></li>
<li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="masul" value="bobur"><span class="fx-check__box"></span></span><span class="fx-facets__label">Bobur Rahimov</span><span class="fx-facets__count">14</span></label></li>
</ul></div>
</details>
</aside>Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-subtle --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-nav-width --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !CheckoutTölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).ComboboxYozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).Yoziş paneli (composer)AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».