Qatlamlar · compound
Suzuvçi oyna
Sahifa 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. Sarlavha qatoridan sudraladi (siçqonça, barmoq yoki tutqiç + strelkalar), pastki burçakdan ölçami özgaradi (Alt+strelka ham), yiğiladi (sarlavhaga ikki marta bosiş yoki tugma), yopiladi (Esc). Oyna ekrandan çiqib ketmaydi. Joylaşuv: end (standart, öng past) · start · top-end · inline (oqimda).
Mijoz: «Ğallaorol Agro» · Bitim: 12 500 000 söm
Eslatma: narx böyiça çegirma söraydi, keyingi hafta şartnoma.
Tutqiç fokusda: strelkalar — suriş, Alt+strelka — ölçam, Home — joyiga.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-placement | end öng paststart çap pasttop-end tepa panel ostidainline oqimda (hujjat, namuna) | end |
data-resize | bothnone | both |
Anatomiya
- root
.fx-floatwinşart - bar (sudraş joyi)
.fx-floatwin__barşart - grip (klaviatura tutqiçi)
.fx-floatwin__gripixtiyoriy - title
.fx-floatwin__titleşart - button
.fx-floatwin__btnixtiyoriy - body
.fx-floatwin__bodyşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Strelkalar (tutqichda) | Oynani suradi; Shift bilan — 4 barobar |
| Alt + strelkalar (tutqichda) | Ölçamni özgartiradi |
| Home (tutqichda) | Boşlanğiç joyiga qaytaradi |
| Esc | Yopadi, fokus oçgan tugmaga |
role=dialog, aria-modal=false, nomi sarlavhadan (aria-labelledby). Fokus tuzoği yöq — Tab sahifaga çiqadi. Sudraş klaviaturada: tutqiç tugmasi (aria-describedby'da yöriqnoma). Yiğiş tugmasida aria-expanded. Yopilganda fokus oçgan tugmaga qaytadi.
Kod
AI uçun: qaçon işlatiladi
- Iş davomida yonida turişi kerak bölgan vosita: qönğiroq, çat, AI yordamçi, kalkulyator.
- Foydalanuvçi panelni özi joylaştirmoqçi (sahifaning kerakli qismini yopmasin).
- Javob talab qiladigan tasdiq →
dialog - Yon tomondan çiqadigan tafsilot paneli →
sheet - Bir amal tugmasi yonidagi qisqa ma'lumot →
popover - Foydalanuvçi javobisiz davom eta olmaydigan narsani suzuvçi oynaga qöymang — dialog.
- Bir paytda ikkitadan köp suzuvçi oyna oçmang — bir-birini yopadi.
- Tutqiçsiz qoldirmang — klaviatura bilan surib bölmaydi.
npx foxui add floatwin
<section class="fx-floatwin" id="qongiroq" data-fx-floatwin data-placement="inline" aria-labelledby="qongiroq-t">
<div class="fx-floatwin__bar">
<button class="fx-floatwin__grip" type="button" aria-label="Oynani suriş" aria-describedby="qongiroq-yordam"><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="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<h2 class="fx-floatwin__title" id="qongiroq-t">Qönğiroq — Sardor Toʻxtayev · 04:12</h2>
<button class="fx-floatwin__btn" type="button" data-floatwin="collapse" aria-label="Yiğiş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 12l5-5 5 5" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<button class="fx-floatwin__btn" type="button" data-floatwin="close" aria-label="Yopiş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
</div>
<div class="fx-floatwin__body">
<p class="fx-text" data-tone="secondary" style="margin: 0">Mijoz: «Ğallaorol Agro» · Bitim: 12 500 000 söm</p>
<p class="fx-text" style="margin-block: var(--fx-space-3) 0">Eslatma: narx böyiça çegirma söraydi, keyingi hafta şartnoma.</p>
<p class="fx-text" data-tone="tertiary" id="qongiroq-yordam" style="margin-block: var(--fx-space-3) 0">Tutqiç fokusda: strelkalar — suriş, Alt+strelka — ölçam, Home — joyiga.</p>
</div>
</section>
<button class="fx-btn" type="button" data-floatwin-open="qongiroq" style="margin-block-start: var(--fx-space-3)">Qönğiroq oynasini oçiş</button>Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-bg-surface-container-low --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-emphasized --fx-ease-enter --fx-ease-standard --fx-elevation-4 --fx-elevation-5 --fx-font-size-sm --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-scale-enter --fx-popover-width --fx-radius-nav --fx-radius-overlay --fx-size-icon-sm --fx-size-topbar --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-z-overlay