Yillik obuna
Hisob-kitob: har yili 17-oktabrda
Barça komponentlar, MCP va yangilanişlar. 3 qurilma.
Karkas · molecule
Karta
Yuza: içki çet 20, içidagi oraliq 16. Bir qatordagi kartalar böyi teng (WDS r181). Anatomiya: sarlavha qatori (+amal), media, tana, pastki qator, amallar. Variantlar: gorizontal, ixçam, tanlanadigan (içida belgilaş katagi). Kengaytma: data-stretched + .fx-card__link (butun karta havola), aria-pressed (tanlanadigan), data-variant=outline|filled|ghost, <details class=fx-card> + .fx-card__summary, aria-busy, data-flush (jadval kartasi), .fx-card__well.
Faol
Loyiha: Çorsu
Butun karta bosiladi.
Oxirgi yangilaniş: 3 soat oldin
Qöşimça sozlamalar
Bu yerda yaşirin tafsilot.
Buyurtmalar
Yuklanmoqda…
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | defaultraisedoutlinefilledghost | default |
data-layout | verticalhorizontal Kenglikda media çapda | vertical |
data-density | defaultcompact | default |
data-stretched | true | — |
data-flush | true | — |
Anatomiya
- root
.fx-cardşart - title
.fx-card__titleixtiyoriy - text
.fx-card__textixtiyoriy - header
.fx-card__headerixtiyoriy - heading
.fx-card__headingixtiyoriy - media
.fx-card__mediaixtiyoriy - body
.fx-card__bodyixtiyoriy - footer
.fx-card__footerixtiyoriy - actions
.fx-card__actionsixtiyoriy - check
.fx-card__checkixtiyoriy - link
.fx-card__linkixtiyoriy - summary
.fx-card__summaryixtiyoriy - well
.fx-card__wellixtiyoriy
Holatlar
interactiveselectedselectable
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Space | Tanlanadigan kartada katakni almaştiradi |
Tanlanadigan karta — <label> içida haqiqiy checkbox (aria-label şart); tanlaniş çegara + fon + katak belgisi bilan körinadi, rangning özi emas. Gorizontal karta DOM tartibi vertikal bilan bir xil.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Bir mavzudagi ma'lumotni alohida yuzaga yiğiş.
Işlatmang
- Butun sahifa bölagi →
section - Karta içida aylantiriş (scroll) qilmang.
- Tanlanadigan kartada içida alohida havola yoki tugma qöymang — butun karta bitta belgilaş maydoni.
- Media rasmiga muhim matnni yozib qöymang — alt va matn alohida.
npx foxui add card
<article class="fx-card">
<div class="fx-card__media" style="aspect-ratio:16/7"></div>
<header class="fx-card__header">
<div class="fx-card__heading"><h3 class="fx-card__title">Yillik obuna</h3><p class="fx-card__text">Hisob-kitob: har yili 17-oktabrda</p></div>
<span class="fx-status" data-tone="success">Faol</span>
</header>
<div class="fx-card__body"><p class="fx-card__text">Barça komponentlar, MCP va yangilanişlar. 3 qurilma.</p></div>
<footer class="fx-card__footer"><span>1 200 000 söm</span><div class="fx-card__actions"><button class="fx-btn" type="button">Tahrirlaş</button></div></footer>
</article>
<label class="fx-card" data-selectable data-density="compact">
<span class="fx-check fx-card__check"><input type="checkbox" aria-label="Boşlanğiç rejani tanlaş"><span class="fx-check__box"></span></span>
<h3 class="fx-card__title">Boşlanğiç</h3>
<p class="fx-card__text">1 loyiha, 1 dasturçi.</p>
</label>
<article class="fx-card" data-stretched><h3 class="fx-card__title"><a class="fx-card__link" href="#">Loyiha: Çorsu</a></h3><p class="fx-card__text">Butun karta bosiladi.</p><div class="fx-card__well">Oxirgi yangilaniş: 3 soat oldin</div></article>
<details class="fx-card" data-variant="outline"><summary class="fx-card__summary">Qöşimça sozlamalar</summary><p class="fx-card__text">Bu yerda yaşirin tafsilot.</p></details>
<section class="fx-card" data-flush aria-busy="true"><header class="fx-card__header"><h3 class="fx-card__title">Buyurtmalar</h3></header><div class="fx-card__body">Yuklanmoqda…</div><footer class="fx-card__footer">1–10 / 240</footer></section>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-duration-pulse --fx-ease-enter --fx-ease-standard --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-weight-semibold --fx-knob-motion-lift --fx-motion-base --fx-motion-instant --fx-motion-lift --fx-motion-press --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-shadow-md --fx-shadow-sm --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-primary --fx-text-secondary
Ş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).