Harakat · molecule
Reaksiyalar paneli
Emoji + son tugmalari: bosilsa aria-pressed almaşadi va son ±1; bosilgani brend tusi, qalin yozuv va çegara bilan. Post, izoh, hujjat uçun. Xabarlardagi .fx-reaction körinişi, lekin mustaqil.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | mdlg | md |
Anatomiya
- root
.fx-reactbarşart - item
.fx-reactbar__itemşart - emoji
.fx-reactbar__emojiixtiyoriy - count
.fx-reactbar__countixtiyoriy
Holatlar
pressedhover
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Reaksiyalar orasida |
| Enter/Space | Qöyadi/olib taşlaydi |
Guruh role=group; har tugma aria-pressed + aria-label «Yoqdi, 12 kişi, siz ham bosgansiz»; emoji aria-hidden.
Kod
AI uçun: qaçon işlatiladi
npx foxui add reactbar
<div class="fx-reactbar" role="group" aria-label="Reaksiyalar" data-fx-reactbar> <button class="fx-reactbar__item" type="button" aria-pressed="true" data-label="Yoqdi"><span class="fx-reactbar__emoji" aria-hidden="true">👍</span><span class="fx-reactbar__count">12</span></button> <button class="fx-reactbar__item" type="button" aria-pressed="false" data-label="Tabriklayman"><span class="fx-reactbar__emoji" aria-hidden="true">🎉</span><span class="fx-reactbar__count">4</span></button> <button class="fx-reactbar__item" type="button" aria-pressed="false" data-label="Körib çiqaman"><span class="fx-reactbar__emoji" aria-hidden="true">👀</span><span class="fx-reactbar__count">2</span></button> </div>
Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-circle --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-brand --fx-text-secondary
Şu toifadan
Ommaviy panelTanlov bölsa pastda markazda suzib çiqadigan panel: son, summa (ixtiyoriy), amallar, ×.TugmaAmal tugmasi.AI checkpointAI suhbati yoki agent lentasidagi «şu nuqtaga qaytiş» belgisi (4.204, Vercel AI Elements «Checkpoint»; Cursor va Claude Code'dagi rewind).Yopiş tugmasiDialog, sheet, alert va chip uçun bir xil ✕ tugmasi.Nusxa tugmasiBir bosişda matn clipboard'ga yoziladi: nusxa ikoni ✓ ga yumşoq almaşadi (2 soniya), natija e'lon qilinadi.Prujinali sudraşElementni barmoq yoki siçqonça bilan suriş: sudralayotganda körsatkiçga yopişadi va biroz kötariladi, qöyib yuborilganda tezligi bilan biroz davom etadi (inersiya) va prujina bilan joyiga qaytadi (HIG, M3 Expressive, Vaul).