Karkas · primitive
Joylaşuv primitivlari
Oraliq tokeni bilan joylaş: fx-stack (vertikal), fx-cluster (qatorga öraladigan guruh), fx-grid (auto-fit yoki aniq ustun), fx-container (markazlangan eni), fx-ratio (tomonlar nisbati). Oraliq — data-gap="0…12" (space-token).
Loyihalar
RedFox
12 faol vazifa
NomLab
5 faol vazifa
Manbaa
8 faol vazifa
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-gap | 012345681012 | 4 |
data-align | startcenterendbaseline Faqat cluster. | stretch |
data-justify | centerendbetween | start |
data-min | smmdlg | md |
data-cols | 234 | auto |
data-size | smmdlgxlfull | lg |
data-pad | none | default |
data-ratio | 1-14-33-216-921-9 | 16-9 |
Anatomiya
- stack
.fx-stackixtiyoriy - cluster
.fx-clusterixtiyoriy - grid
.fx-gridixtiyoriy - container
.fx-containerixtiyoriy - ratio
.fx-ratioixtiyoriy - spacer
.fx-spacerixtiyoriy
Klaviatura va kiriş
Primitivlar faqat joylaydi; semantikasi yöq (kerak bölsa <ul>, <section>, <nav> bilan birga). DOM tartibi = öqiş tartibi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Elementlarni token oraliq bilan ustun, qator yoki törga joylaş.
- Sahifa kontentini markazlab, enini çeklaş.
npx foxui add layout
<div class="fx-container" data-size="md">
<div class="fx-stack" data-gap="6">
<div class="fx-cluster" data-justify="between">
<h2 class="fx-heading" data-size="h2">Loyihalar</h2>
<div class="fx-cluster" data-gap="2"><button class="fx-btn" data-size="sm">Filtr</button><button class="fx-btn" data-variant="primary" data-size="sm">Yangi loyiha</button></div>
</div>
<div class="fx-grid" data-min="sm" data-gap="4">
<div class="fx-card"><h3 class="fx-card__title">RedFox</h3><p class="fx-card__text">12 faol vazifa</p></div>
<div class="fx-card"><h3 class="fx-card__title">NomLab</h3><p class="fx-card__text">5 faol vazifa</p></div>
<div class="fx-card"><h3 class="fx-card__title">Manbaa</h3><p class="fx-card__text">8 faol vazifa</p></div>
</div>
<div class="fx-ratio" data-ratio="21-9"></div>
</div>
</div>Tokenlar: --fx-bg-muted --fx-radius-control --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8
Ş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).