Holat va javob · pattern
Upsell va qulflangan funksiya
Pullik funksiyani körsatiş va tarifni yangilaşga çaqiriş (naqş): «Pro» belgisi (qulf + söz), banner, foyda röyxatli karta (popover içida ham) va qulflangan köriniş — ostida xiralaşgan namuna, ustida qulf va taklif. Narx sömda, aniq foyda bilan.
SMS limiti 93 % işlatildi
Biznes tarifida oyiga 10 000 SMS va Telegram bot orqali çeksiz xabar.
Pro tarifida
Mijozga eslatmalar özi ketsin
- Tölov kunidan 1 kun oldin SMS
- Tuğilgan kun tabrigi Telegramda
- Uçraşuvdan 2 soat oldin eslatma
Pro tarifiga ötişoyiga 490 000 söm
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | banner Gorizontal taklifcard Foyda röyxati, popover içida hamlocked Xiralaşgan namuna + qulf | — |
Anatomiya
- root
.fx-upsellşart - badge
.fx-upsell__badgeixtiyoriy - lock
.fx-upsell__lockixtiyoriy - body
.fx-upsell__bodyixtiyoriy - title
.fx-upsell__titleixtiyoriy - text
.fx-upsell__textixtiyoriy - list
.fx-upsell__listixtiyoriy - actions
.fx-upsell__actionsixtiyoriy - price
.fx-upsell__priceixtiyoriy - preview
.fx-upsell__previewixtiyoriy - overlay
.fx-upsell__overlayixtiyoriy - item
.fx-upsell__itemixtiyoriy
Holatlar
locked-item
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter / Space (qulflangan bandda) | Taklif popoverini oçadi |
| Esc | Popoverni yopadi |
Qulflangan band — aria-disabled="true" (fokus oladi, bosilganda popover taklif oçiladi). «Pro» belgisi qulf şakli + söz (rang yolğiz emas). Xiralaşgan namuna inert va aria-hidden — Tab va ekran öquvçi unga tuşmaydi; taklif sarlavhasi bilan section nomlanadi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Limitga yaqinlaşganda yuqori tarifni taklif qiliş.
- Joriy tarifda yöq funksiya menyuda körinib turişi, bosilganda tuşuntiriş.
- Hisobot/dashboard bölimini qulflab, namunasini körsatiş.
Işlatmang
- Tizim xabari, xato yoki ogohlantiriş →
alert - Tariflarni yonma-yon soliştiriş →
card - Qulflangan funksiyani butunlay yaşirmang — foydalanuvçi nima olişini körsin (xiralaşgan namuna).
- Har sahifada upsell banneri qöymang — faqat çegara yaqinlaşganda yoki qulflangan funksiya bosilganda.
- Qulflangan tugmani disabled qilmang — aria-disabled bölsin va bosilganda taklif oçilsin (sababini biliş uçun).
npx foxui add upsell
<div class="fx-upsell" data-variant="banner">
<span class="fx-upsell__lock"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="4.5" y="9" width="11" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
<div class="fx-upsell__body"><p class="fx-upsell__title">SMS limiti 93 % işlatildi</p><p class="fx-upsell__text">Biznes tarifida oyiga 10 000 SMS va Telegram bot orqali çeksiz xabar.</p></div>
<div class="fx-upsell__actions"><a class="fx-btn" data-variant="primary" href="#">Biznesga ötiş</a></div>
</div>
<p style="margin:0;display:flex;gap:var(--fx-space-3);align-items:center">
<button class="fx-btn fx-upsell__item" type="button" popovertarget="up-pop" aria-disabled="true">Avtomatik eslatmalar <span class="fx-upsell__badge"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="4.5" y="9" width="11" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>Pro</span></button>
</p>
<div class="fx-popover" popover id="up-pop">
<div class="fx-upsell" data-variant="card">
<span class="fx-upsell__badge"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="4.5" y="9" width="11" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>Pro tarifida</span>
<p class="fx-upsell__title">Mijozga eslatmalar özi ketsin</p>
<ul class="fx-upsell__list"><li>Tölov kunidan 1 kun oldin SMS</li><li>Tuğilgan kun tabrigi Telegramda</li><li>Uçraşuvdan 2 soat oldin eslatma</li></ul>
<div class="fx-upsell__actions"><a class="fx-btn" data-variant="primary" href="#">Pro tarifiga ötiş</a><span class="fx-upsell__price">oyiga 490 000 söm</span></div>
</div>
</div>
<section class="fx-upsell" data-variant="locked" aria-labelledby="up-l">
<div class="fx-upsell__preview" inert aria-hidden="true">
<table class="fx-table"><thead><tr><th>Menejer</th><th data-type="num">Bitimlar</th><th data-type="num">Tuşum</th><th data-type="num">Konversiya</th></tr></thead>
<tbody><tr><td>Dilnoza R.</td><td data-type="num">42</td><td data-type="num">186 400 000 söm</td><td data-type="num">31 %</td></tr><tr><td>Bobur T.</td><td data-type="num">35</td><td data-type="num">142 900 000 söm</td><td data-type="num">27 %</td></tr><tr><td>Madina Y.</td><td data-type="num">29</td><td data-type="num">118 300 000 söm</td><td data-type="num">24 %</td></tr></tbody></table>
</div>
<div class="fx-upsell__overlay">
<span class="fx-upsell__lock"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="4.5" y="9" width="11" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
<h3 class="fx-upsell__title" id="up-l">Menejerlar reytingi — Biznes tarifida</h3>
<p class="fx-upsell__text">Kim qança bitim yopgani, tuşum va konversiya — har kuni yangilanadi.</p>
<div class="fx-upsell__actions"><a class="fx-btn" data-variant="primary" href="#">Tariflarni köriş</a><button class="fx-btn" type="button" data-variant="ghost">14 kun bepul sinaş</button></div>
</div>
</section>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-control-h-md --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-popover-width --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-radius-tag --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-brand --fx-text-on-brand --fx-text-primary --fx-text-secondary
Şu toifadan
OgohlantirişBölim yoki sahifadagi muhim xabar: töla tusli yuza, holat belgisi (şakl), sarlavha, matn, bitta havola, ixtiyoriy yopiş.Tasdiqlaş sörovi (ruxsat / rad)Agent xavfli yoki qaytarib bölmaydigan amaldan oldin ruxsat söraydi: savol, nima özgarişi (tafsilot) va Ruxsat beriş / Rad etiş / Har doim ruxsat.BannerButun kenglikdagi sayt e'loni (texnik işlar, obuna tugadi): holat belgisi (şakl), qisqa matn, bitta havola, yopiş.Portlaş va konfettiYoqtiriş va muvaffaqiyat uçun qisqa, bir martalik quvonç effektlari (Magic UI Confetti, Twitter «yoqdi»).Boşlaş röyxatiYangi foydalanuvçi uçun onboarding kartasi: jarayon çiziği va «2 / 5», qadamlar röyxati.Cookie roziligiCookie va kuzatuv roziligi naqşi (4.180, GOV.UK Cookie banner; GDPR 2-bosqiç uçun): pastki karta — nima uçun cookie kerakligi bir-ikki gapda, «Qabul qiliş», «Rad etiş» (bir xil vaznli — rad etiş yaşirilmaydi) va «Sozlaş».