Körsatiş · compound
Hozir kim bor
Hamkorlik belgilari: sahifada hozir kimlar borligini körsatuvçi ustma-ust avatarlar (hover/fokusda ism va holat), “yozmoqda” indikatori va jonli kursor yorliği. Faqat köriniş — ma'lumotni (kim, qayerda, nima qilyapti) ilova real vaqtda yangilaydi.
Guli yozmoqda…
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-color | yellowpinkcoralgreenpurple | blue |
Anatomiya
- root
.fx-presenceşart - list
.fx-presence__listşart - user
.fx-presence__userşart - tip
.fx-presence__tipixtiyoriy - label
.fx-presence__labelixtiyoriy - typing
.fx-presence__typingixtiyoriy - dots
.fx-presence__dotsixtiyoriy - cursor
.fx-presence__cursorixtiyoriy - flag
.fx-presence__flagixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Iştirokçiga fokus — şarh çiqadi |
Har iştirokçi tabindex=0 va töliq aria-label (“Guli, tahrirlayapti”); şarh faqat köriniş uçun (aria-hidden). Yoziş indikatori role="status" (xuşmuomala), nuqtalar harakati prefers-reduced-motion'da töxtaydi. Kursor pointer-events: none.
Kod
AI uçun: qaçon işlatiladi
- Birgalikda tahrirlaş, jonli hujjat, çat: kim bor va kim yozmoqda.
- Oddiy avatarlar guruhi →
avatar - Odamlarning joylaşuvini rang bilan yolğiz bildirmang — ism va holat matni (aria-label, şarh) şart.
- 10 dan köp avatarni qatorga qöymang — oxirgisini `data-more` “+N” avatariga aylantiring.
- Kursorni 60 marta/soniya DOM'da yangilamang — ilova tomonda throttle (~30 ms) qiling.
npx foxui add presence
<div class="fx-presence" role="group" aria-label="Hozir şu hujjatda">
<ul class="fx-presence__list">
<li class="fx-presence__user" tabindex="0" aria-label="Guli, tahrirlayapti">
<span class="fx-avatar" data-color="yellow" data-status="active" aria-hidden="true">GU</span>
<span class="fx-presence__tip" aria-hidden="true"><b>Guli</b> tahrirlayapti</span>
</li>
<li class="fx-presence__user" tabindex="0" aria-label="Mister Fox, köryapti">
<span class="fx-avatar" data-color="purple" aria-hidden="true">MF</span>
<span class="fx-presence__tip" aria-hidden="true"><b>Mister Fox</b> köryapti</span>
</li>
<li class="fx-presence__user" tabindex="0" aria-label="Tadqiqotçi, köryapti">
<span class="fx-avatar" data-color="green" aria-hidden="true">TQ</span>
<span class="fx-presence__tip" aria-hidden="true"><b>Tadqiqotçi</b> köryapti</span>
</li>
</ul>
<span class="fx-presence__label">3 kişi bor</span>
</div>
<p class="fx-presence__typing" role="status"><span class="fx-presence__dots" aria-hidden="true"><i></i><i></i><i></i></span>Guli yozmoqda…</p>
<div style="position: relative; block-size: 5rem;">
<span class="fx-presence__cursor" data-color="pink" style="--x: 30%; --y: 20%"><span class="fx-presence__flag">Mister Fox</span></span>
</div>Tokenlar: --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-surface --fx-border-color-focus --fx-border-width-focus --fx-duration-pulse --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-shift-sm --fx-popover-width --fx-radius-circle --fx-radius-control --fx-radius-nav --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-text-tertiary