Körsatiş · molecule
Rasm
Nisbati belgilangan rasm: yuklangunça xira joy (blur yoki kulrang), yuklanmasa zaxira holat («Rasm yuklanmadi»), ixtiyoriy imzo. Nisbat (CLS yöq) — data-ratio. Xulq ildizga data-state="loading|loaded|error" qöyadi. Xira joy rasmi — ildizda --fx-image-blur: url(...).
%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)
Rasm yuklanmadi
Rasm yuklanmadi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-ratio | auto1/14/33/216/93/49/16 vertikal video muqovasi (reels) | auto |
data-placeholder | noneblur yuklangunça xira | none |
data-fit | covercontain | cover |
data-size | auto konteyner kengligidaxs 48 px — röyxatdagi logosm 72 px — qator muqovasi, formadagi kiçik körinişmd 144 px — tahrir formasidagi muqova | auto |
Anatomiya
- root
.fx-imageşart - frame
.fx-image__frameşart - fallback
.fx-image__fallbackixtiyoriy - caption
.fx-image__captionixtiyoriy
Holatlar
loadingloadederror
Klaviatura va kiriş
Mazmunli rasmda alt şart; zaxira holat yozuv bilan (rangga tayanmaydi); imzo figcaption.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Rasm sahifada joy egallaşi, yuklanişi sekin bölişi yoki yuklanmay qolişi mumkin bölganda.
npx foxui add image
<figure class="fx-image" data-ratio="16/9" data-placeholder="blur" data-fx-image style="max-inline-size: 28rem">
<div class="fx-image__frame">
<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 bozoridagi yangi mevalar rastasi" loading="lazy">
<div class="fx-image__fallback" role="img" aria-label="Rasm yuklanmadi">Rasm yuklanmadi</div>
</div>
<figcaption class="fx-image__caption">Çorsu bozori, ertalabki savdo</figcaption>
</figure>
<figure class="fx-image" data-ratio="4/3" data-fx-image style="max-inline-size: 16rem">
<div class="fx-image__frame">
<img src="/yoq-rasm.jpg" alt="Ombor içki körinişi">
<div class="fx-image__fallback">Rasm yuklanmadi</div>
</div>
</figure>
<div style="display: flex; align-items: center; gap: var(--fx-space-3)">
<figure class="fx-image" data-size="sm" data-ratio="4/3"><div class="fx-image__frame"><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="Muqova"></div></figure>
<span>Çorsu bozori — kiçik muqova (data-size="sm", 4/3)</span>
</div>Tokenlar: --fx-bg-muted --fx-ease-standard --fx-font-size-sm --fx-motion-base --fx-motion-slow --fx-radius-control --fx-radius-surface --fx-size-icon-lg --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-4 --fx-text-secondary
Ş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.