Harakat · molecule
Xabar amallari paneli
Javob ostidagi ikonli amallar: nusxa (✓ bilan tasdiqlanadi), qayta yaratiş, yoqdi/yoqmadi, tahrir, variantlar tarmoği ‹ 2/3 ›. Toolbar naqşi: Tab bilan bitta kiriş, içida ← →. data-reveal="hover" — desktop'da faqat xabar ustida körinadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-reveal | hover Desktop'da faqat ustiga kelganda/fokusda körinadi. | always |
Anatomiya
- root
.fx-msgactionsşart - btn
.fx-msgactions__btnşart - sep
.fx-msgactions__sepixtiyoriy - branch
.fx-msgactions__branchixtiyoriy - status
.fx-msgactions__statusixtiyoriy
Holatlar
copiedpresseddisabledfocus
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Panelga kiriş/çiqiş |
| ← → | Tugmalar orasida |
| Home, End | Birinçi/oxirgi |
| Enter, Space | Amalni bajaradi |
role="toolbar" + aria-label; roving tabindex (Tab bilan bitta tugma), ← → Home End bilan yuriladi. Yoqdi/yoqmadi — aria-pressed. Nusxa natijasi role="status" orqali e'lon qilinadi. Hoverda yaşirin bölsa, fokus tuşganda körinadi.
Naqş: WAI-ARIA APG toolbar · rol toolbar
Kod
AI uçun: qaçon işlatiladi
Işlating
- AI javobi yoki xabar ostida tezkor amallar.
Işlatmang
- Ikkilamçi amallar köp bölsa (menyuga yiğing) →
menu - Ikon-tugmaga aria-label bermay qoldirmang.
- Yoqdi/yoqmadi holatini faqat rangga tayantirmang — aria-pressed va töldirilgan ikon bor.
- Sensorli ekranda panelni yaşirmang — u yerda doim körinadi (şunday qilingan).
npx foxui add msgactions
<div class="fx-message">
<span class="fx-avatar" data-color="purple" role="img" aria-label="Mister Fox">MF</span>
<div class="fx-message__meta"><span class="fx-message__name">Mister Fox</span><span class="fx-ai-label">AI</span></div>
<div class="fx-message__body"><p>Tayyor: 12 ta nofaol mijoz arxivga köçirildi, hisobot qayta hisoblandi.</p>
<div class="fx-msgactions" role="toolbar" aria-label="Javob amallari" data-fx-msgactions data-reveal="hover" data-index="2" data-total="3">
<button type="button" class="fx-msgactions__btn" data-action="copy" aria-label="Nusxalaş"><svg data-fx-icon="copy" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg><svg data-fx-icon="check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></button><button type="button" class="fx-msgactions__btn" data-action="retry" aria-label="Qayta yaratiş"><svg data-fx-icon="retry" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5"/></svg></button><button type="button" class="fx-msgactions__btn" data-action="like" aria-pressed="false" aria-label="Yoqdi"><svg data-fx-icon="up" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 11v9H4v-9h3zM7 11l4-7c1.5 0 2.5 1 2.5 2.5V9H19a2 2 0 0 1 2 2.3l-1 6A2 2 0 0 1 18 19H7"/></svg></button><button type="button" class="fx-msgactions__btn" data-action="dislike" aria-pressed="false" aria-label="Yoqmadi"><svg data-fx-icon="down" viewBox="0 0 24 24" aria-hidden="true"><g transform="rotate(180 12 12)"><path d="M7 11v9H4v-9h3zM7 11l4-7c1.5 0 2.5 1 2.5 2.5V9H19a2 2 0 0 1 2 2.3l-1 6A2 2 0 0 1 18 19H7"/></g></svg></button><button type="button" class="fx-msgactions__btn" data-action="edit" aria-label="Tahrirlaş"><svg data-fx-icon="edit" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4"/></svg></button><span class="fx-msgactions__sep" aria-hidden="true"></span><button type="button" class="fx-msgactions__btn" data-action="prev" aria-label="Oldingi variant"><svg data-fx-icon="left" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><span class="fx-msgactions__branch" aria-live="polite">2/3</span><button type="button" class="fx-msgactions__btn" data-action="next" aria-label="Keyingi variant"><svg data-fx-icon="chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button>
<span class="fx-msgactions__status" role="status"></span>
</div>
</div>
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-spring --fx-ease-standard --fx-fg-success --fx-font-size-xs --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-control --fx-size-icon-md --fx-space-1 --fx-text-brand --fx-text-disabled --fx-text-primary --fx-text-tertiary
Ş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).