Körsatiş · molecule
Orbita
Markaz (mahsulot logosi) atrofida bir yoki ikki halqada aylanuvçi ikonlar (4.78) — «qaysi xizmatlar bilan işlaydi» yoki modullar töplamini körsatiş uçun. Töliq CSS: halqa aylanadi, ikon teskari aylanib tik turadi, joyi avtomatik (halqada 8 tagaça). Çeksiz aylaniş faqat körinişda, hover yoki fokusda töxtaydi; harakat kamaytirilganda harakatsiz.
Savdo
CRM
CRM
- Telegram
- IP-telefoniya
- Tölov tizimi
- Dökon
- Hisobotlar
- Mijozlar
- Kalendar
- Bitimlar
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-ring | inner içki halqa, teskari aylanadiouter | outer |
data-speed | slow | normal |
data-size | sm | md |
data-color | bluegreenpinkyellowpurple | surface |
Anatomiya
- root
.fx-orbitşart - center
.fx-orbit__centerixtiyoriy - ring
.fx-orbit__ringşart - item
.fx-orbit__itemşart - icon
.fx-orbit__iconşart
Holatlar
inviewpaused
Klaviatura va kiriş
Har halqa — röyxat (ul, aria-label), har ikon yonida fx-sr-only nom (title — siçqonça uçun). Aylaniş faqat körinişda, hover/fokusda töxtaydi (WCAG 2.2.2 — 5 soniyadan uzun harakat töxtatiladi); reduced-motion va data-fx-motion="calm|none" — statik.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing sahifasida integratsiyalar yoki modullar töplami.
- Mahsulot «ekotizimi» bölimi.
Işlatmang
- Logolar qatori (mijozlar) →
logos - Integratsiya oqimi (qayerdan qayerga) →
beam - Halqada 8 tadan köp ikon qöymang — ikki halqaga böling yoki röyxat işlating.
- Orbitadagi ikonlarni bosiladigan asosiy amal qilmang — ular aylanadi; havola kerak bölsa, ostida röyxat bering.
- Bitta sahifada bittadan ortiq orbita işlatmang.
npx foxui add orbit
<div class="fx-orbit" data-fx-orbit>
<div class="fx-orbit__center">Savdo<br>CRM</div>
<ul class="fx-orbit__ring" data-ring="outer" aria-label="Integratsiyalar">
<li class="fx-orbit__item"><span class="fx-orbit__icon" data-color="blue" title="Telegram"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M228.88,26.19a9,9,0,0,0-9.16-1.57L17.06,103.93a14.22,14.22,0,0,0,2.43,27.21L72,141.45V200a15.92,15.92,0,0,0,10,14.83,15.91,15.91,0,0,0,17.51-3.73l25.32-26.26L165,220a15.88,15.88,0,0,0,10.51,4,16.3,16.3,0,0,0,5-.79,15.85,15.85,0,0,0,10.67-11.63L231.77,35A9,9,0,0,0,228.88,26.19Zm-61.14,36L78.15,126.35l-49.6-9.73ZM88,200V152.52l24.79,21.74Zm87.53,8L92.85,135.5l119-85.29Z"/></svg><span class="fx-sr-only">Telegram</span></span></li>
<li class="fx-orbit__item"><span class="fx-orbit__icon" title="Email"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"/></svg><span class="fx-sr-only">Email</span></span></li>
<li class="fx-orbit__item"><span class="fx-orbit__icon" data-color="green" title="IP-telefoniya"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M144.27,45.93a8,8,0,0,1,9.8-5.66,86.22,86.22,0,0,1,61.66,61.66,8,8,0,0,1-5.66,9.8A8.23,8.23,0,0,1,208,112a8,8,0,0,1-7.73-5.94,70.35,70.35,0,0,0-50.33-50.33A8,8,0,0,1,144.27,45.93Zm-2.33,41.8c13.79,3.68,22.65,12.54,26.33,26.33A8,8,0,0,0,176,120a8.23,8.23,0,0,0,2.07-.27,8,8,0,0,0,5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8,8,0,1,0-4.13,15.46Zm81.94,95.35A56.26,56.26,0,0,1,168,232C88.6,232,24,167.4,24,88A56.26,56.26,0,0,1,72.92,32.12a16,16,0,0,1,16.62,9.52l21.12,47.15,0,.12A16,16,0,0,1,109.39,104c-.18.27-.37.52-.57.77L88,129.45c7.49,15.22,23.41,31,38.83,38.51l24.34-20.71a8.12,8.12,0,0,1,.75-.56,16,16,0,0,1,15.17-1.4l.13.06,47.11,21.11A16,16,0,0,1,223.88,183.08Zm-15.88-2s-.07,0-.11,0h0l-47-21.05-24.35,20.71a8.44,8.44,0,0,1-.74.56,16,16,0,0,1-15.75,1.14c-18.73-9.05-37.4-27.58-46.46-46.11a16,16,0,0,1,1-15.7,6.13,6.13,0,0,1,.57-.77L96,95.15l-21-47a.61.61,0,0,1,0-.12A40.2,40.2,0,0,0,40,88,128.14,128.14,0,0,0,168,216,40.21,40.21,0,0,0,208,181.07Z"/></svg><span class="fx-sr-only">IP-telefoniya</span></span></li>
<li class="fx-orbit__item"><span class="fx-orbit__icon" data-color="yellow" title="Tölov tizimi"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,16V88H32V64Zm0,128H32V104H224v88Zm-16-24a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h32A8,8,0,0,1,208,168Zm-64,0a8,8,0,0,1-8,8H120a8,8,0,0,1,0-16h16A8,8,0,0,1,144,168Z"/></svg><span class="fx-sr-only">Tölov tizimi</span></span></li>
<li class="fx-orbit__item"><span class="fx-orbit__icon" title="Dökon"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M232,96a7.89,7.89,0,0,0-.3-2.2L217.35,43.6A16.07,16.07,0,0,0,202,32H54A16.07,16.07,0,0,0,38.65,43.6L24.31,93.8A7.89,7.89,0,0,0,24,96h0v16a40,40,0,0,0,16,32v72a8,8,0,0,0,8,8H208a8,8,0,0,0,8-8V144a40,40,0,0,0,16-32V96ZM54,48H202l11.42,40H42.61Zm50,56h48v8a24,24,0,0,1-48,0Zm-16,0v8a24,24,0,0,1-35.12,21.26,7.88,7.88,0,0,0-1.82-1.06A24,24,0,0,1,40,112v-8ZM200,208H56V151.2a40.57,40.57,0,0,0,8,.8,40,40,0,0,0,32-16,40,40,0,0,0,64,0,40,40,0,0,0,32,16,40.57,40.57,0,0,0,8-.8Zm4.93-75.8a8.08,8.08,0,0,0-1.8,1.05A24,24,0,0,1,168,112v-8h48v8A24,24,0,0,1,204.93,132.2Z"/></svg><span class="fx-sr-only">Dökon</span></span></li>
<li class="fx-orbit__item"><span class="fx-orbit__icon" data-color="purple" title="Hisobotlar"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"/></svg><span class="fx-sr-only">Hisobotlar</span></span></li>
</ul>
<ul class="fx-orbit__ring" data-ring="inner" aria-label="Modullar">
<li class="fx-orbit__item"><span class="fx-orbit__icon" title="Mijozlar"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/></svg><span class="fx-sr-only">Mijozlar</span></span></li>
<li class="fx-orbit__item"><span class="fx-orbit__icon" data-color="pink" title="Kalendar"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg><span class="fx-sr-only">Kalendar</span></span></li>
<li class="fx-orbit__item"><span class="fx-orbit__icon" title="Bitimlar"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M216,48H40a8,8,0,0,0-8,8V208a16,16,0,0,0,16,16H88a16,16,0,0,0,16-16V160h48v16a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V56A8,8,0,0,0,216,48ZM88,208H48V128H88Zm0-96H48V64H88Zm64,32H104V64h48Zm56,32H168V128h40Zm0-64H168V64h40Z"/></svg><span class="fx-sr-only">Bitimlar</span></span></li>
</ul>
</div>Tokenlar: --fx-bg-category-blue --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-control-h-md --fx-duration-pulse --fx-font-size-sm --fx-font-weight-semibold --fx-radius-circle --fx-shadow-md --fx-shadow-sm --fx-size-icon-md --fx-space-12 --fx-text-on-category --fx-text-primary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.