Ma'lumot · pattern
Jamoa a'zolari
Jamoa a'zolari va takliflar sahifasi (naqş): örinlar hisobi (5 / 10), email bilan taklif (rol tanlaş bilan), a'zolar jadvali — rol, holat (Faol / Kutilmoqda), oxirgi faollik, amallar. Taklif darhol «Kutilmoqda» qatori bölib qöşiladi; olib taşlaş va bekor qiliş fxConfirm bilan tasdiqlanadi.
Jamoa a'zolari
Kim nimani köradi va özgartiradi — rol belgilaydi.
Band örinlar: 5 / 10
| A'zo | Rol | Holat | Oxirgi faollik | Amallar |
|---|---|---|---|---|
AKAziz Karimov | Egasi | Faol | Hozir onlayn | |
DRDilnoza Rahimova | Faol | Bugun, 09:41 | ||
BTBobur Toshmatov | Faol | Keça, 18:05 | ||
MYMadina Yusupova | Faol | 12-oktabr | ||
| Kutilmoqda | — |
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | activepending Taklif yuborilgan, hali qabul qilinmagan | active |
Anatomiya
- root
.fx-membersşart - head
.fx-members__headixtiyoriy - title
.fx-members__titleixtiyoriy - text
.fx-members__textixtiyoriy - seats
.fx-members__seatsixtiyoriy - invite
.fx-members__inviteşart - message
.fx-members__msgixtiyoriy - table
.fx-members__tableşart - row
.fx-members__rowixtiyoriy - role
.fx-members__roleixtiyoriy - owner
.fx-members__ownerixtiyoriy - when
.fx-members__whenixtiyoriy - actions
.fx-members__actionsixtiyoriy
Holatlar
pendingfullremoving
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter (email maydonida) | Taklif yuboradi |
| Tab | Qatorlardagi rol tanlagiçi va amal tugmalari böylab |
| Esc (tasdiq oynasida) | Bekor qiladi, fokus tugmaga qaytadi |
Jadval sarlavhali ustunlar bilan (scope=col), «Amallar» ustuni sr-only nom bilan. Har rol tanlagiçi aria-label «Rol: Dilnoza Rahimova». Taklif, rol özgarişi va olib taşlaş natijasi aria-live hududda aytiladi; qator olib taşlangaç fokus qöşni qatorga yoki taklif maydoniga ötadi. Holat — fx-status (şakl + söz).
Kod
AI uçun: qaçon işlatiladi
Işlating
- SaaS sozlamalarida jamoa, rollar va takliflarni boşqariş.
- CRM yoki loyiha iş maydoniga hamkasblarni çaqiriş.
Işlatmang
- Kim hozir onlayn ekanini körsatiş →
presence - Köp ustunli, saralanadigan katta foydalanuvçilar bazasi →
datagrid - Egasini olib taşlaş yoki rolini özgartiriş tugmasini körsatmang — «Egasi» matn bölib tursin; egalikni alohida «Egalikni topşiriş» oqimi ötkazadi.
- Kutilayotgan taklifni faol a'zo bilan aralaştirib yubormang — «Kutilmoqda» holati, kursiv nom va çap çiziq bilan ajralib tursin.
- Olib taşlaşni tasdiqsiz bajarmang — fxConfirm nima yöqolişini aytadi.
npx foxui add members
<section class="fx-members" data-fx-members data-seats="10" aria-labelledby="mb-t">
<header class="fx-members__head">
<div><h2 class="fx-members__title" id="mb-t">Jamoa a'zolari</h2><p class="fx-members__text">Kim nimani köradi va özgartiradi — rol belgilaydi.</p></div>
<div class="fx-members__seats"><span>Band örinlar: <b data-members-seats>5 / 10</b></span><div class="fx-progress" data-size="sm" role="progressbar" aria-label="Band örinlar" aria-valuemin="0" aria-valuenow="5" aria-valuemax="10" style="--fx-progress-value: 50%"></div></div>
</header>
<form class="fx-members__invite" data-members-invite novalidate>
<label class="fx-field"><span class="fx-label">Email orqali taklif</span><input class="fx-input" type="email" required placeholder="[email protected]" autocomplete="off"></label>
<label class="fx-field"><span class="fx-label">Rol</span><span class="fx-select-wrap"><select class="fx-select"><option>Administrator</option><option>Menejer</option><option selected>A'zo</option><option>Faqat köriş</option></select></span></label>
<button class="fx-btn" type="submit" data-variant="primary">Taklif yuboriş</button>
<p class="fx-members__msg" aria-live="polite"></p>
</form>
<div class="fx-table-scroll">
<table class="fx-table fx-members__table">
<thead><tr><th scope="col">A'zo</th><th scope="col">Rol</th><th scope="col">Holat</th><th scope="col" class="fx-members__when">Oxirgi faollik</th><th scope="col"><span class="fx-sr-only">Amallar</span></th></tr></thead>
<tbody>
<tr class="fx-members__row" data-state="active" data-email="[email protected]"><td><div class="fx-persona" data-size="sm"><span class="fx-avatar" data-size="sm" data-color="yellow" role="img" aria-label="Aziz Karimov">AK</span><span class="fx-persona__text"><span class="fx-persona__name">Aziz Karimov</span><span class="fx-persona__meta">[email protected]</span></span></div></td><td><span class="fx-members__owner">Egasi</span></td><td><span class="fx-status" data-tone="success">Faol</span></td><td class="fx-members__when">Hozir onlayn</td><td><div class="fx-members__actions"></div></td></tr>
<tr class="fx-members__row" data-state="active" data-email="[email protected]"><td><div class="fx-persona" data-size="sm"><span class="fx-avatar" data-size="sm" data-color="green" role="img" aria-label="Dilnoza Rahimova">DR</span><span class="fx-persona__text"><span class="fx-persona__name">Dilnoza Rahimova</span><span class="fx-persona__meta">[email protected]</span></span></div></td><td><span class="fx-select-wrap"><select class="fx-select fx-members__role" data-size="sm" aria-label="Rol: Dilnoza Rahimova"><option>Administrator</option><option selected>Menejer</option><option>A'zo</option><option>Faqat köriş</option></select></span></td><td><span class="fx-status" data-tone="success">Faol</span></td><td class="fx-members__when">Bugun, 09:41</td><td><div class="fx-members__actions"><button class="fx-btn" type="button" data-variant="danger-ghost" data-size="sm" data-members-remove>Olib taşlaş</button></div></td></tr>
<tr class="fx-members__row" data-state="active" data-email="[email protected]"><td><div class="fx-persona" data-size="sm"><span class="fx-avatar" data-size="sm" data-color="blue" role="img" aria-label="Bobur Toshmatov">BT</span><span class="fx-persona__text"><span class="fx-persona__name">Bobur Toshmatov</span><span class="fx-persona__meta">[email protected]</span></span></div></td><td><span class="fx-select-wrap"><select class="fx-select fx-members__role" data-size="sm" aria-label="Rol: Bobur Toshmatov"><option>Administrator</option><option>Menejer</option><option selected>A'zo</option><option>Faqat köriş</option></select></span></td><td><span class="fx-status" data-tone="success">Faol</span></td><td class="fx-members__when">Keça, 18:05</td><td><div class="fx-members__actions"><button class="fx-btn" type="button" data-variant="danger-ghost" data-size="sm" data-members-remove>Olib taşlaş</button></div></td></tr>
<tr class="fx-members__row" data-state="active" data-email="[email protected]"><td><div class="fx-persona" data-size="sm"><span class="fx-avatar" data-size="sm" data-color="purple" role="img" aria-label="Madina Yusupova">MY</span><span class="fx-persona__text"><span class="fx-persona__name">Madina Yusupova</span><span class="fx-persona__meta">[email protected]</span></span></div></td><td><span class="fx-select-wrap"><select class="fx-select fx-members__role" data-size="sm" aria-label="Rol: Madina Yusupova"><option>Administrator</option><option>Menejer</option><option>A'zo</option><option selected>Faqat köriş</option></select></span></td><td><span class="fx-status" data-tone="success">Faol</span></td><td class="fx-members__when">12-oktabr</td><td><div class="fx-members__actions"><button class="fx-btn" type="button" data-variant="danger-ghost" data-size="sm" data-members-remove>Olib taşlaş</button></div></td></tr>
<tr class="fx-members__row" data-state="pending" data-email="[email protected]"><td><div class="fx-persona" data-size="sm"><span class="fx-avatar" data-size="sm" role="img" aria-label="[email protected]">SR</span><span class="fx-persona__text"><span class="fx-persona__name">[email protected]</span><span class="fx-persona__meta">Taklif 2 kun oldin yuborilgan</span></span></div></td><td><span class="fx-select-wrap"><select class="fx-select fx-members__role" data-size="sm" aria-label="Rol: [email protected]"><option>Administrator</option><option>Menejer</option><option selected>A'zo</option><option>Faqat köriş</option></select></span></td><td><span class="fx-status" data-tone="pending">Kutilmoqda</span></td><td class="fx-members__when">—</td><td><div class="fx-members__actions"><button class="fx-btn" type="button" data-variant="ghost" data-size="sm" data-members-resend>Qayta yuboriş</button><button class="fx-btn" type="button" data-variant="danger-ghost" data-size="sm" data-members-remove>Bekor qiliş</button></div></td></tr>
</tbody>
</table>
</div>
</section>Tokenlar: --fx-bg-subtle --fx-border-color-default --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-ease-enter --fx-ease-exit --fx-fg-success --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-base --fx-radius-surface --fx-space-1 --fx-space-12 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-error --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.