Karkas · primitive
Masonry
Balandligi har xil kartalar (skrinşot, fikr, maqola) ustunlarga ziç joylanadi (4.73). Brauzer CSS masonry'ni qöllasa (display: grid-lanes yoki grid-template-rows: masonry) — kartalar qator tartibida; aks holda zaxira — CSS ustunlar (tartib ustun böylab yuqoridan pastga). Ustun soni kenglikka qarab özi özgaradi (eng tor ~15rem), data-cols — yuqori çegara. JS kerak emas.
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(240%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22380%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22204%22%20font-family%3D%22sans-serif%22%20font-size%3D%2242%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Edashboard%3C%2Ftext%3E%3C%2Fsvg%3E)
Ombor hisobi%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(60%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22250%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22139%22%20font-family%3D%22sans-serif%22%20font-size%3D%2228%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Ekassa%3C%2Ftext%3E%3C%2Fsvg%3E)
Kassir ekrani%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(190%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22460%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22244%22%20font-family%3D%22sans-serif%22%20font-size%3D%2251%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Enavbat%3C%2Ftext%3E%3C%2Fsvg%3E)
Klinika navbati%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(290%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22300%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22164%22%20font-family%3D%22sans-serif%22%20font-size%3D%2233%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Ejurnal%3C%2Ftext%3E%3C%2Fsvg%3E)
Maktab jurnali%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(150%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22420%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22224%22%20font-family%3D%22sans-serif%22%20font-size%3D%2247%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Exarita%3C%2Ftext%3E%3C%2Fsvg%3E)
Yetkazib beriş%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(10%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22280%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22154%22%20font-family%3D%22sans-serif%22%20font-size%3D%2231%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Efaktura%3C%2Ftext%3E%3C%2Fsvg%3E)
Hisob-faktura%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(220%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22350%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22189%22%20font-family%3D%22sans-serif%22%20font-size%3D%2239%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3ECRM%3C%2Ftext%3E%3C%2Fsvg%3E)
Mijoz kartasi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-cols | 235 | 4 |
data-gap | smlg | md |
Anatomiya
- root
.fx-masonryşart - item
.fx-masonry__itemixtiyoriy - body
.fx-masonry__bodyixtiyoriy - meta
.fx-masonry__metaixtiyoriy
Klaviatura va kiriş
Oddiy röyxat (ul/li) — ekran öquvçi DOM tartibida öqiydi. Zaxira (multi-column) rejimida vizual tartib ustun böylab: kartalarni muhimligiga köra DOM'da tartiblang. Rasmga mazmunli alt, width/height (joy sakramasin).
Kod
AI uçun: qaçon işlatiladi
Işlating
- Portfolio, skrinşotlar, mijozlar fikri, Pinterest kabi galereya — balandliklar har xil.
Işlatmang
- Bir xil kataklar yoki turli ölçamli xususiyatlar mozaikasi →
bento - Rasm galereyasi bir xil nisbatda →
gallery - Tartib muhim bölgan röyxat (yangiliklar lentasi, jadval) uçun işlatmang — zaxira rejimida köz ustun böylab yuradi.
- Bir xil balandlikdagi kartalar uçun kerak emas — oddiy tör (fx-grid) yetarli.
- Çeksiz yuklaşda yangi kartalar yuqoridagilarni siljitmasin — rasmga width/height bering.
npx foxui add masonry
<ul class="fx-masonry" data-cols="3" aria-label="Portfolio: tayyor loyihalar"> <li class="fx-masonry__item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20380%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%22hsl(210%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(240%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22380%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22204%22%20font-family%3D%22sans-serif%22%20font-size%3D%2242%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Edashboard%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Ombor hisobi — ekran körinişi" width="600" height="380" loading="lazy"><div class="fx-masonry__body"><strong>Ombor hisobi</strong><span class="fx-masonry__meta">Inventar · 3 kun oldin</span></div></li> <li class="fx-masonry__item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20250%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%22hsl(30%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(60%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22250%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22139%22%20font-family%3D%22sans-serif%22%20font-size%3D%2228%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Ekassa%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Kassir ekrani — ekran körinişi" width="600" height="250" loading="lazy"><div class="fx-masonry__body"><strong>Kassir ekrani</strong><span class="fx-masonry__meta">POS · 1 hafta oldin</span></div></li> <li class="fx-masonry__item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20460%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%22hsl(160%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(190%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22460%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22244%22%20font-family%3D%22sans-serif%22%20font-size%3D%2251%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Enavbat%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Klinika navbati — ekran körinişi" width="600" height="460" loading="lazy"><div class="fx-masonry__body"><strong>Klinika navbati</strong><span class="fx-masonry__meta">Helpdesk · bugun</span></div></li> <li class="fx-masonry__item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20300%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%22hsl(260%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(290%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22300%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22164%22%20font-family%3D%22sans-serif%22%20font-size%3D%2233%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Ejurnal%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Maktab jurnali — ekran körinişi" width="600" height="300" loading="lazy"><div class="fx-masonry__body"><strong>Maktab jurnali</strong><span class="fx-masonry__meta">LMS · keça</span></div></li> <li class="fx-masonry__item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20420%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%22hsl(120%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(150%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22420%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22224%22%20font-family%3D%22sans-serif%22%20font-size%3D%2247%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Exarita%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Yetkazib beriş — ekran körinişi" width="600" height="420" loading="lazy"><div class="fx-masonry__body"><strong>Yetkazib beriş</strong><span class="fx-masonry__meta">Logistika · 2 kun oldin</span></div></li> <li class="fx-masonry__item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20280%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%22hsl(340%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(10%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22280%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22154%22%20font-family%3D%22sans-serif%22%20font-size%3D%2231%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3Efaktura%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Hisob-faktura — ekran körinişi" width="600" height="280" loading="lazy"><div class="fx-masonry__body"><strong>Hisob-faktura</strong><span class="fx-masonry__meta">ERP · bugun</span></div></li> <li class="fx-masonry__item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20350%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%22hsl(190%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(220%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22350%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22189%22%20font-family%3D%22sans-serif%22%20font-size%3D%2239%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3ECRM%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Mijoz kartasi — ekran körinişi" width="600" height="350" loading="lazy"><div class="fx-masonry__body"><strong>Mijoz kartasi</strong><span class="fx-masonry__meta">CRM · 5 kun oldin</span></div></li> </ul>
Tokenlar: --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-font-size-sm --fx-font-size-xs --fx-radius-surface --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-tertiary
Şu toifadan
AkkordeonYiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.Maqola sahifasiBlog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi).Kiriş sahifasiKiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).Bento törLanding xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense).Bleed (manfiy çet)Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi.Blog röyxatiBlog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).