Qatlamlar · compound
Yon varaq
Ekran çetidan çiqadigan panel: qator tafsiloti, filtrlar, telefonda menyu. Native <dialog> (showModal) — fokus tuzoği va Esc brauzerda. Öngdan (standart) yoki pastdan. Kengaytma: data-side=start, data-size=sm|lg|xl|full, RTL yönalişga moslaşadi, data-mode=push (modalsiz, .show(), kontent siqiladi), .fx-sheet__grip. Töxtaş nuqtalari (4.153): pastki varaq data-detents="half full" — yarim va töliq balandlikda töxtaydi; tutqiç (button) sudraladi, ↑ ↓ bilan almaşadi, pastga taşlansa yopiladi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-side | endbottomstart | end |
data-size | smlgxlfull | — |
data-mode | push | — |
data-detents | half full faqat data-side="bottom" bilan; data-fx-sheet | — |
data-detent | halffull | half |
Anatomiya
- root
.fx-sheetşart - head
.fx-sheet__headixtiyoriy - title
.fx-sheet__titleşart - body
.fx-sheet__bodyixtiyoriy - foot
.fx-sheet__footixtiyoriy - grip
.fx-sheet__gripixtiyoriy - grip-button
button.fx-sheet__gripixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Esc | Yopadi |
| Tab | Fokus varaq içida aylanadi |
| ↑ ↓ (tutqichda) | Töxtaş nuqtasini özgartiradi; eng kiçigidan ↓ — yopadi |
aria-labelledby → sarlavha; yopiş tugmasida aria-label. Yopilganda fokus oçgan tugmaga qaytadi (brauzer).
Naqş: WAI-ARIA APG dialog-modal · rol dialog
Kod
AI uçun: qaçon işlatiladi
- Röyxatdan çiqmasdan tafsilot köriş yoki tahrirlaş; telefonda filtr va menyu.
- Qisqa tasdiq →
dialog - Varaq içida yana varaq oçmang.
npx foxui add sheet
<button class="fx-btn" commandfor="s1" command="show-modal">Tafsilot</button> <dialog class="fx-sheet" id="s1" aria-labelledby="s1t"> <div class="fx-sheet__head"><h2 class="fx-sheet__title" id="s1t">Ariza №128</h2><form method="dialog"><button class="fx-btn" data-variant="ghost" data-shape="icon" aria-label="Yopiş">×</button></form></div> <div class="fx-sheet__body"><p>Ism, telefon, xabar va holat şu yerda.</p></div> <form method="dialog" class="fx-sheet__foot"><button class="fx-btn">Yopiş</button><button class="fx-btn" data-variant="primary">Saqlaş</button></form> </dialog> <dialog class="fx-sheet" data-side="start" data-size="sm" aria-labelledby="sh-b2"><div class="fx-sheet__head"><h2 class="fx-sheet__title" id="sh-b2">Filtrlar</h2></div><div class="fx-sheet__body">Çap tomondan çiqadi.</div></dialog> <!-- Toʻxtash nuqtalari (4.153) --> <button class="fx-btn" commandfor="sh-det" command="show-modal">Buyurtma tafsiloti</button> <dialog class="fx-sheet" id="sh-det" data-side="bottom" data-detents="half full" data-fx-sheet aria-labelledby="sh-det-t"> <button class="fx-sheet__grip" type="button" aria-label="Varaq balandligi"></button> <div class="fx-sheet__head"><h2 class="fx-sheet__title" id="sh-det-t">Buyurtma №214</h2><form method="dialog"><button class="fx-btn" data-variant="ghost" data-shape="icon" aria-label="Yopiş">×</button></form></div> <div class="fx-sheet__body"><p>Mijoz: Aziz Karimov · 3 ta mahsulot · 1 200 000 söm. Yuqoriga torting — töliq tafsilot, pastga — yopiş.</p></div> </dialog>
Tokenlar: --fx-bg-overlay --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-ease-enter --fx-ease-exit --fx-ease-sheet --fx-font-size-lg --fx-font-weight-semibold --fx-motion-exit-slow --fx-motion-slower --fx-radius-circle --fx-radius-overlay --fx-shadow-lg --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-tertiary