Körsatiş · primitive
Harakat qatlami
Zamonaviy CSS harakat qatlami. Prujina sxemasi (4.25, M3 Expressive): --fx-spring-spatial-fast|default|slow — joy/ölçam uçun (biroz oşib ketadi), --fx-spring-effects-* — rang/şaffoflik uçun (oşib ketmaydi); qiymat transition'ga tayyor juftlik, calm'da sakramaydi, expressive'da sekin prujina sakraydi; fx-spring data-spring="spatial|effects|both" — tayyor ötiş. Scroll'ga boğliq kiriş (4.31): data-fx-reveal="up|fade|blur|scale" — blok köriniş maydoniga kirganda paydo böladi (animation-timeline: view()), qöllanmasa darhol körinadi. Öqiş progress çiziği (4.32): fx-scroll-progress — sahifa aylantirilgani sari töladi (scroll() timeline). Aylanuvçi raqam (4.35): fx-ticker + data-fx-ticker — qiymat özgarganda raqamlar barabandek aylanadi (özbekça format: 126 400 000), birinçi aylaniş körinişda.
Yangi mijozlar
Oktabr oyida 42 ta yangi mijoz qöşildi — eng köpi Samarqand filialida.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-spring | effectsspatialboth | effects |
data-speed | fastdefaultslow | default |
data-fx-reveal | upfadeblurscale | up |
data-position | fixed sahifa tepasidasticky eng yaqin aylanuvçi blok | fixed |
data-size | mdsm | md |
data-tone | brandaccentup ticker: ösdidown ticker: kamaydi | brand |
data-decimals | 012 | 0 |
Anatomiya
- spring
.fx-springixtiyoriy - reveal
[data-fx-reveal]ixtiyoriy - scroll-progress
.fx-scroll-progressixtiyoriy - ticker
.fx-tickerşart - ticker-track
.fx-ticker__trackixtiyoriy - ticker-digit
.fx-ticker__digitixtiyoriy - ticker-reel
.fx-ticker__reelixtiyoriy - ticker-symbol
.fx-ticker__symixtiyoriy
Holatlar
Klaviatura va kiriş
Hamma davomiylik knob bilan: prefers-reduced-motion va data-fx-motion="none"da harakat yöq (reveal öçadi, ticker darhol almaşadi). Ticker'da ekran öquvçi yakuniy qiymatni öqiydi (lentalar aria-hidden); yangilanişni aytiş kerak bölsa ildizga aria-live="polite". Progress çiziği bezak — aria-hidden.
Kod
AI uçun: qaçon işlatiladi
- Joy/ölçam özgarişi (panel oçilişi, karta kengayişi) — spatial prujina; rang/şaffoflik — effects.
- Landing va hujjat sahifasida bloklarning paydo bölişi; uzun maqolada öqiş progressi.
- Dashboard KPI qiymati yangilanganda (jonli tuşum, sotuvlar soni).
- Röyxat elementlarining ketma-ket kirişi →
list - Vazifa bajariliş foizi →
progress - Özgariş foizi belgisi →
delta - transition'da xom ms yoki cubic-bezier yozmang — --fx-spring-* juftligini işlating.
- Rang va şaffoflikka sakrovçi (spatial) prujina bermang — u faqat joy, ölçam va buriliş uçun.
- Muhim kontentni data-fx-reveal ortiga yaşirmang deb qörqmang — qöllanmasa darhol körinadi; lekin birinçi ekrandagi (LCP) blokka reveal qöymang.
- Raqamni har soniyada aylantirmang — ticker qiymat haqiqatan özgarganda işlaydi.
npx foxui add motion
<div class="fx-scroll-progress" data-position="sticky" aria-hidden="true"></div>
<div class="fx-stat" style="max-inline-size: 18rem">
<div class="fx-stat__label">Bugungi tuşum</div>
<div class="fx-stat__value"><span class="fx-ticker" data-fx-ticker data-value="48750000" data-from="0" data-trend>48 750 000</span> <small>söm</small></div>
<div class="fx-stat__hint">Har 5 daqiqada yangilanadi</div>
</div>
<button class="fx-btn" type="button" onclick="const t=document.querySelector('[data-fx-ticker]');t.dataset.value=+t.dataset.value+1250000">Tölov qöşiş</button>
<section data-fx-reveal="up" style="margin-block-start: var(--fx-space-6)">
<h3 class="fx-type" data-role="title-lg">Yangi mijozlar</h3>
<p class="fx-type">Oktabr oyida 42 ta yangi mijoz qöşildi — eng köpi Samarqand filialida.</p>
</section>
<div class="fx-card fx-spring" data-spring="both" style="max-inline-size: 18rem" data-fx-reveal="blur">Karta xiralikdan çiqadi</div>Tokenlar: --fx-bg-brand-solid --fx-duration-stagger --fx-ease-bounce --fx-ease-emphasized --fx-ease-enter --fx-ease-spring --fx-ease-standard --fx-fg-error --fx-fg-success --fx-knob-motion --fx-line-height-tight --fx-motion-base --fx-motion-fast --fx-motion-scale-enter --fx-motion-shift-lg --fx-motion-shift-md --fx-motion-slow --fx-motion-slower --fx-space-1 --fx-space-2 --fx-spring-effects-default --fx-spring-effects-fast --fx-spring-effects-slow --fx-spring-spatial-default --fx-spring-spatial-fast --fx-spring-spatial-slow --fx-viz-accent --fx-z-sticky