Holat va javob · molecule
Banner
Butun kenglikdagi sayt e'loni (texnik işlar, obuna tugadi): holat belgisi (şakl), qisqa matn, bitta havola, yopiş. Yopilgani eslab qolinadi (data-fx-banner="kalit"). Tonlar: neytral, info, warning, error, brand.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | neutralinfowarningerrorbrand | neutral |
data-sticky | on sahifa tepasiga yopişadi | — |
Anatomiya
- root
.fx-bannerşart - text
.fx-banner__textşart - action
.fx-banner__actionixtiyoriy - close
.fx-banner__closeixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Havola va yopiş tugmasi |
role="region" + aria-label. Dinamik paydo bölsa role="status" (xavfli bölsa alert). Yopiş tugmasida aria-label.
Naqş: WAI-ARIA APG alert · rol region
Kod
AI uçun: qaçon işlatiladi
- Butun sayt yoki ilova uçun muhim e'lon (texnik işlar, obuna holati, yangi reliz).
npx foxui add banner
<div class="fx-banner" data-tone="warning" data-fx-banner="obuna-oktyabr" role="region" aria-label="Obuna e'loni"> <p class="fx-banner__text">Obunangiz 3 kundan keyin tugaydi.</p> <a class="fx-banner__action" href="#">Uzaytiriş</a> <button class="fx-banner__close" type="button" aria-label="Yopiş">×</button> </div> <div class="fx-banner" data-tone="brand"><p class="fx-banner__text">Yangi: grafiklar oilasi çiqdi.</p><a class="fx-banner__action" href="#">Nima yangi</a></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-error-subtle --fx-bg-info-subtle --fx-bg-muted --fx-bg-warning-subtle --fx-border-color-focus --fx-border-width-focus --fx-ease-standard --fx-fg-error --fx-fg-info --fx-fg-warning --fx-font-size-lg --fx-font-size-sm --fx-font-weight-semibold --fx-motion-fast --fx-motion-press --fx-radius-badge --fx-radius-circle --fx-size-min-target --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-on-brand --fx-text-primary --fx-text-secondary