Bitim: «Ofis mebeli»
Mas'ul: Nodira Yusupova
Summa: 18 400 000 söm · bosqiç: muzokara
Karkas · primitive
Moslaşuv qatlami
Moslaşuv poydevori. Container queries (4.11): örovçiga fx-cq yoki komponentga data-cq — karta, körsatkiç, röyxat, sozlamalar va grafik kartasi oyna eniga emas, öz joyining eniga qarab qayta tuziladi (tor ustunda, yon varaqda, dashboard plitkasida). Oyna sinflari (4.12): --fx-bp-compact · medium (600) · expanded (840) · large (1200) · xl (1600) tokenlari va data-hide-below / data-hide-above yordamçilari. 12 ustunli tör (4.18): fx-grid data-cols="12" — compact 4, medium 8, expanded 12 ustun; bola data-span / data-span-md / data-span-sm va data-offset. RTL (4.13): data-fx-flip-rtl — yönalişli ikon öngdan-çapga yozuvda közgulanadi; --fx-dir (1 / −1) — siljiş yönalişi uçun.
- Kamola Saidovabugun, 15:00
- Öktam Nazarovertaga
Telefonda: jadval kartalar körinişida.
Kompyuterda: töliq jadval va filtrlar paneli.
Keyingi sahifaVariantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-cq | offon komponentning özi konteyner | off |
data-span | 3468912 | 12 |
data-span-md | 234568 | 8 |
data-span-sm | 1234 | 4 |
data-offset | 012346 | 0 |
data-hide-below | nonemediumexpandedlargexl | none |
data-hide-above | nonecompactmediumexpandedlarge | none |
Anatomiya
- container
.fx-cqşart - grid-12
.fx-grid[data-cols="12"]ixtiyoriy - flip-rtl
[data-fx-flip-rtl]ixtiyoriy
Klaviatura va kiriş
Yaşirilgan (data-hide-*) kontent ekran öquvçidan ham yaşirinadi — muhim ma'lumot har ölçamda biror körinişda bölsin. Container query tartibni özgartiradi, DOM tartibi (va Tab tartibi) özgarmaydi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Dashboard plitkasi, yon panel, dialog içidagi karta — joy eni oyna enidan farq qiladigan har qanday joy.
- Sahifa maketi 12 ustunli törda (CRM yozuv sahifasi: 8 + 4).
- Özbek, arab yoki fors tilidagi interfeys (RTL) — strelkalarni közgulaş.
Işlatmang
- Oddiy teng ustunli kartalar töri →
layout - Karkas: rels, yon menyu, tepa panel →
shell - Komponent CSS'iga oyna eni (@media) böyiça tuzilma qoidasi yozmang — u panel yoki yon varaqqa tuşsa buziladi; container query işlating.
- data-cq'ni inline-flex yoki shrink-to-fit joydagi elementga qöymang — inline-size containment uni toraytirib yuboradi; örovçi fx-cq qöying.
- Breakpoint raqamini öylab topmang — faqat --fx-bp-* qiymatlari.
- Logotip, soat, play belgisi, raqamlarni RTL'da közgulamang — faqat yönalişli strelkalar.
npx foxui add responsive
<div class="fx-grid" data-cols="12">
<div data-span="8" data-span-md="5">
<div class="fx-cq">
<article class="fx-card"><div class="fx-card__header"><div class="fx-card__heading"><h3 class="fx-card__title">Bitim: «Ofis mebeli»</h3><p class="fx-card__text">Mas'ul: Nodira Yusupova</p></div><div class="fx-card__actions"><button class="fx-btn" data-size="sm">Tahrirlaş</button><button class="fx-btn" data-variant="primary" data-size="sm">Yutildi</button></div></div><p class="fx-card__text">Summa: 18 400 000 söm · bosqiç: muzokara</p></article>
</div>
</div>
<aside data-span="4" data-span-md="3">
<div class="fx-cq">
<div class="fx-stat"><div class="fx-stat__label">Bu oy tuşum</div><div class="fx-stat__value">126,4 mln</div><div class="fx-stat__hint">+12 % ötgan oyga nisbatan</div></div>
</div>
</aside>
<div data-span="6" data-offset="3">
<ul class="fx-list" data-cq>
<li class="fx-list__item"><div class="fx-list__body"><span class="fx-list__title">Kamola Saidova</span><span class="fx-list__meta">Qönğiroq qiliş</span></div><span class="fx-list__end">bugun, 15:00</span></li>
<li class="fx-list__item"><div class="fx-list__body"><span class="fx-list__title">Öktam Nazarov</span><span class="fx-list__meta">Taklif yuboriş</span></div><span class="fx-list__end">ertaga</span></li>
</ul>
</div>
</div>
<p class="fx-text" data-hide-above="compact">Telefonda: jadval kartalar körinişida.</p>
<p class="fx-text" data-hide-below="expanded">Kompyuterda: töliq jadval va filtrlar paneli.</p>
<a class="fx-link" href="#">Keyingi sahifa <svg data-fx-flip-rtl viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M6 3l5 5-5 5" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></a>Tokenlar: --fx-control-h-sm --fx-dir --fx-font-size-display-md --fx-font-size-xl --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6
Ş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).