Ma'lumot · compound
Kartalar töri
Kartalar töri (4.138, GridList): fayl menejeri, galereya, şablon tanlaş. Klaviaturada ← ↑ → ↓ joylaşuv böyiça yuradi (ustunlar soni ekran eniga qarab özgarsa ham), Home/End; Böşliq — tanlaş, Shift+strelka — oraliq, Ctrl+A — hammasi, Esc — tozalaş. Enter — karta amallariga kiradi (Oçiş, Yuklab oliş; Tab ular orasida, Esc qaytaradi), amali yöq kartada — «oçiş» hodisasi. data-select="multiple|single|none". Tanlangan karta — brend çegara va ✓ doira; holat yonidagi «N ta tanlandi» qatorida.
-
Şartnoma №045 — Samarqand Savdo.pdf
-
3-çorak hisoboti.xlsx
-
Logo — yangi variant.png
-
Tijoriy taklif — Tong Maktabi.docx
-
Prays-list, oktyabr.pdf
-
Mahsulot taqdimoti.mp4
- Oddiy
- Narxlar jadvali
- Taqdimot
- Şartnoma
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-select | multiplesinglenone | multiple |
data-size | smmdlg | md |
Anatomiya
- root
.fx-gridlistşart - item
.fx-gridlist__itemşart - check
.fx-gridlist__checkixtiyoriy - media
.fx-gridlist__mediaixtiyoriy - body
.fx-gridlist__bodyixtiyoriy - title
.fx-gridlist__titleşart - meta
.fx-gridlist__metaixtiyoriy - actions
.fx-gridlist__actionsixtiyoriy - status
.fx-gridlist__statusixtiyoriy
Holatlar
selectedfocusdisabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Qöşni karta (joylaşuv böyiça) |
| Home / End | Birinçi / oxirgi karta |
| Boʻshliq | Tanlaş / bekor qiliş |
| Shift + strelka | Tanlovni kengaytiriş (köp tanlov) |
| Ctrl+A | Hammasini tanlaş |
| Esc | Tanlovni tozalaş; amallardan kartaga qaytiş |
| Enter | Karta amallariga kiriş (yöq bölsa — oçiş) |
role="grid" (köp tanlovda aria-multiselectable), har karta role="row" + aria-selected + aria-label (nom, hajm), içi bitta role="gridcell". Bitta Tab bekati (roving tabindex); karta içidagi tugmalar tabindex=-1 — Enter bilan kiriladi (APG grid: navigatsiya → interaksiya rejimi).
Naqş: WAI-ARIA APG grid · rol grid
Kod
AI uçun: qaçon işlatiladi
Işlating
- Fayl menejeri, media galereya, hujjatlar papkasi.
- Rasmli şablon yoki mahsulot tanlaş.
Işlatmang
- Köp ustunli ma'lumot →
datagrid - Faqat körsatiladigan kartalar (tanlovsiz) →
card - Rasm köriş (kattalaştiriş) →
lightbox - Har kartaga 3 tadan köp amal qöymang — qolganini «…» menyusiga.
- Kartani faqat rang bilan tanlangan qilmang — ✓ belgisi va «N ta tanlandi» matni bor.
- Jadvalga xos ma'lumotni (köp ustun, saralaş) kartaga solmang — datagrid yoki table.
npx foxui add gridlist
<p class="fx-gridlist__status" data-fx-gridlist-status="gl1" aria-live="polite"></p>
<ul class="fx-gridlist" id="gl1" data-fx-gridlist data-select="multiple" aria-label="Mijoz hujjatlari — Aziz Karimov">
<li class="fx-gridlist__item" data-value="shartnoma-2026-045">
<div class="fx-gridlist__media" aria-hidden="true">PDF</div>
<div class="fx-gridlist__body"><span class="fx-gridlist__title">Şartnoma №045 — Samarqand Savdo.pdf</span><span class="fx-gridlist__meta">1,2 MB · 17-okt</span></div>
<div class="fx-gridlist__actions"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Yuklab oliş</button></div>
</li>
<li class="fx-gridlist__item" data-value="hisobot-q3" aria-selected="true">
<div class="fx-gridlist__media" aria-hidden="true">XLSX</div>
<div class="fx-gridlist__body"><span class="fx-gridlist__title">3-çorak hisoboti.xlsx</span><span class="fx-gridlist__meta">840 KB · 15-okt</span></div>
<div class="fx-gridlist__actions"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Yuklab oliş</button></div>
</li>
<li class="fx-gridlist__item" data-value="logo">
<div class="fx-gridlist__media" aria-hidden="true">PNG</div>
<div class="fx-gridlist__body"><span class="fx-gridlist__title">Logo — yangi variant.png</span><span class="fx-gridlist__meta">312 KB · 14-okt</span></div>
<div class="fx-gridlist__actions"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Yuklab oliş</button></div>
</li>
<li class="fx-gridlist__item" data-value="taklif">
<div class="fx-gridlist__media" aria-hidden="true">DOCX</div>
<div class="fx-gridlist__body"><span class="fx-gridlist__title">Tijoriy taklif — Tong Maktabi.docx</span><span class="fx-gridlist__meta">96 KB · 12-okt</span></div>
<div class="fx-gridlist__actions"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Yuklab oliş</button></div>
</li>
<li class="fx-gridlist__item" data-value="prays">
<div class="fx-gridlist__media" aria-hidden="true">PDF</div>
<div class="fx-gridlist__body"><span class="fx-gridlist__title">Prays-list, oktyabr.pdf</span><span class="fx-gridlist__meta">2,4 MB · 10-okt</span></div>
<div class="fx-gridlist__actions"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Yuklab oliş</button></div>
</li>
<li class="fx-gridlist__item" data-value="video">
<div class="fx-gridlist__media" aria-hidden="true">MP4</div>
<div class="fx-gridlist__body"><span class="fx-gridlist__title">Mahsulot taqdimoti.mp4</span><span class="fx-gridlist__meta">48 MB · 2-okt</span></div>
<div class="fx-gridlist__actions"><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Oçiş</button><button type="button" class="fx-btn" data-variant="ghost" data-size="sm">Yuklab oliş</button></div>
</li>
</ul>
<ul class="fx-gridlist" data-fx-gridlist data-select="single" data-size="sm" aria-label="Taklif şabloni" style="margin-block-start:var(--fx-space-6)">
<li class="fx-gridlist__item" data-value="oddiy"><div class="fx-gridlist__media" aria-hidden="true">Aa</div><div class="fx-gridlist__body"><span class="fx-gridlist__title">Oddiy</span><span class="fx-gridlist__meta">1 sahifa</span></div></li>
<li class="fx-gridlist__item" data-value="jadval" aria-selected="true"><div class="fx-gridlist__media" aria-hidden="true">▦</div><div class="fx-gridlist__body"><span class="fx-gridlist__title">Narxlar jadvali</span><span class="fx-gridlist__meta">2 sahifa</span></div></li>
<li class="fx-gridlist__item" data-value="taqdimot"><div class="fx-gridlist__media" aria-hidden="true">▶</div><div class="fx-gridlist__body"><span class="fx-gridlist__title">Taqdimot</span><span class="fx-gridlist__meta">8 slayd</span></div></li>
<li class="fx-gridlist__item" data-value="shartnoma" aria-disabled="true"><div class="fx-gridlist__media" aria-hidden="true">§</div><div class="fx-gridlist__body"><span class="fx-gridlist__title">Şartnoma</span><span class="fx-gridlist__meta">Pro tarifda</span></div></li>
</ul>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-bold --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-circle --fx-radius-surface --fx-shadow-sm --fx-size-checkbox --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.