Körsatiş · primitive
Maxsus kursor
Hudud içida kursorga belgi yoki yorliq ergaşadi (Magic UI Pointer va Smooth Cursor, Aceternity Following Pointer): portfolio kartalari ustida «Loyihani köriş →» pufagi yoki jamoaviy doskadagi kabi ismli strelka. .fx-cursor__pointer içiga istalgan belgi qöyiladi (.fx-cursor__arrow, .fx-cursor__label); data-variant="bubble" — pufak kursor markazida; data-color — toifa rangi. data-native="hide" — tizim kursori yaşiriladi (faqat belgi aniq körinadigan joyda), data-follow="exact" — keçikişsiz ergaşiş. Belgi berilmasa — data-label matni bilan pufak özi yaratiladi. Faqat siçqonçada; barmoq, klaviatura va harakat kamaytirilganda belgi yöq.
Jamoaviy doska: kursorni şu yerga olib keling
DilnozaVariantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-native | showhide tizim kursori yaşirinadi | show |
data-follow | smoothexact | smooth |
data-variant | arrowbubble | arrow |
data-color | pinkbluegreenpurple | brand |
Anatomiya
- root
.fx-cursorşart - pointer
.fx-cursor__pointerşart - arrow
.fx-cursor__arrowixtiyoriy - label
.fx-cursor__labelixtiyoriy
Holatlar
Klaviatura va kiriş
Belgi aria-hidden va pointer-events yöq — bosiş, fokus va öqiş tartibi özgarmaydi. Klaviatura foydalanuvçisi havolalarni odatdagidek fokus halqasi bilan köradi. Barmoq, (pointer: coarse) va prefers-reduced-motion'da belgi çiqmaydi va tizim kursori yaşirinmaydi; forced-colors'da öçiq.
Kod
AI uçun: qaçon işlatiladi
- Portfolio yoki galereya: karta ustida «Köriş →» pufagi.
- Jamoaviy iş namoyişi (hamkasb kursori), landing hero.
- Element haqida qisqa izoh →
tip - Kursor nuri (yoruğlik) →
effects - Belgi içiga muhim ma'lumot qöymang — u faqat bezak (aria-hidden); havola nomi özi aniq bölsin.
- Forma, matn tahrirlaş yoki jadval ustida tizim kursorini yaşirmang — kiritiş nuqtasi yöqoladi.
- Butun sahifaga qöymang — faqat kiçik hudud (galereya, hero, doska).
npx foxui add cursor
<div class="fx-cursor" data-fx-cursor data-native="hide" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--fx-space-4);padding:var(--fx-space-6);border-radius:var(--fx-radius-surface);background:var(--fx-bg-subtle)"> <a class="fx-card" href="#" style="text-decoration:none;color:inherit"><h3 class="fx-card__title">Samarqand Grand</h3><p class="fx-card__text">Mehmonxona sayti · 2026</p></a> <a class="fx-card" href="#" style="text-decoration:none;color:inherit"><h3 class="fx-card__title">Tong maktabi</h3><p class="fx-card__text">LMS · 2026</p></a> <span class="fx-cursor__pointer" data-variant="bubble"><span class="fx-cursor__label">Loyihani köriş →</span></span> </div> <div class="fx-cursor" data-fx-cursor data-native="hide" style="margin-block-start:var(--fx-space-4);block-size:12rem;border:var(--fx-border-width-default) dashed var(--fx-border-color-default);border-radius:var(--fx-radius-surface);display:grid;place-items:center;color:var(--fx-text-secondary)"> <p style="margin:0">Jamoaviy doska: kursorni şu yerga olib keling</p> <span class="fx-cursor__pointer" data-color="pink"><svg class="fx-cursor__arrow" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 2l14 6.5-6 1.8L8.2 16.5z"/></svg><span class="fx-cursor__label">Dilnoza</span></span> </div>
Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-surface --fx-cursor-x --fx-cursor-y --fx-ease-enter --fx-ease-spring --fx-ease-standard --fx-font-size-sm --fx-font-weight-medium --fx-motion-base --fx-motion-fast --fx-motion-press --fx-radius-pill --fx-shadow-md --fx-size-icon-lg --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-on-brand --fx-text-on-category --fx-text-primary --fx-z-raised