Qatlamlar · pattern
Pastga qadalgan yoziş oynalari
Ekranning pastki öng burçagiga qadalgan kiçik oynalar (4.201, Gmail va Salesforce «Docked composer»): iş sahifasidan çiqmasdan bir neçta çat suhbati yoki yangi xat yonma-yon oçiq turadi. Har oyna: sarlavha tugmasi (avatar, nom, holat, yiğilganda öqilmaganlar soni) — bosilsa yiğiladi/oçiladi; «Kattalaştiriş» (aria-pressed) va «Yopiş»; tana — xabarlar (.fx-minichat__log) yoki xat maydonlari (.fx-minichat__fields) va pastda yoziş qatori. data-state: open, minimized (faqat sarlavha), expanded. Oçiq oynalar data-max dan oşsa eng eskisi özi yiğiladi. Xulq (data-fx-minichat): Esc oynani yiğadi va fokusni sarlavhaga qaytaradi; yopilganda fokus qöşni oynaga ötadi; hodisalar fx-minichat-toggle, fx-minichat-close (bekor qilinadigan — «Qoralama saqlansinmi?» uçun); root.fxMinichat.add(oyna). data-tone="brand" — sarlavha brend rangida. data-size="block" — hujjat namunasi (fixed emas). Telefonda oçiq oyna töliq kenglikda, yiğilganlar ostida qator böladi.
Assalomu alaykum! Hisob-faktura FX-2026-0412 ni olsak böladimi?
Vaalaykum assalom, hozir yuboraman.
Rahmat, 5 ta örin uçun edi.
Ertangi uçraşuv 15:00 da, Çilonzordagi ofisda.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | openminimizedexpanded | open |
data-tone | brand sarlavha brend rangida | default |
data-size | block hujjat namunasi | fixed |
data-from | me öz xabari | them |
Anatomiya
- root
.fx-minichatşart - window
.fx-minichat__windowşart - head
.fx-minichat__headşart - toggle (sarlavha tugmasi)
.fx-minichat__toggleşart - title
.fx-minichat__titleşart - sub
.fx-minichat__subixtiyoriy - unread
.fx-minichat__unreadixtiyoriy - action (kattalaştiriş, yopiş)
.fx-minichat__actionixtiyoriy - body
.fx-minichat__bodyşart - log (role=log)
.fx-minichat__logixtiyoriy - msg
.fx-minichat__msgixtiyoriy - time
.fx-minichat__timeixtiyoriy - fields (xat)
.fx-minichat__fieldsixtiyoriy - foot
.fx-minichat__footixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space (sarlavhada) | Oynani yiğadi / oçadi |
| Esc (oyna ichida) | Oynani yiğadi, fokus sarlavhaga |
| Tab | Sarlavha → kattalaştiriş → yopiş → tana maydonlari |
Ildiz role="region" aria-label, har oyna <section aria-label>. Sarlavha — bitta tugma (aria-expanded, aria-controls → tana): Enter/Space yiğadi/oçadi. Ikonli tugmalarda aria-label oyna nomi bilan («Yopiş: Aziz Karimov»), kattalaştiriş aria-pressed. Xabarlar role="log" (tabindex="0" — klaviatura bilan aylantiriş). Esc oyna içida — yiğadi, fokus sarlavhaga; yopilganda fokus qöşni oynaga ötadi. Öqilmaganlar soni aria-label bilan sözda.
Naqş: WAI-ARIA APG disclosure · rol region
Kod
AI uçun: qaçon işlatiladi
- CRM, helpdesk va poçta ilovasida iş sahifasidan çiqmasdan suhbat yoki xat yoziş.
- Bir vaqtda 2–3 mijoz bilan yozişma.
- Töliq suhbat sahifasi →
conversation - Yordamçi AI paneli →
assistant - Bitta yon panel (yozuv tafsiloti) →
sheet - 3 tadan ortiq oynani oçiq qoldirmang — data-max bilan çeklang, qolganlari yiğiladi.
- Yozilgan matnni yopişda jimgina yöqotmang — fx-minichat-close'ni töxtatib qoralamani saqlang yoki sörang.
- Muhim forma (tölov, röyxatdan ötiş) uçun işlatmang — u alohida sahifa yoki dialog.
npx foxui add minichat
<div class="fx-minichat" data-fx-minichat data-max="2" data-size="block" role="region" aria-label="Oçiq suhbatlar">
<section class="fx-minichat__window" data-state="open" aria-label="Aziz Karimov bilan suhbat">
<header class="fx-minichat__head"><button class="fx-minichat__toggle" type="button" aria-expanded="true"><span class="fx-avatar" data-size="sm" data-color="coral" data-status="active" aria-hidden="true">AK</span><span class="fx-minichat__title">Aziz Karimov<span class="fx-minichat__sub">onlayn · «Ipak Yöli Savdo»</span></span><span class="fx-minichat__unread" aria-label="2 ta öqilmagan">2</span></button><button class="fx-minichat__action" type="button" data-minichat="expand" aria-pressed="false" aria-label="Kattalaştiriş: Aziz Karimov"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7"/></svg></button><button class="fx-minichat__action" type="button" data-minichat="close" aria-label="Yopiş: Aziz Karimov"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></header>
<div class="fx-minichat__body">
<div class="fx-minichat__log" role="log" aria-label="Xabarlar" tabindex="0"><span class="fx-minichat__time">Bugun, 10:42</span><p class="fx-minichat__msg">Assalomu alaykum! Hisob-faktura FX-2026-0412 ni olsak böladimi?</p><p class="fx-minichat__msg" data-from="me">Vaalaykum assalom, hozir yuboraman.</p><p class="fx-minichat__msg">Rahmat, 5 ta örin uçun edi.</p></div>
<form class="fx-minichat__foot"><input class="fx-input" data-size="sm" placeholder="Xabar yozing" aria-label="Xabar: Aziz Karimov"><button class="fx-btn" data-variant="primary" data-size="sm" type="submit">Yuboriş</button></form>
</div>
</section>
<section class="fx-minichat__window" data-state="open" data-tone="brand" aria-label="Yangi xat">
<header class="fx-minichat__head"><button class="fx-minichat__toggle" type="button" aria-expanded="true"><span class="fx-minichat__title">Yangi xat<span class="fx-minichat__sub">Qoralama saqlandi</span></span></button><button class="fx-minichat__action" type="button" data-minichat="expand" aria-pressed="false" aria-label="Kattalaştiriş: Yangi xat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7"/></svg></button><button class="fx-minichat__action" type="button" data-minichat="close" aria-label="Yopiş: Yangi xat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></header>
<form class="fx-minichat__body">
<div class="fx-minichat__fields"><label>Kimga <input type="email" value="[email protected]" aria-label="Kimga"></label><label>Mavzu <input value="Oktabr hisoboti" aria-label="Mavzu"></label><textarea aria-label="Xat matni" placeholder="Xat matni"></textarea></div>
<div class="fx-minichat__foot"><button class="fx-btn" data-variant="primary" data-size="sm" type="submit">Yuboriş</button></div>
</form>
</section>
<section class="fx-minichat__window" data-state="minimized" aria-label="Malika Nazarova bilan suhbat">
<header class="fx-minichat__head"><button class="fx-minichat__toggle" type="button" aria-expanded="false"><span class="fx-avatar" data-size="sm" data-color="pink" aria-hidden="true">MN</span><span class="fx-minichat__title">Malika Nazarova</span><span class="fx-minichat__unread" aria-label="5 ta öqilmagan">5</span></button><button class="fx-minichat__action" type="button" data-minichat="expand" aria-pressed="false" aria-label="Kattalaştiriş: Malika Nazarova"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7"/></svg></button><button class="fx-minichat__action" type="button" data-minichat="close" aria-label="Yopiş: Malika Nazarova"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></header>
<div class="fx-minichat__body" hidden>
<div class="fx-minichat__log" role="log" aria-label="Xabarlar" tabindex="0"><p class="fx-minichat__msg">Ertangi uçraşuv 15:00 da, Çilonzordagi ofisda.</p></div>
<form class="fx-minichat__foot"><input class="fx-input" data-size="sm" placeholder="Xabar yozing" aria-label="Xabar: Malika Nazarova"><button class="fx-btn" data-variant="primary" data-size="sm" type="submit">Yuboriş</button></form>
</div>
</section>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-error-solid --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-enter --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-regular --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-shift-md --fx-radius-badge --fx-radius-control --fx-radius-overlay --fx-radius-pill --fx-radius-surface --fx-shadow-lg --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-on-brand --fx-text-on-error --fx-text-primary --fx-text-tertiary --fx-z-overlay