Qatlamlar · pattern
Ulaşiş
Ulaşiş mazmuni (odatda .fx-dialog içida): havola + «Nusxalaş» (holat aria-live bilan), ruxsat berilgan odamlar va rol tanlovi («Olib taşlaş» qatorni öçiradi), umumiy kiriş darajasi (izohi tanlovga qarab özgaradi).
Anatomiya
- root
.fx-shareşart - link
.fx-share__linkşart - url
.fx-share__urlşart - copy
.fx-share__copyşart - status
.fx-share__statusixtiyoriy - people
.fx-share__peopleixtiyoriy - person
.fx-share__personixtiyoriy - who
.fx-share__whoixtiyoriy - role
.fx-share__roleixtiyoriy - owner
.fx-share__ownerixtiyoriy - access
.fx-share__accessixtiyoriy - hint
.fx-share__hintixtiyoriy
Holatlar
focus
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Havola, rollar, kiriş darajasi orasida |
| Enter/Space | Nusxalaydi |
| Esc | Dialogni yopadi (dialog içida) |
Havola maydoni readonly + aria-label; nusxalaş natijasi role=status (aria-live); har selectda odam nomi bilan aria-label; dialog sarlavhasi aria-labelledby.
Naqş: WAI-ARIA APG dialog-modal · rol group
Kod
AI uçun: qaçon işlatiladi
Işlating
- Hujjat, loyiha yoki fayl uçun havola oliş va kimlar oçişi mumkinligini boşqariş kerak bölganda.
npx foxui add share
<button class="fx-btn" type="button" command="show-modal" commandfor="sh1">Ulaşiş</button>
<dialog class="fx-dialog" id="sh1" aria-labelledby="sh1t">
<h2 class="fx-dialog__title" id="sh1t">Hujjatni ulaşiş</h2>
<div class="fx-share" data-fx-share>
<div class="fx-share__link">
<input class="fx-input fx-share__url" readonly value="https://app.example.uz/d/narxlar-2026" aria-label="Havola">
<button class="fx-btn fx-share__copy" type="button" data-variant="primary">Nusxalaş</button>
</div>
<p class="fx-share__status"></p>
<ul class="fx-share__people">
<li class="fx-share__person" data-who="Rahim Sadiy"><span class="fx-avatar" data-size="sm" data-color="yellow" role="img" aria-label="Rahim Sadiy">RS</span><span class="fx-share__who"><b>Rahim Sadiy</b><small>[email protected]</small></span><span class="fx-share__owner">Egasi</span></li>
<li class="fx-share__person" data-who="Dilnoza Karimova"><span class="fx-avatar" data-size="sm" data-color="coral" role="img" aria-label="Dilnoza Karimova">DK</span><span class="fx-share__who"><b>Dilnoza Karimova</b><small>[email protected]</small></span><select class="fx-select fx-share__role" aria-label="Dilnoza Karimova roli"><option value="edit" selected>Tahrirlovçi</option><option value="comment">Izoh qoldiruvçi</option><option value="view">Köruvçi</option><option value="remove">Olib taşlaş</option></select></li>
<li class="fx-share__person" data-who="Jasur Aliyev"><span class="fx-avatar" data-size="sm" data-color="purple" role="img" aria-label="Jasur Aliyev">JA</span><span class="fx-share__who"><b>Jasur Aliyev</b><small>[email protected]</small></span><select class="fx-select fx-share__role" aria-label="Jasur Aliyev roli"><option value="edit">Tahrirlovçi</option><option value="comment">Izoh qoldiruvçi</option><option value="view" selected>Köruvçi</option><option value="remove">Olib taşlaş</option></select></li>
</ul>
<div class="fx-share__access">
<label for="sh1a">Umumiy kiriş</label>
<select class="fx-select" id="sh1a"><option value="private" data-hint="Faqat yuqoridagi odamlar oçişi mumkin." selected>Faqat taklif qilinganlar</option><option value="link-view" data-hint="Havolasi borlarning hammasi köra oladi.">Havolasi borlar körişi mumkin</option><option value="link-comment" data-hint="Havolasi borlar köradi va izoh qoldiradi.">Havolasi borlar izoh qoldirişi mumkin</option></select>
<p class="fx-share__hint">Faqat yuqoridagi odamlar oçişi mumkin.</p>
</div>
</div>
<form method="dialog" class="fx-dialog__actions"><button class="fx-btn">Tayyor</button></form>
</dialog>Tokenlar: --fx-border-color-default --fx-border-width-default --fx-fg-success --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-secondary --fx-text-tertiary
Şu toifadan
AI yordamçi (widget)Saytlar uçun AI yordamçi: öng pastda dumaloq tugma (çat ikonkasi yoki ixtiyoriy personaj) → suhbat oynasi.Kontekst menyuMaydon yoki qator ustida öng tugma, sensorda uzoq bosiş yoki klaviaturada Shift+F10 / ☰ bilan menyu kursor örnida oçiladi.Kontekst menyuÖng tugma, uzoq bosiş (telefon) yoki Shift+F10 / Menu tugmasi bilan kursor joyida oçiladigan menyu (4.147).DialogTasdiq va qisqa formalar uçun modal oyna.Suzuvçi oynaSahifa ustida qoladigan, modal bölmagan panel (4.152): video qönğiroq, AI yordamçi, kalkulyator, tezkor eslatma — foydalanuvçi orqadagi sahifa bilan işlaşda davom etadi.Hover kartaIsm, havola yoki avatar ustida keçikiş bilan çiqadigan kartoçka (4.149): mijoz profili, bitim qisqaçasi, havola oldindan körinişi.