Körsatiş · molecule
Yugurik qator (marquee)
Logolar, fikrlar yoki teglar çeksiz suriladigan qator (4.71). Tasma bir marta nusxalanadi (nusxa ekran öquvçidan yaşirin), tezlik uzunlikdan hisoblanadi — har ekranda bir xil (data-speed, px/soniya, standart 40). Hover yoki klaviatura fokusi kelganda töxtaydi, ekrandan çiqsa pauza. Ikki çetda yumşoq söniş. Vertikal variant — fikrlar ustuni uçun; data-direction="reverse" — teskari yönaliş (ikki qatorli «qarama-qarşi» bezak). JS bölmasa yoki harakat kamaytirilsa — oddiy gorizontal scroll.
- Çorsu Market
- Navbahor Soft
- Ipak Yöli Lab
- Registon Media
- Tashkent Digital
- Samarqand Travel
- Tugma
- Jadval
- Kalendar
- Grafik
- Forma
- Dialog
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-orientation | vertical ustun; balandlik --fx-marquee-height | horizontal |
data-direction | reverse teskari yönaliş | normal |
data-gap | smlg | md |
data-pause | none hover'da ham töxtamaydi (faqat bezak qatori) | hover |
Anatomiya
- root
.fx-marqueeşart - track
.fx-marquee__trackşart - toggle (pauza tugmasi)
.fx-marquee__toggleixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Qator içidagi havolaga fokus — harakat töxtaydi |
| Enter, Space | Pauza tugmasi harakatni töxtatadi / davom ettiradi |
Nusxa tasma aria-hidden va inert — ekran öquvçi har bandni bir marta öqiydi, Tab nusxaga kirmaydi. Hover va :focus-within'da töxtaydi; 5 soniyadan uzoq harakat uçun pauza tugmasi (.fx-marquee__toggle, aria-controls + aria-pressed) — WCAG 2.2.2. prefers-reduced-motion va data-fx-motion="none"da harakat yöq, oddiy scroll.
Kod
AI uçun: qaçon işlatiladi
- Mijoz logolari, integratsiyalar yoki komponentlar röyxati — «köp» ekanini his ettiriş.
- Fikrlar ustuni (vertikal) — landing pastida ijtimoiy isbot.
- Foydalanuvçi boşqaradigan slaydlar →
carousel - Logolarni harakatsiz körsatiş →
logos - Muhim ma'lumotni (narx, şart) yugurik qatorga qöymang — öquvçi uşlab ololmaydi.
- Bitta sahifada ikkitadan ortiq yugurik qator qöymang.
- Bosiladigan havolalarni juda tez qatorga qöymang — hover'da töxtaydi, lekin data-speed past bölsin.
npx foxui add marquee
<div class="fx-marquee" data-fx-marquee id="mq-logo" aria-label="Bizga işongan jamoalar" role="region">
<ul class="fx-marquee__track">
<li><strong style="font-size:var(--fx-font-size-lg)">Çorsu Market</strong></li>
<li><strong style="font-size:var(--fx-font-size-lg)">Navbahor Soft</strong></li>
<li><strong style="font-size:var(--fx-font-size-lg)">Ipak Yöli Lab</strong></li>
<li><strong style="font-size:var(--fx-font-size-lg)">Registon Media</strong></li>
<li><strong style="font-size:var(--fx-font-size-lg)">Tashkent Digital</strong></li>
<li><strong style="font-size:var(--fx-font-size-lg)">Samarqand Travel</strong></li>
</ul>
</div>
<div class="fx-marquee" data-fx-marquee data-direction="reverse" data-gap="sm" data-speed="30" style="margin-block-start:var(--fx-space-4)">
<ul class="fx-marquee__track">
<li><span class="fx-badge" data-color="purple" data-size="lg">Tugma</span></li>
<li><span class="fx-badge" data-color="blue" data-size="lg">Jadval</span></li>
<li><span class="fx-badge" data-color="green" data-size="lg">Kalendar</span></li>
<li><span class="fx-badge" data-color="pink" data-size="lg">Grafik</span></li>
<li><span class="fx-badge" data-color="yellow" data-size="lg">Forma</span></li>
<li><span class="fx-badge" data-color="coral" data-size="lg">Dialog</span></li>
</ul>
</div>
<button class="fx-btn fx-marquee__toggle" data-variant="ghost" data-size="sm" type="button" aria-controls="mq-logo" aria-pressed="false" style="margin-block-start:var(--fx-space-2)">Harakatni töxtatiş</button>Tokenlar: --fx-duration-pulse --fx-marquee-height --fx-space-12 --fx-space-4 --fx-space-8 --fx-text-primary