Kiritiş · compound
Mention
Matn maydonida «@» yozilsa odamlar röyxati oçiladi: yozgan sari filtrlanadi; ↑ ↓ va Enter/Tab «@nom» ni joylaydi, Esc yopadi. Izoh, topşiriq, xabar maydonlari uçun.
- Aziz KarimovSavdo menejeri
- Bobur ToshmatovDasturçi
- Dilnoza RahimovaDizayner
- Topilmadi
Anatomiya
- root
.fx-mentionşart - popup
.fx-mention__popupşart
Holatlar
open
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| @ + harf | Röyxatni oçadi va filtrlaydi |
| ↑ ↓ | Variant |
| Enter, Tab | Tanlaydi |
| Esc | Yopadi |
APG combobox: textarea role="combobox", aria-expanded, aria-controls, aria-activedescendant; variantlar role="option".
Naqş: WAI-ARIA APG combobox · rol combobox
Kod
AI uçun: qaçon işlatiladi
Işlating
- Izoh yoki topşiriq matnida odamni eslaş (@).
Işlatmang
- Odamni alohida maydonda tanlaş →
combobox - Mention röyxatini @ işlatilmaydigan maydonda oçmang.
- Röyxatsiz erkin @ matn bölsa — oddiy textarea.
npx foxui add mention
<label class="fx-field" for="mn"><span class="fx-label">Izoh</span></label>
<div class="fx-mention" data-fx-mention>
<textarea class="fx-textarea" id="mn" role="combobox" aria-expanded="false" aria-controls="mn-list" aria-autocomplete="list" placeholder="Fikringiz… (@ bilan odamni eslang)"></textarea>
<div class="fx-mention__popup" hidden>
<ul class="fx-listbox" role="listbox" id="mn-list" aria-label="Odamlar">
<li class="fx-option fx-option--lg" role="option" id="mn1" data-value="aziz"><span class="fx-avatar" data-size="sm" data-color="yellow" aria-hidden="true">AK</span><span class="fx-option__body">Aziz Karimov<span class="fx-option__desc">Savdo menejeri</span></span></li>
<li class="fx-option fx-option--lg" role="option" id="mn2" data-value="bobur"><span class="fx-avatar" data-size="sm" data-color="green" aria-hidden="true">BT</span><span class="fx-option__body">Bobur Toshmatov<span class="fx-option__desc">Dasturçi</span></span></li>
<li class="fx-option fx-option--lg" role="option" id="mn3" data-value="dilnoza"><span class="fx-avatar" data-size="sm" data-color="pink" aria-hidden="true">DR</span><span class="fx-option__body">Dilnoza Rahimova<span class="fx-option__desc">Dizayner</span></span></li>
<li class="fx-listbox__empty" hidden>Topilmadi</li>
</ul>
</div>
</div>Tokenlar: --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-control-h-sm --fx-radius-overlay --fx-shadow-lg --fx-space-1
Şu toifadan
KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !CheckoutTölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).ComboboxYozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).Yoziş paneli (composer)AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».