Körsatiş · pattern
Jonli hamkorlik kursorlari
Umumiy iş maydonida boşqa foydalanuvçilar kursorlari (4.205, Figma, Liveblocks, Magic UI «Pointer»): rangli strelka va ism yorliği, matndagi tanlov (.fx-cursors__selection — yarim şaffof fon, karetka va ism), kursor-çat pufakçasi (.fx-cursors__chat) va tepada kimlar borligi röyxati (.fx-cursors__people). Joylaşuvni ilova realtime orqali yangilaydi: --fx-cursors-x / --fx-cursors-y (% yoki px) — kursor silliq suriladi; uzoq qimirlamasa data-state="idle" — yorliq yaşirinadi, kursor xiralaşadi. Rang data-color (6 pastel) — doim ism bilan birga. Kursorlar faqat bezak (aria-hidden); kim borligi va nima qilayotgani — röyxat va jonli hudud orqali.
Oktabr hisoboti
Oktabr oyida tuşum 1 284 500 000 söm böldi — sentabrga nisbatan 12 % köp. Eng katta ösiş Samarqand filialida, yangi mijozlar soni 214 ta.
Aziz Karimov izoh yozmoqda
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-color | yellowpinkbluecoralgreenpurple | blue |
data-state | idle yorliq yaşirin, xira | active |
Anatomiya
- root
.fx-cursorsşart - bar
.fx-cursors__barixtiyoriy - people (röyxat)
.fx-cursors__peopleixtiyoriy - stage (iş maydoni)
.fx-cursors__stageşart - pointer
.fx-cursors__pointerşart - name
.fx-cursors__nameşart - çat
.fx-cursors__chatixtiyoriy - selection
.fx-cursors__selectionixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| — | Kursorlar fokuslanmaydi; avatarlar röyxati ekran öquvçiga oçiq |
Kursorlar va tanlov belgilari aria-hidden (vizual qatlam). Kim borligi — <ul aria-label="Hozir hujjatda"> avatarlar (role="img" + aria-label ism bilan). Muhim hodisalar («Aziz qöşildi», «izoh yozmoqda») alohida aria-live="polite" hududida. Kursor pointer-events: none — ostidagi mazmunga bosiş xalaqit qilmaydi. Yuqori kontrast rejimida strelka va yorliq tizim ranglarida.
Kod
AI uçun: qaçon işlatiladi
- Hujjat, doska, jadval yoki dizayn maydonida bir vaqtda bir neça kişi işlaganda.
- AI agent ham hujjatda işlayotganini körsatiş (Mister Fox · AI kursori).
- Faqat kim onlayn ekanini körsatiş →
presence - Avatarlar guruhi →
avatar - Izoh qoldiriş →
comments - Kursorni faqat rang bilan farqlamang — ism yorliği doim yonida (idle'da ham hover/fokusda qaytadi).
- 10 tadan ortiq kursorni bir vaqtda çizmang — eng yaqinlarini körsating, qolganini «+7» röyxatda.
- Har siçqonça harakatini ekran öquvçiga aytmang — faqat muhim hodisa (qöşildi, çiqdi, izoh yozmoqda).
- Pozitsiyani har kadrda yubormang — 30–60 ms oraliqda, oraliq harakatni CSS silliqlaydi.
npx foxui add cursors
<div class="fx-cursors">
<div class="fx-cursors__bar"><span>«Oktabr hisoboti» — 3 kişi tahrirlamoqda</span><ul class="fx-cursors__people" aria-label="Hozir hujjatda"><li><span class="fx-avatar" data-size="sm" data-color="green" role="img" aria-label="Dilnoza Yusupova">DY</span></li><li><span class="fx-avatar" data-size="sm" data-color="coral" role="img" aria-label="Aziz Karimov">AK</span></li><li><span class="fx-avatar" data-size="sm" data-color="purple" role="img" aria-label="Mister Fox (AI)">MF</span></li></ul></div>
<div class="fx-cursors__stage" style="block-size: 18rem; padding: var(--fx-space-8)">
<h3 style="margin: 0 0 var(--fx-space-3)">Oktabr hisoboti</h3>
<p style="margin: 0; max-inline-size: 52ch; line-height: 1.7">Oktabr oyida tuşum <span class="fx-cursors__selection" data-color="green" data-name="Dilnoza">1 284 500 000 söm</span> böldi — sentabrga nisbatan 12 % köp. Eng katta ösiş Samarqand filialida, yangi mijozlar soni 214 ta.</p>
<div class="fx-cursors__pointer" data-color="coral" style="--fx-cursors-x: 62%; --fx-cursors-y: 58%" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 3l15 7.5-6.5 1.8L9.7 19z"/></svg><span class="fx-cursors__name">Aziz Karimov<span class="fx-cursors__chat">Bu raqamni grafikka ham qöşaylikmi?</span></span></div>
<div class="fx-cursors__pointer" data-color="purple" style="--fx-cursors-x: 28%; --fx-cursors-y: 72%" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 3l15 7.5-6.5 1.8L9.7 19z"/></svg><span class="fx-cursors__name">Mister Fox · AI</span></div>
<div class="fx-cursors__pointer" data-color="green" data-state="idle" style="--fx-cursors-x: 80%; --fx-cursors-y: 18%" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 3l15 7.5-6.5 1.8L9.7 19z"/></svg><span class="fx-cursors__name">Dilnoza</span></div>
</div>
<p class="fx-sr-only" aria-live="polite">Aziz Karimov izoh yozmoqda</p>
</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-surface --fx-border-width-default --fx-border-width-focus --fx-cursors-x --fx-cursors-y --fx-ease-spring --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-regular --fx-font-weight-semibold --fx-line-height-normal --fx-motion-base --fx-motion-slow --fx-radius-badge --fx-radius-surface --fx-shadow-color --fx-size-icon-lg --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-on-category --fx-text-secondary --fx-z-raised