Karkas · pattern
Blog röyxati
Blog 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). Har karta: muqova (rasm yoki pastel fon), toifa havolasi, sarlavha (havola butun kartani bosiladigan qiladi — toifa havolasi ustida qoladi), 3 qatorgaça qisqartirilgan matn, muallif, sana va öqiş vaqti. data-layout: grid (standart) yoki list (rasm çapda — arxiv va qidiruv sahifasi). Maqolaning özi — fx-article.
Blog
Dizayn tizimlari haqida özbekça
Har payşanba: amaliy maqolalar, reliz tafsilotlari va mijozlar tajribasi.
- Qöllanma
Tokenlar bilan mavzu yasaş: bitta HEX'dan butun palitragaça
Brend rangingizni bergan holda kontrast qöriqçisidan ötadigan yoruğ va qoronği mavzuni qanday oliş mumkin — qadamma-qadam, kod bilan.
- Relizlar
0.28: 100 ta yangi naqş va «Işxona»
Tipografiya rollari, z-qatlamlar, narx jadvali, xato sahifalari va yana 96 ta band — nima özgardi va qanday yangilaş kerak.
- Mijoz tajribasi
«Ipak Yöli Savdo» admin panelini 3 haftada qanday yangiladi
Eski Bootstrap'dan FoxUI'ga ötiş: jadval, filtrlar va forma — qaysi qismi oson, qaysi biri vaqt oldi.
- Qöllanma
Klaviatura bilan işlaş: har komponentda nimani tekşiramiz
Tab tartibi, roving tabindex, Esc va fokusni qaytariş — WAI-ARIA naqşlari böyiça qisqa röyxat.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-layout | gridlist rasm çapda — arxiv | grid |
data-featured | on töliq kenglikdagi tanlangan maqola | off |
data-color | yellowpinkbluecoralgreenpurple | none |
Anatomiya
- root
.fx-blogşart - head
.fx-blog__headixtiyoriy - eyebrow
.fx-blog__eyebrowixtiyoriy - title
.fx-blog__titleixtiyoriy - text
.fx-blog__textixtiyoriy - filters (fx-chip)
.fx-blog__filtersixtiyoriy - list
.fx-blog__listşart - post
.fx-blog__postşart - cover
.fx-blog__coverixtiyoriy - content
.fx-blog__contentixtiyoriy - category
.fx-blog__categoryixtiyoriy - post-title (h3)
.fx-blog__post-titleşart - link (butun karta)
.fx-blog__linkşart - excerpt
.fx-blog__excerptixtiyoriy - byline
.fx-blog__bylineixtiyoriy - author
.fx-blog__authorixtiyoriy - pager (fx-pagination)
.fx-blog__pagerixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Filtr, keyin har karta (toifa va sarlavha), oxirida sahifalaş |
| Enter | Maqolani oçadi |
Röyxat <ul>, har maqola h3 içida havola; butun karta bosiladi, lekin Tab'da bitta töxtaş (+ toifa havolasi), fokus halqasi karta atrofida. Muqova bezak bölsa aria-hidden, ma'noli rasm bölsa alt. Muallif avatari aria-hidden (ism matnda). Sana <time datetime>. Filtr — aria-pressed tugmalar, sahifalaş <nav aria-label>.
Naqş: WAI-ARIA APG landmarks · rol region
Kod
AI uçun: qaçon işlatiladi
- Blog boş sahifasi, toifa va muallif arxivi.
- Landing'da «Sönggi maqolalar» bölimi (3 karta, filtrsiz).
- Maqolaning özi →
article - Versiyalar va özgarişlar lentasi →
changelogfeed - Kartaga içma-iç köp havola qöymang — sarlavha havolasi butun kartani qoplaydi; faqat toifa havolasi ustida qoladi.
- Muqovasiz kartani böş joy bilan qoldirmang — pastel fon (data-color) yoki toifa rasmi qöying, tör tekis tursin.
- Sana va öqiş vaqtini yaşirmang — öquvçi maqola eskirganmi, qança vaqt olişini birinçi qaraydi.
npx foxui add blog
<section class="fx-blog" aria-labelledby="bl-t">
<header class="fx-blog__head"><p class="fx-blog__eyebrow">Blog</p><h2 class="fx-blog__title" id="bl-t">Dizayn tizimlari haqida özbekça</h2><p class="fx-blog__text">Har payşanba: amaliy maqolalar, reliz tafsilotlari va mijozlar tajribasi.</p></header>
<ul class="fx-blog__filters" aria-label="Toifalar">
<li><button class="fx-chip" type="button" aria-pressed="true">Hammasi</button></li>
<li><button class="fx-chip" type="button" aria-pressed="false">Qöllanma</button></li>
<li><button class="fx-chip" type="button" aria-pressed="false">Relizlar</button></li>
<li><button class="fx-chip" type="button" aria-pressed="false">Mijoz tajribasi</button></li>
</ul>
<ul class="fx-blog__list">
<li class="fx-blog__post" data-featured><div class="fx-blog__cover" data-color="purple" aria-hidden="true"></div><div class="fx-blog__content"><a class="fx-blog__category" href="#">Qöllanma</a><h3 class="fx-blog__post-title"><a class="fx-blog__link" href="#">Tokenlar bilan mavzu yasaş: bitta HEX'dan butun palitragaça</a></h3><p class="fx-blog__excerpt">Brend rangingizni bergan holda kontrast qöriqçisidan ötadigan yoruğ va qoronği mavzuni qanday oliş mumkin — qadamma-qadam, kod bilan.</p><div class="fx-blog__byline"><span class="fx-avatar" data-size="sm" data-color="green" aria-hidden="true">DY</span><span class="fx-blog__author"><b>Dilnoza Yusupova</b><span><time datetime="2026-10-16">16-oktabr 2026</time> · 9 daq öqiş</span></span></div></div></li>
<li class="fx-blog__post"><div class="fx-blog__cover" data-color="yellow" aria-hidden="true"></div><div class="fx-blog__content"><a class="fx-blog__category" href="#">Relizlar</a><h3 class="fx-blog__post-title"><a class="fx-blog__link" href="#">0.28: 100 ta yangi naqş va «Işxona»</a></h3><p class="fx-blog__excerpt">Tipografiya rollari, z-qatlamlar, narx jadvali, xato sahifalari va yana 96 ta band — nima özgardi va qanday yangilaş kerak.</p><div class="fx-blog__byline"><span class="fx-avatar" data-size="sm" data-color="purple" aria-hidden="true">RS</span><span class="fx-blog__author"><b>Rahim Sadiy</b><span><time datetime="2026-10-14">14-oktabr 2026</time> · 5 daq öqiş</span></span></div></div></li>
<li class="fx-blog__post"><div class="fx-blog__cover" data-color="blue" aria-hidden="true"></div><div class="fx-blog__content"><a class="fx-blog__category" href="#">Mijoz tajribasi</a><h3 class="fx-blog__post-title"><a class="fx-blog__link" href="#">«Ipak Yöli Savdo» admin panelini 3 haftada qanday yangiladi</a></h3><p class="fx-blog__excerpt">Eski Bootstrap'dan FoxUI'ga ötiş: jadval, filtrlar va forma — qaysi qismi oson, qaysi biri vaqt oldi.</p><div class="fx-blog__byline"><span class="fx-avatar" data-size="sm" data-color="coral" aria-hidden="true">AK</span><span class="fx-blog__author"><b>Aziz Karimov</b><span><time datetime="2026-10-09">9-oktabr 2026</time> · 7 daq öqiş</span></span></div></div></li>
<li class="fx-blog__post"><div class="fx-blog__cover" data-color="green" aria-hidden="true"></div><div class="fx-blog__content"><a class="fx-blog__category" href="#">Qöllanma</a><h3 class="fx-blog__post-title"><a class="fx-blog__link" href="#">Klaviatura bilan işlaş: har komponentda nimani tekşiramiz</a></h3><p class="fx-blog__excerpt">Tab tartibi, roving tabindex, Esc va fokusni qaytariş — WAI-ARIA naqşlari böyiça qisqa röyxat.</p><div class="fx-blog__byline"><span class="fx-avatar" data-size="sm" data-color="blue" aria-hidden="true">JT</span><span class="fx-blog__author"><b>Jasur Toshpoʻlatov</b><span><time datetime="2026-10-02">2-oktabr 2026</time> · 6 daq öqiş</span></span></div></div></li>
</ul>
<nav class="fx-blog__pager fx-pagination" aria-label="Blog sahifalari"><a class="fx-pagination__page" aria-disabled="true" aria-label="Oldingi">‹</a><a class="fx-pagination__page" href="#" aria-current="page">1</a><a class="fx-pagination__page" href="#">2</a><a class="fx-pagination__page" href="#">3</a><a class="fx-pagination__page" href="#" aria-label="Keyingi">›</a></nav>
</section>Tokenlar: --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-ease-standard --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-line-height-snug --fx-line-height-tight --fx-motion-slow --fx-radius-surface --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary