Qatlamlar · pattern
Tanişuv turi
Yangi foydalanuvçiga interfeysni qadam-baqadam körsatiş: sahifa xiralaşadi, nişon element yoruğ “teşik”da qoladi, yonida qadam kartasi (oldingi, keyingi, ötkazib yuboriş, nuqtalar). Esc yopadi, ← → qadam almaştiradi. Qadamlar `.fx-tour__steps` röyxatida, nişon — data-target selektor. Puls nuqta — beacon (4.161): yangi funksiya yonida pulslovçi halqa (.fx-tour__beacon); bosilsa tur (data-tour-step — qaysi qadamdan) boşlanadi va nuqta «körildi» böladi. Harakat kamaytirilsa — qözğalmas halqa.
Yangi mijoz
Şu tugma bilan mijozni qölda qöşasiz.
Filtr
Röyxatni holat va menejer böyiça toraytiring.
Tayyor
Boşqa maslahatlar kerak bölsa, yordam markazini oçing.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-placement | inline matn yonidacorner element burçagida (ota position: relative) | inline |
Anatomiya
- root
.fx-tourşart - spot
.fx-tour__spotixtiyoriy - card
.fx-tour__cardixtiyoriy - steps
.fx-tour__stepsşart - title
.fx-tour__titleixtiyoriy - text
.fx-tour__textixtiyoriy - count
.fx-tour__countixtiyoriy - dots
.fx-tour__dotsixtiyoriy - actions
.fx-tour__actionsixtiyoriy - beacon (puls nuqta)
.fx-tour__beaconixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Esc | Turni yopadi |
| ← → | Oldingi / keyingi qadam |
| Tab | Karta tugmalari orasida |
Karta role="dialog" (modal emas), sarlavhasi aria-label; qadam raqami aria-live bilan öqiladi. Oçilganda fokus “Keyingi”ga tuşadi, yopilganda boşlagan tugmaga qaytadi. Esc har doim yopadi.
Kod
AI uçun: qaçon işlatiladi
- Yangi funksiya yoki birinçi kirişdagi qisqa tanişuv.
- Bitta elementga izoh →
toggletip - Muhim tasdiq yoki forma →
dialog - Turni özi oçilib qöymang — foydalanuvçi “Boşlaş” demagunça emas (birinçi kirişda ham taklif qiling).
- 5–7 qadamdan oşirmang; har qadam bitta fikr.
- Ötkazib yuborişni yaşirmang — majburiy tur foydalanuvçini bezdiradi.
- Bir sahifada ikki-uçtadan köp puls nuqta qöymang — hammasi diqqat talab qilsa, heç biri körinmaydi.
npx foxui add tour
<button class="fx-btn" data-variant="primary" id="tur-nishon-1">Yangi mijoz</button>
<button class="fx-btn" data-variant="outline" id="tur-nishon-2">Filtr</button>
<button class="fx-btn" data-variant="ghost" data-fx-tour-start="tur1">Turni boşlaş</button>
<div class="fx-tour" id="tur1" data-fx-tour hidden aria-label="Mijozlar sahifasi bilan tanişuv">
<ol class="fx-tour__steps">
<li data-target="#tur-nishon-1"><h3>Yangi mijoz</h3><p>Şu tugma bilan mijozni qölda qöşasiz.</p></li>
<li data-target="#tur-nishon-2"><h3>Filtr</h3><p>Röyxatni holat va menejer böyiça toraytiring.</p></li>
<li><h3>Tayyor</h3><p>Boşqa maslahatlar kerak bölsa, yordam markazini oçing.</p></li>
</ol>
</div>
<!-- Puls nuqta (4.161): yangi funksiya yonida; bosilsa tur 2-qadamdan boshlanadi -->
<span style="position: relative; display: inline-block; margin-block-start: var(--fx-space-6)">
<button class="fx-btn" data-variant="outline" type="button">Hisobotlar</button>
<button class="fx-tour__beacon" type="button" data-placement="corner" data-fx-tour-start="tur1" data-tour-step="2" aria-label="Yangi: filtr — tanişuvni boşlaş"></button>
</span>Tokenlar: --fx-bg-brand-solid --fx-bg-overlay --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-duration-pulse --fx-ease-exit --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-knob-motion-loop --fx-motion-base --fx-motion-fast --fx-popover-width --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-shadow-lg --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-4 --fx-space-5 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-tour-cx --fx-tour-cy --fx-tour-h --fx-tour-w --fx-tour-x --fx-tour-y --fx-z-raised