Qatlamlar · compound
Lightbox
Rasm körgiç: töliq ekran native <dialog> — katta rasm, yaqinlaştiriş (bosiş yoki ⊕; siçqonça siljitilsa rasm suriladi), oldingi/keyingi, sanagiç, imzo. Esc yopadi, ← → almaştiradi, gorizontal suriş ham almaştiradi. Içki tuzilmani xulq özi quradi; oçuvçilar data-fx-lightbox-target="<dialog id>".
%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EBozor%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOmbor%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOfis%3C%2Ftext%3E%3C%2Fsvg%3E)
Anatomiya
- root
.fx-lightboxşart - bar
.fx-lightbox__barixtiyoriy - count
.fx-lightbox__countixtiyoriy - stage
.fx-lightbox__stageixtiyoriy - image
.fx-lightbox__imgşart - nav
.fx-lightbox__navixtiyoriy - zoom
.fx-lightbox__zoomixtiyoriy - close
.fx-lightbox__closeixtiyoriy - caption
.fx-lightbox__captionixtiyoriy
Holatlar
zoomsingle
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Oldingi/keyingi rasm |
| + / − / Z | Yaqinlaştiriş/kiçraytiriş |
| Esc | Yopadi |
| Tab | Dialog içida aylanadi |
Native modal <dialog>: fokus tuzoği va Esc brauzerda; yopilganda fokus oçuvçiga qaytadi; sanagiç aria-live; tugmalarda aria-label, zoom aria-pressed.
Naqş: WAI-ARIA APG dialog-modal · rol dialog
Kod
AI uçun: qaçon işlatiladi
npx foxui add lightbox
<div class="fx-gallery" data-cols="3" style="max-inline-size: 24rem"> <a class="fx-gallery__item" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e8875a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c2410c%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EBozor%3C%2Ftext%3E%3C%2Fsvg%3E" data-fx-lightbox-target="lb2" data-caption="Çorsu bozori"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e8875a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c2410c%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EBozor%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Çorsu bozori"></a> <a class="fx-gallery__item" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235a8be8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231d4ed8%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOmbor%3C%2Ftext%3E%3C%2Fsvg%3E" data-fx-lightbox-target="lb2" data-caption="Markaziy ombor"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235a8be8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231d4ed8%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOmbor%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Markaziy ombor"></a> <a class="fx-gallery__item" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234fb286%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23047857%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOfis%3C%2Ftext%3E%3C%2Fsvg%3E" data-fx-lightbox-target="lb2" data-caption="Yangi ofis"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234fb286%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23047857%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOfis%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Yangi ofis"></a> </div> <dialog class="fx-lightbox" id="lb2" data-fx-lightbox aria-label="Rasm körgiç"></dialog>
Tokenlar: --fx-bg-brand-solid --fx-bg-overlay --fx-border-width-focus --fx-control-h-md --fx-ease-emphasized --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-motion-base --fx-motion-exit-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-circle --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-on-brand
Ş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.