Navigatsiya · molecule
Suhbatlar röyxati
Messenjer çap paneli: avatar (onlayn nuqta), nom, vaqt, oxirgi xabar va belgilar. Holatlar — öqilmagan, eslatma (@), qadalgan, ovozsiz, qoralama, yozmoqda, öqildi, tanlangan — har biri söz yoki ikon bilan ham.
Anatomiya
- list
.fx-convosşart - item
.fx-convoşart - name
.fx-convo__nameşart - time
.fx-convo__timeixtiyoriy - preview
.fx-convo__previewixtiyoriy - badges
.fx-convo__badgesixtiyoriy - count
.fx-convo__nixtiyoriy - mention
.fx-convo__mentionixtiyoriy - draft
.fx-convo__draftixtiyoriy - typing
.fx-convo__typingixtiyoriy - tick
.fx-convo__tickixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Suhbatni oçadi |
Har qator havola; son va @ belgilarida aria-label; tanlangan suhbat aria-current.
Naqş: WAI-ARIA APG listbox · rol list
Kod
AI uçun: qaçon işlatiladi
- Messenjer, yordam markazi, izohlar oqimlari röyxati.
- Oddiy ma'lumot röyxati →
list - Holatni faqat rang bilan bildirmang — son, @, «Qoralama:», «yozmoqda…» sözi bilan.
- Oxirgi xabarni ikki qatorga ötkazmang.
npx foxui add convo
<ul class="fx-convos" aria-label="Suhbatlar"> <li><a class="fx-convo" href="#" aria-current="true" data-unread><span class="fx-avatar" data-color="coral" data-status="active" role="img" aria-label="Navröz Mebel — brending">NM</span><span class="fx-convo__name">Navröz Mebel — brending</span><span class="fx-convo__time">10:42</span><span class="fx-convo__preview"><span class="fx-convo__typing">Dilshod yozmoqda…</span></span><span class="fx-convo__badges"><span class="fx-convo__mention" aria-label="Sizni eslaşdi">@</span><span class="fx-convo__n" aria-label="3 ta öqilmagan">3</span></span></a></li> <li><a class="fx-convo" href="#"><span class="fx-avatar" data-color="purple" role="img" aria-label="Mister Fox">MF</span><span class="fx-convo__name">Mister Fox</span><span class="fx-convo__time"><span class="fx-convo__tick" data-read role="img" aria-label="Öqildi"></span>09:15</span><span class="fx-convo__preview">Siz: 0.22 çiqdi, sinovlar ötdi</span><span class="fx-convo__badges"></span></a></li> <li><a class="fx-convo" href="#" data-muted><span class="fx-avatar" data-color="blue" role="img" aria-label="#umumiy">#</span><span class="fx-convo__name">#umumiy</span><span class="fx-convo__time">Keça</span><span class="fx-convo__preview"><b>Guli:</b> Ertalabki yiğiliş 10:00 da</span><span class="fx-convo__badges"><span class="fx-convo__n" aria-label="12 ta öqilmagan">12</span></span></a></li> <li><a class="fx-convo" href="#"><span class="fx-avatar" data-color="green" role="img" aria-label="Dilnoza">DI</span><span class="fx-convo__name">Dilnoza</span><span class="fx-convo__time">Du</span><span class="fx-convo__preview"><span class="fx-convo__draft">Qoralama:</span> Logoning ikkinçi varianti…</span><span class="fx-convo__badges"></span></a></li> </ul>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-border-color-focus --fx-border-width-focus --fx-ease-standard --fx-fg-error --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-radius-circle --fx-radius-control --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary