Holat va javob · pattern
Saqlaş paneli
Saqlanmagan özgarişlar qöriqçisi: forma özgarsa pastda «Saqlanmagan özgarişlar · 2 ta — Bekor qiliş / Saqlaş» paneli çiqadi, özgargan maydon yorliği oldida nuqta paydo böladi, qiymat qaytsa belgi yöqoladi. Sahifadan ketişda brauzer ogohlantiradi, Ctrl+S saqlaydi. Sozlamalar, mijoz kartasi, profil sahifalari uçun.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-position | sticky Forma oxirida, scrollda pastga yopişadifixed Ekran pastida, markazdatop Ekran tepasida töliq enida (Polaris uslubi) | sticky |
data-state | saved fxSaved() dan keyin qisqa «Saqlandi ✓» | — |
Anatomiya
- root
.fx-savebarşart - text
.fx-savebar__textşart - count
.fx-savebar__countixtiyoriy - actions
.fx-savebar__actionsşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Ctrl/⌘ + S | Özgariş bölsa formani saqlaydi |
| Tab | Panel oçiq bölsa «Bekor qiliş» va «Saqlaş» tugmalariga |
Panel role="region" va aria-label; körinmaganda visibility:hidden — Tab bilan unga tuşilmaydi. Özgargan maydon yorliği oldida nuqta (şakl), panelda özgarişlar soni söz bilan («· 2 ta»). Ctrl/⌘+S saqlaydi. Sahifadan ketişda brauzerning öz ogohlantirişi (beforeunload).
Kod
AI uçun: qaçon işlatiladi
- Köp maydonli sozlamalar, mijoz yoki mahsulot kartasi — qölda saqlanadigan forma.
- Foydalanuvçi özgarişni unutib sahifadan çiqib ketişi qimmatga tuşadigan joy.
- Bitta maydonni joyida tahrirlaş →
inline-edit - Bir neça qadamli yangi yozuv yaratiş →
wizard - Panelni har doim körsatib qöymang — faqat haqiqiy özgariş bölganda çiqsin, qiymat qaytsa yöqolsin.
- «Bekor qiliş»ni tasdiqsiz sahifani yopadigan amal qilmang — u faqat qiymatlarni boşlanğiçiga qaytaradi.
- Avto-saqlanadigan formada işlatmang — u yerda «Saqlandi» holati (status) yetarli.
npx foxui add savebar
<form class="fx-card" data-fx-savebar onsubmit="event.preventDefault(); this.fxSaved()" style="display:grid;gap:var(--fx-space-4);max-inline-size:32rem">
<h3 class="fx-card__title">Mijoz: Dilnoza Rahimova</h3>
<label class="fx-field"><span class="fx-label" data-required>Ism familiya</span><input class="fx-input" name="ism" value="Dilnoza Rahimova" required></label>
<label class="fx-field"><span class="fx-label">Telefon</span><input class="fx-input" name="tel" value="+998 93 512 40 18"></label>
<label class="fx-field"><span class="fx-label">Bosqiç</span><span class="fx-select-wrap"><select class="fx-select" name="bosqich"><option>Yangi ariza</option><option selected>Muzokara</option><option>Şartnoma</option><option>Yopildi</option></select></span></label>
<label class="fx-check" data-type="switch"><input type="checkbox" role="switch" name="telegram" checked><span class="fx-check__box"></span>Telegram orqali xabarnoma</label>
<div class="fx-savebar" role="region" aria-label="Saqlanmagan özgarişlar">
<span class="fx-savebar__text">Saqlanmagan özgarişlar <span class="fx-savebar__count" data-savebar-count></span></span>
<div class="fx-savebar__actions"><button class="fx-btn" type="reset" data-variant="ghost" data-size="sm">Bekor qiliş</button><button class="fx-btn" type="submit" data-variant="primary" data-size="sm">Saqlaş</button></div>
</div>
</form>Tokenlar: --fx-bg-page --fx-dialog-width --fx-ease-emphasized --fx-ease-exit --fx-fg-success --fx-fg-warning --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-motion-base --fx-motion-exit-base --fx-motion-shift-lg --fx-radius-overlay --fx-shadow-lg --fx-size-status-dot --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-brand --fx-text-primary