Holat va javob · molecule
Ogohlantiriş
Bölim yoki sahifadagi muhim xabar: töla tusli yuza, holat belgisi (şakl), sarlavha, matn, bitta havola, ixtiyoriy yopiş. Ohanglar: neytral, info, success, warning, error, brand. Kengaytma: .fx-alert__icon (ikon slot — şakl-belgi örniga ikon).
Obuna 3 kundan keyin tugaydi
Yangilanişlar va MCP töxtaydi; yuklab olingan versiyalar qoladi.
UzaytirişYangi versiya bor: 0.10.0
Yangilaniş tayyor
Sahifani yangilang.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | neutralinfosuccesswarningerrorbrand | neutral |
data-layout | defaultcompact | default |
Anatomiya
- root
.fx-alertşart - title
.fx-alert__titleşart - text
.fx-alert__textixtiyoriy - action
.fx-alert__actionixtiyoriy - list
.fx-alert__listixtiyoriy - close
.fx-alert__closeixtiyoriy - icon
.fx-alert__iconixtiyoriy
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Havola va yopiş tugmasi |
Darhol öqilişi kerak bölsa role="alert", aks holda role="status". Yopiş tugmasida aria-label.
Naqş: WAI-ARIA APG alert · rol status
Kod
AI uçun: qaçon işlatiladi
npx foxui add alert
<div class="fx-alert" data-tone="warning" role="status"> <p class="fx-alert__title">Obuna 3 kundan keyin tugaydi</p> <p class="fx-alert__text">Yangilanişlar va MCP töxtaydi; yuklab olingan versiyalar qoladi.</p> <a class="fx-alert__action" href="#">Uzaytiriş</a> <button class="fx-alert__close" type="button" aria-label="Yopiş">×</button> </div> <div class="fx-alert" data-tone="info" data-layout="compact"><p class="fx-alert__title">Yangi versiya bor: 0.10.0</p></div> <div class="fx-alert" data-tone="info" role="status"><svg class="fx-alert__icon" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M10 9v5M10 6.2v.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg><p class="fx-alert__title">Yangilaniş tayyor</p><p class="fx-alert__text">Sahifani yangilang.</p></div>
Tokenlar: --fx-bg-brand-subtle --fx-bg-error-subtle --fx-bg-info-subtle --fx-bg-muted --fx-bg-success-subtle --fx-bg-warning-subtle --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-fg-error --fx-fg-info --fx-fg-success --fx-fg-warning --fx-font-size-lg --fx-font-size-sm --fx-font-weight-semibold --fx-radius-badge --fx-radius-circle --fx-radius-surface --fx-size-icon-md --fx-size-min-target --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary