Qatlamlar · compound
Dialog
Tasdiq va qisqa formalar uçun modal oyna. Native <dialog> + showModal(). Tasdiqlaş varianti (alertdialog, closedby=none), «yozib tasdiqlang» (matn mos kelsagina tugma yoqiladi), ölçamlar sm/lg/töliq ekran, uzun mazmunda yopişqoq sarlavha/amallar. Ustma-ust (4.154): data-stack'li dialog ustida ikkinçisi oçilsa, pastdagisi kiçrayib orqaga ketadi, parda ikki qavat qoraymaydi. Sudraladigan (data-draggable): sarlavha qatoridan siçqonça/barmoq bilan yoki .fx-dialog__grip tutqiçi + strelkalar; yopilganda markazga qaytadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | alert role=alertdialog, closedby=none | default |
data-size | smlgfull mobil: butun ekran | md |
data-scroll | on data-scroll — tana aylanadi, sarlavha/amallar qoladi | — |
data-stack | offon ustiga dialog oçilsa orqaga ketadi | off |
data-draggable | offon sarlavhadan suriladi | off |
Anatomiya
- root
.fx-dialogşart - title
.fx-dialog__titleşart - body
.fx-dialog__bodyixtiyoriy - actions
.fx-dialog__actionsixtiyoriy - confirm
.fx-dialog__confirmixtiyoriy - confirm-label
.fx-dialog__confirm-labelixtiyoriy - head (sarlavha qatori)
.fx-dialog__headixtiyoriy - grip (sudraş tutqiçi)
.fx-dialog__gripixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Esc | Yopadi |
| Tab | Fokus oyna içida aylanadi |
| Strelkalar (tutqichda) | Sudraladigan oynani suradi; Shift bilan — 4 barobar |
| Home (tutqichda) | Oynani markazga qaytaradi |
Sarlavha aria-labelledby bilan; yopilganda fokus oçgan tugmaga qaytadi (brauzer özi). Ustma-ust: pastdagi dialog inert (brauzerning top-layer'i), yuqorisi yopilganda fokus uni oçgan tugmaga qaytadi. Sudraş klaviaturada .fx-dialog__grip orqali.
Naqş: WAI-ARIA APG dialog-modal · rol dialog
Kod
AI uçun: qaçon işlatiladi
- Tasdiq va qisqa forma — foydalanuvçi javobisiz davom etib bölmaydi.
- Qisqa ma'lumot tugma yonida →
popover - Amal natijasi haqida xabar →
toast - Tugma yonida tezkor tasdiq (modalsiz) →
popover - Dialog içida yana dialog oçmang — zarur bölsa faqat data-stack bilan va 2 qavatdan oşirmang.
- Tasdiqlaş dialogida fokus «Öçiriş»da boşlanmasin — xavfsiz tugmada (autofocus).
- «Yozib tasdiqlang»ni har kiçik amalga qöymang — faqat qaytmas, katta yöqotişda.
npx foxui add dialog
<dialog class="fx-dialog" id="d1">
<h2 class="fx-dialog__title">Öçirilsinmi?</h2>
<p class="fx-dialog__body">Bu amalni qaytarib bölmaydi.</p>
<form method="dialog" class="fx-dialog__actions">
<button class="fx-btn">Bekor qiliş</button>
<button class="fx-btn" data-variant="danger">Öçiriş</button>
</form>
</dialog>
<button class="fx-btn" commandfor="d1" command="show-modal">Oçiş</button>
<dialog class="fx-dialog" id="d2" data-variant="alert" role="alertdialog" closedby="none" aria-labelledby="d2t" data-fx-dialog>
<h2 class="fx-dialog__title" id="d2t">Loyiha butunlay öçiriladi</h2>
<div class="fx-dialog__body">
Hamma ariza va hujjatlar yöqoladi, qaytarib bölmaydi.
<div class="fx-dialog__confirm">
<label class="fx-dialog__confirm-label" for="d2i">Tasdiqlaş uçun <code>crm-demo</code> deb yozing</label>
<input class="fx-input" id="d2i" autocomplete="off" data-fx-dialog-match="crm-demo">
</div>
</div>
<form method="dialog" class="fx-dialog__actions">
<button class="fx-btn" autofocus>Bekor qiliş</button>
<button class="fx-btn" data-variant="danger" data-fx-dialog-confirm disabled>Öçiriş</button>
</form>
</dialog>
<button class="fx-btn" data-variant="danger" commandfor="d2" command="show-modal">Loyihani öçiriş</button>
<!-- Ustma-ust (4.154): mijoz kartasi ustida «Yangi kontakt» -->
<dialog class="fx-dialog" id="d3" data-fx-dialog data-stack aria-labelledby="d3t">
<h2 class="fx-dialog__title" id="d3t">Mijoz: «Ğallaorol Agro»</h2>
<div class="fx-dialog__body">Mas'ul şaxs körsatilmagan. Kontakt qöşing yoki röyxatdan tanlang.</div>
<form method="dialog" class="fx-dialog__actions">
<button class="fx-btn" value="cancel">Yopiş</button>
<button class="fx-btn" data-variant="primary" type="button" commandfor="d4" command="show-modal">Yangi kontakt</button>
</form>
</dialog>
<dialog class="fx-dialog" id="d4" data-fx-dialog data-size="sm" aria-labelledby="d4t">
<h2 class="fx-dialog__title" id="d4t">Yangi kontakt</h2>
<div class="fx-dialog__body"><label class="fx-label" for="d4i">Ism</label><input class="fx-input" id="d4i" value="Jasur Qodirov"></div>
<form method="dialog" class="fx-dialog__actions"><button class="fx-btn">Bekor qiliş</button><button class="fx-btn" data-variant="primary">Saqlaş</button></form>
</dialog>
<button class="fx-btn" commandfor="d3" command="show-modal">Mijoz kartasi (ustma-ust)</button>
<!-- Sudraladigan (4.154) -->
<dialog class="fx-dialog" id="d5" data-fx-dialog data-draggable aria-labelledby="d5t">
<div class="fx-dialog__head"><button class="fx-dialog__grip" type="button" aria-label="Oynani suriş (strelkalar)"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7 5h.01M13 5h.01M7 10h.01M13 10h.01M7 15h.01M13 15h.01" stroke-width="2" stroke-linecap="round"/></svg></button><h2 class="fx-dialog__title" id="d5t">Kurs kalkulyatori</h2></div>
<div class="fx-dialog__body">1 USD = 12 650 söm. Oynani sarlavhasidan surib, ostidagi jadvalni köring.</div>
<form method="dialog" class="fx-dialog__actions"><button class="fx-btn">Yopiş</button></form>
</dialog>
<button class="fx-btn" commandfor="d5" command="show-modal">Sudraladigan oyna</button>Tokenlar: --fx-bg-muted --fx-bg-overlay --fx-bg-pressed --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-sm --fx-dialog-width --fx-ease-emphasized --fx-ease-enter --fx-ease-exit --fx-fg-error --fx-font-size-lg --fx-font-size-sm --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-base --fx-motion-scale-enter --fx-motion-shift-md --fx-radius-nav --fx-radius-overlay --fx-shadow-lg --fx-size-icon-sm --fx-size-status-dot --fx-space-10 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary