Qatlamlar · compound
Popover
Tugma yonida oçiladigan qatlam: qisqa ma'lumot, kiçik forma, amallar röyxati. Native popover atributi + anchor positioning (qöllanmasa — ekran markazida). Eni köpi bilan 320; ixtiyoriy strelka (data-arrow), ölçam sm/lg, amallar qatori (popconfirm). Kod bilan oçilsa langarni bering: el.showPopover({ source: tugma }). Kengaytma: .fx-popover__head / .fx-popover__foot (çiziqli sarlavha va pastki qism). Moslaşuvçi (4.26): data-fx-adaptive — telefonda (< 640 px) pastki varaqqa aylanadi.
Mister Fox
Hozir: FoxUI 0.3.0 relizi ustida işlayapti.
Strelkali qatlam
Strelka tugmaga qaraydi — qaysi tugmaniki ekani aniq.
Mijoz öçirilsinmi?
Bildirişnomalar
Yangi xabar yöq.
Holat böyiça
Telefonda bu oyna pastdan çiqadi, kompyuterda — tugma ostida.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-arrow | on data-arrow — strelka tugmaga qaratadi (qatlam pastda) | — |
data-size | smlg | md |
data-fx-adaptive | true telefonda pastki varaq | — |
Anatomiya
- text
.fx-popover__textixtiyoriy - actions
.fx-popover__actionsixtiyoriy - root
.fx-popoverşart - title
.fx-popover__titleixtiyoriy - head
.fx-popover__headixtiyoriy - foot
.fx-popover__footixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Esc | Yopadi, fokus tugmaga qaytadi |
popovertarget tugmasi aria-expanded'ni brauzer özi beradi; Esc yopadi, fokus tugmaga qaytadi. Mazmuni muhim bölsa — dialog işlating (popover fokusni tutmaydi).
Kod
AI uçun: qaçon işlatiladi
- Tugma yonida qisqa ma'lumot yoki kiçik amal.
- Muhim tasdiq →
dialog - Popconfirm: tugma yonida qisqa tasdiq (.fx-popover__actions içida «Bekor» + «Ha»); xavfli, qaytmas amal uçun dialog.
- Popover içiga uzun forma yoki jadval qöymang — buning uçun dialog yoki varaq.
- Faqat hover bilan oçilmasin — tugma bosilganda (va klaviaturada) oçilişi şart.
npx foxui add popover
<button class="fx-btn" popovertarget="p1">Tafsilot</button>
<div class="fx-popover" id="p1" popover>
<h3 class="fx-popover__title">Mister Fox</h3>
<p>Hozir: FoxUI 0.3.0 relizi ustida işlayapti.</p>
</div>
<button class="fx-btn" popovertarget="p2">Izoh bilan</button>
<div class="fx-popover" id="p2" popover data-arrow>
<h3 class="fx-popover__title">Strelkali qatlam</h3>
<p class="fx-popover__text">Strelka tugmaga qaraydi — qaysi tugmaniki ekani aniq.</p>
</div>
<button class="fx-btn" data-variant="danger" popovertarget="p3">Öçiriş</button>
<div class="fx-popover" id="p3" popover data-size="sm">
<p class="fx-popover__text">Mijoz öçirilsinmi?</p>
<div class="fx-popover__actions">
<button class="fx-btn" data-size="sm" popovertarget="p3" popovertargetaction="hide">Yöq</button>
<button class="fx-btn" data-size="sm" data-variant="danger" popovertarget="p3" popovertargetaction="hide">Ha</button>
</div>
</div>
<div class="fx-popover" popover id="po-b2"><div class="fx-popover__head"><h3 class="fx-popover__title">Bildirişnomalar</h3></div><p class="fx-popover__text">Yangi xabar yöq.</p><div class="fx-popover__foot">Oxirgi tekşiruv: hozir</div></div>
<!-- Moslashuvchi (4.26): telefonda pastki varaq -->
<button class="fx-btn" popovertarget="pop-adapt">Filtr: holat</button>
<div class="fx-popover" id="pop-adapt" popover data-fx-adaptive>
<p class="fx-popover__title">Holat böyiça</p>
<p class="fx-popover__text">Telefonda bu oyna pastdan çiqadi, kompyuterda — tugma ostida.</p>
<div class="fx-popover__actions"><button class="fx-btn" data-size="sm" popovertarget="pop-adapt" popovertargetaction="hide">Yopiş</button></div>
</div>Tokenlar: --fx-bg-overlay --fx-bg-surface --fx-border-color-default --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-ease-enter --fx-ease-exit --fx-ease-sheet --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-fast --fx-motion-scale-enter --fx-motion-shift-sm --fx-motion-slow --fx-popover-width --fx-radius-circle --fx-radius-overlay --fx-shadow-lg --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-secondary