Tanlaş · molecule
Chip
Filtr çipi (bosiladi, tanlangani teskari rangda, içida son — alohida belgi) yoki teg (× bilan olib taşlanadi). Kengaytma: avatarli chip, aria-haspopup chevron (filtr-dropdown), data-type=assist|suggestion, .fx-chip-group (öraş / scroll / data-max + data-more), sm ölçamda ≥24px bosiş maydoni.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-type | filtertagassistsuggestion | filter |
data-size | mdsm | md |
data-overflow | scroll har doim bitta qator, gorizontal surişwrap telefonda ham qatorlarga öraladi (standart: telefonda — bitta qator, suriş) | — |
Anatomiya
- root
.fx-chipşart - count
.fx-chip__countixtiyoriy - remove
.fx-chip__removeixtiyoriy - group
.fx-chip-groupixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Filtrni yoqadi / öçiradi |
Filtr: <button aria-pressed>; teg: olib taşlaş tugmasida aria-label.
Kod
AI uçun: qaçon işlatiladi
npx foxui add chip
<div role="group" aria-label="Holat" style="display:flex;gap:8px;flex-wrap:wrap"> <button class="fx-chip" aria-pressed="true">Hammasi <span class="fx-chip__count">248</span></button> <button class="fx-chip" aria-pressed="false">Yangi <span class="fx-chip__count">12</span></button> <button class="fx-chip" aria-pressed="false">Obunaçi</button> </div> <span class="fx-chip" data-type="tag">Toşkent <button class="fx-chip__remove" aria-label="Olib taşlaş: Toşkent">×</button></span> <div class="fx-chip-group" data-max="3"><button type="button" class="fx-chip" aria-haspopup="true" aria-expanded="false">Holat</button><button type="button" class="fx-chip" data-type="suggestion">Bugungi vazifalar</button><span class="fx-chip" data-type="tag"><span class="fx-avatar" data-color="coral" aria-hidden="true">SR</span>Sardor</span><button type="button" class="fx-chip" data-type="assist">Jadvalga qöşiş</button><button type="button" class="fx-chip" data-more aria-label="Yana 2 ta chipni körsatiş">+2</button></div>
Tokenlar: --fx-bg-brand-subtle --fx-bg-brand-subtle-hover --fx-bg-field --fx-bg-muted --fx-bg-page --fx-bg-subtle --fx-border-color-field --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-badge --fx-radius-circle --fx-radius-pill --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary