Ma'lumot · compound
Röyxat
Qatorlar röyxati: çapda avatar yoki belgi, örtada sarlavha va meta (bitta qator, «…» bilan), öngda qiymat yoki amal. Butun qator havola bölişi mumkin. Variantlar: belgilanadigan qator (.fx-check), amalli qator, ixçam, kartali. Kengaytma: .fx-list__lead (çap slot), data-divider=none, data-focus=inset.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-density | compact | default |
data-variant | card | default |
data-divider | none | — |
data-focus | inset | — |
Anatomiya
- root
.fx-listşart - item
.fx-list__itemşart - body
.fx-list__bodyixtiyoriy - title
.fx-list__titleşart - meta
.fx-list__metaixtiyoriy - end
.fx-list__endixtiyoriy - link
.fx-list__linkixtiyoriy - check
.fx-list__checkixtiyoriy - lead
.fx-list__leadixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Qator havolasiga ötadi |
<ul>/<li>; butun qator havola bölsa — içida boşqa interaktiv element yöq.
Kod
AI uçun: qaçon işlatiladi
- Bir xil turdagi yozuvlar: mijozlar, xabarlar, fayllar — köp ustun kerak bölmasa.
- Ustunlar böyiça soliştiriş →
table - Qator içida bir neçta havola qilmang, agar butun qator havola bölsa.
npx foxui add list
<ul class="fx-list"> <li class="fx-list__item"><a class="fx-list__link" href="#"><span class="fx-avatar" data-size="sm" data-color="yellow" role="img" aria-label="Aziz">AZ</span><span class="fx-list__body"><span class="fx-list__title">Aziz Karimov</span><span class="fx-list__meta">Obuna · 2 kun oldin</span></span><span class="fx-list__end">250 000 söm</span></a></li> <li class="fx-list__item"><a class="fx-list__link" href="#"><span class="fx-avatar" data-size="sm" data-color="blue" role="img" aria-label="Bobur">BO</span><span class="fx-list__body"><span class="fx-list__title">Bobur Toshmatov</span><span class="fx-list__meta">Savol · bugun 09:14</span></span><span class="fx-list__end"><span class="fx-status" data-tone="pending">Kutilmoqda</span></span></a></li> </ul> <ul class="fx-list" data-variant="card" data-density="compact"> <li class="fx-list__item"><label class="fx-check fx-list__check"><input type="checkbox" aria-label="Aziz Karimovni tanlaş"><span class="fx-check__box"></span></label><span class="fx-list__body"><span class="fx-list__title">Aziz Karimov</span><span class="fx-list__meta">Obuna</span></span><span class="fx-list__end"><button class="fx-btn" type="button">Oçiş</button></span></li> </ul> <ul class="fx-list" data-divider="none"><li class="fx-list__item"><span class="fx-list__lead" aria-hidden="true">★</span><div class="fx-list__body"><span class="fx-list__title">Sevimli</span></div></li></ul>
Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-radius-nav --fx-radius-surface --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary