Körsatiş · primitive
Linza
Rasm ustida kursor atrofidagi doira kattalaştirib körsatiladi (Magic UI va Aceternity Lens) — mahsulot tafsiloti, xarita, çizma yoki skrinşotdagi mayda yozuv uçun. data-zoom — kattalaştiriş (1,5–5, standart 2), data-size — oyna ölçami, data-shape="square" — törtburçak oyna. Barmoqda bosib uşlab surilsa işlaydi; klaviaturada konteyner fokuslanadi — oyna markazda çiqadi, strelkalar suradi, + / − kattalaştiradi, Esc yopadi. .fx-lens__hint — ixtiyoriy yöl-yöriq yorliği.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-shape | circlesquare | circle |
Anatomiya
- root
.fx-lensşart - glass
.fx-lens__glassixtiyoriy - hint
.fx-lens__hintixtiyoriy
Holatlar
active
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Rasmga fokus — oyna markazda çiqadi |
| ← → ↑ ↓ | Oynani suradi (Shift — tezroq) |
| + / − | Kattalaştiriş 1,5–5 |
| Esc | Oynani yopadi |
Konteyner fokuslanadi (tabindex) va aria-label'da boşqaruv aytiladi; oyna aria-hidden — ma'no rasmning alt matnida. Klaviatura foydalanuvçisi siçqonça bilan bir xil imkoniyatga ega (suriş, kattalaştiriş, yopiş). Harakat kamaytirilsa oyna darhol paydo böladi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Mahsulot sahifasida mato, tikuv, detal yaqindan.
- Xarita, sxema, çizma yoki skrinşotdagi mayda yozuv.
npx foxui add lens
<figure class="fx-lens" data-fx-lens data-zoom="2.5" style="margin:0;max-inline-size:40rem"> <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%20font-family%3D%22sans-serif%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22whitesmoke%22/%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%226%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%226%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%226%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%226%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%226%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%226%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%2270%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%2270%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%2270%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%2270%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%2270%22%20y%3D%22206%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%2270%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%2270%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%2270%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22134%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22134%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22134%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%22134%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22134%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22134%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%22134%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22198%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22198%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22198%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22198%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22198%22%20y%3D%22206%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22198%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22198%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22262%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22262%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22262%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22262%22%20y%3D%22206%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%22262%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%22262%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22262%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22326%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22326%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%22326%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22326%22%20y%3D%22206%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22326%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22390%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22390%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22390%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22390%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22390%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22390%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22454%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22454%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22454%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22454%22%20y%3D%22206%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22454%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22honeydew%22/%3E%3Crect%20x%3D%22454%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22518%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22518%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22518%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22518%22%20y%3D%22206%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22518%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%22518%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22518%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22gainsboro%22/%3E%3Crect%20x%3D%22582%22%20y%3D%226%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22linen%22/%3E%3Crect%20x%3D%22582%22%20y%3D%2256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22582%22%20y%3D%22106%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22582%22%20y%3D%22156%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lightgray%22/%3E%3Crect%20x%3D%22582%22%20y%3D%22206%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22582%22%20y%3D%22256%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22582%22%20y%3D%22306%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Crect%20x%3D%22582%22%20y%3D%22356%22%20width%3D%2252%22%20height%3D%2238%22%20rx%3D%224%22%20fill%3D%22lavender%22/%3E%3Cpath%20d%3D%22M-10%20300%20C%20120%20250%20200%20340%20330%20290%20S%20520%20230%20650%20270%22%20stroke%3D%22lightskyblue%22%20stroke-width%3D%2222%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M40%2020%20L%20600%20380%22%20stroke%3D%22tomato%22%20stroke-width%3D%225%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M600%2030%20L%2060%20360%22%20stroke%3D%22royalblue%22%20stroke-width%3D%225%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M20%20200%20H%20620%22%20stroke%3D%22seagreen%22%20stroke-width%3D%225%22%20fill%3D%22none%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%2295%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22/%3E%3Ctext%20x%3D%22140%22%20y%3D%2286%22%20font-size%3D%229%22%20fill%3D%22black%22%3EChorsu%3C/text%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22/%3E%3Ctext%20x%3D%22330%22%20y%3D%22191%22%20font-size%3D%229%22%20fill%3D%22black%22%3EAmir%20Temur%20xiyoboni%3C/text%3E%3Ccircle%20cx%3D%22500%22%20cy%3D%22310%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22/%3E%3Ctext%20x%3D%22510%22%20y%3D%22301%22%20font-size%3D%229%22%20fill%3D%22black%22%3EToshkent%3C/text%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22/%3E%3Ctext%20x%3D%22210%22%20y%3D%22191%22%20font-size%3D%229%22%20fill%3D%22black%22%3EPaxtakor%3C/text%3E%3Ccircle%20cx%3D%22470%22%20cy%3D%22200%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22/%3E%3Ctext%20x%3D%22480%22%20y%3D%22191%22%20font-size%3D%229%22%20fill%3D%22black%22%3EOybek%3C/text%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%22300%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22/%3E%3Ctext%20x%3D%22150%22%20y%3D%22291%22%20font-size%3D%229%22%20fill%3D%22black%22%3EBunyodkor%3C/text%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%2295%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22/%3E%3Ctext%20x%3D%22490%22%20y%3D%2286%22%20font-size%3D%229%22%20fill%3D%22black%22%3EYunus%20Rajabiy%3C/text%3E%3Ctext%20x%3D%2218%22%20y%3D%22390%22%20font-size%3D%228%22%20fill%3D%22dimgray%22%3EMetro%20xaritasi%20%C2%B7%20masshtab%201%3A25%20000%3C/text%3E%3C/svg%3E" alt="Toşkent metro xaritasi: Çorsu, Paxtakor, Amir Temur xiyoboni, Oybek va boşqa bekatlar" width="640" height="400"> <span class="fx-lens__hint" aria-hidden="true">Kursorni olib boring yoki Tab + strelkalar</span> </figure>
Tokenlar: --fx-bg-overlay --fx-bg-static-light --fx-bg-surface --fx-border-color-focus --fx-border-width-focus --fx-ease-spring --fx-ease-standard --fx-font-size-xs --fx-lens-x --fx-lens-y --fx-lens-zoom --fx-motion-base --fx-motion-fast --fx-motion-scale-enter --fx-radius-badge --fx-radius-circle --fx-radius-surface --fx-shadow-lg --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.