Holat va javob · molecule
Bosqiç banneri (Alfa / Beta)
Sayt yoki xizmat tepasidagi ingiçka qator (4.164, GOV.UK Phase banner): «BETA — Bu sayt oçiq quriladi, fikringizni yozing». Mahsulot hali rivojlanayotganini halol aytadi va fikr bildiriş havolasini doim köz oldida tutadi («build in public»). data-phase: alpha, beta (standart), preview; ixtiyoriy öng tomonda versiya yoki sana. data-variant="pill" — hero ustida markazdagi ixçam tabletka.
FoxUI oçiq quriladi — har versiya qanday qurilayotgani körinib turadi. Fikr bildiring
Mijozlar kabineti ilk sinovda — xatolar bölişi mumkin. Xato haqida yozing
Effektlar qatlami çiqdi — nima yangi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-phase | alpha ilk sinovpreview oldindan köriş / yangi | beta |
data-variant | pill markazda ixçam tabletka | bar |
Anatomiya
- root
.fx-phaseşart - tag
.fx-phase__tagşart - text
.fx-phase__textşart - meta
.fx-phase__metaixtiyoriy
Klaviatura va kiriş
role="region" + aria-label (yoki <aside>) — sahifa tepasida, skip-link'dan keyin. Yorliq söz bilan (Alfa / Beta), rang yolğiz emas. Havola aniq nom bilan («Fikr bildiring»).
Kod
AI uçun: qaçon işlatiladi
- Yangi xizmat, oçiq qurilayotgan mahsulot yoki beta funksiya — foydalanuvçi bosqiçni bilsin.
- Hero ustida «Yangi: …» tabletkasi (pill).
npx foxui add phase
<div class="fx-phase" data-phase="beta" role="region" aria-label="Sayt bosqiçi"> <strong class="fx-phase__tag">Beta</strong> <p class="fx-phase__text">FoxUI oçiq quriladi — har versiya qanday qurilayotgani körinib turadi. <a href="#">Fikr bildiring</a></p> <span class="fx-phase__meta">v0.27 · 18.10.2026</span> </div> <div class="fx-phase" data-phase="alpha" style="margin-block-start:var(--fx-space-3)"><strong class="fx-phase__tag">Alfa</strong><p class="fx-phase__text">Mijozlar kabineti ilk sinovda — xatolar bölişi mumkin. <a href="#">Xato haqida yozing</a></p></div> <div style="display:grid;justify-items:center;margin-block-start:var(--fx-space-6)"><div class="fx-phase" data-phase="preview" data-variant="pill"><strong class="fx-phase__tag">Yangi</strong><p class="fx-phase__text">Effektlar qatlami çiqdi — <a href="#">nima yangi</a></p></div></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-coral --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-radius-badge --fx-radius-overlay --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-on-brand --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-text-tertiary