Kiritiş · compound
Emoji tanlagiç
Emoji tanlaş paneli: qidiruv (özbekça va inglizça sözlar), 7 toifa tabi, “Oxirgilar” (brauzerda saqlanadi). Brauzerning öz emojilari — rasm yuklanmaydi. Tanlanganda `fx-emoji-select` hodisasi; `data-target` bilan maydonning kursor örniga yoziladi. Odatda popover içida işlatiladi.
Anatomiya
- root
.fx-emojipickerşart - search
.fx-emojipicker__searchixtiyoriy - tabs
.fx-emojipicker__tabsixtiyoriy - tab
.fx-emojipicker__tabixtiyoriy - panel
.fx-emojipicker__panelixtiyoriy - label
.fx-emojipicker__labelixtiyoriy - grid
.fx-emojipicker__gridixtiyoriy - emoji
.fx-emojipicker__emojiixtiyoriy - empty
.fx-emojipicker__emptyixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Tablar yoki emojilar orasida |
| ↑ ↓ | Emoji qatorlari orasida |
| Home, End | Birinçi / oxirgi |
| Enter, Space | Emoji tanlaydi |
Tablar role="tablist" (← → Home End), panel role="tabpanel". Emoji tugmalari aria-label bilan (nomi), roving tabindex: ← → ↑ ↓ Home End. Qidiruvdan ↓ röyxatga ötadi. Natija yöq bölsa matn bilan xabar beriladi.
Kod
AI uçun: qaçon işlatiladi
- Çat, izoh yoki reaktsiyaga emoji qöşiş.
- Tez reaktsiya (3–5 ta) →
msgactions - Emoji bilan iş natijasini yolğiz bildirmang (✅ ning yonida söz ham bölsin).
- Brend ikonlari örnida emoji işlatmang — ular platformaga qarab har xil çiqadi.
- Panelni sahifaga doimiy qöymang — `popover` içida, tugma bosilganda oçing.
npx foxui add emojipicker
<div class="fx-field"> <label class="fx-label" for="emoji-demo">Xabar</label> <input class="fx-input" id="emoji-demo" placeholder="Xabar yozing…"> </div> <div class="fx-emojipicker" data-fx-emojipicker data-target="#emoji-demo"></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-popover-width --fx-radius-circle --fx-radius-nav --fx-radius-overlay --fx-shadow-md --fx-size-control-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-tertiary