Körsatiş · molecule
Boğlovçi nur
Integratsiya 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. Boğlanişlar bitta atributda: data-links="sayt>crm, bot>crm, crm>1c" (`<` — teskari yönaliş). Çiziqlarni foxui.js çizadi va ölçam özgarsa qayta hisoblaydi; oxirida kiçik strelka — harakatsiz rejimda ham yönaliş körinadi. Joylaşuv: 3 ustun (manbalar · markaz · natija) yoki data-layout="row".
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-links | a>b, c<d boğlanişlar röyxati | — |
data-size | lg markaziy tugun | md |
data-tone | accent | brand |
data-layout | row bitta qator | columns |
Anatomiya
- root
.fx-beamşart - column
.fx-beam__colixtiyoriy - node
.fx-beam__nodeşart - label
.fx-beam__labelixtiyoriy - svg
.fx-beam__svgixtiyoriy - track
.fx-beam__trackixtiyoriy - glow
.fx-beam__glowixtiyoriy - arrow
.fx-beam__arrowixtiyoriy
Holatlar
Klaviatura va kiriş
Ildiz role="img" va aria-label bilan butun oqimni bir jumlada aytadi; SVG çiziqlar aria-hidden. Nur faqat körinişda yuguradi; prefers-reduced-motion va data-fx-motion="calm|none" — nur yöq, çiziq va strelka statik. forced-colors'da çiziq CanvasText.
Kod
AI uçun: qaçon işlatiladi
- Landing sahifasidagi «integratsiyalar» bölimi: qaysi manbadan qayerga ma'lumot oqadi.
- Onboarding jarayonida ulaniş holatini körsatiş (bot → CRM).
npx foxui add beam
<div class="fx-beam" data-fx-beam data-links="sayt>crm, bot>crm, dokon>crm, crm>1c, crm>hisobot" role="img" aria-label="Sayt, Telegram bot va dökon arizalari CRM'ga tuşadi; CRM 1C va hisobotlarga uzatadi">
<div class="fx-beam__col">
<span class="fx-beam__node" data-node="sayt"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24Zm87.62 96h-39.83c-1.79-36.51-15.85-62.33-27.38-77.6A88.19 88.19 0 0 1 215.62 120ZM96.23 136h63.54c-2.31 41.61-22.23 67.11-31.77 77-9.55-9.9-29.46-35.4-31.77-77Zm0-16c2.31-41.61 22.23-67.11 31.77-77 9.55 9.93 29.46 35.43 31.77 77Zm52.18 93.6c11.53-15.27 25.59-41.09 27.38-77.6h39.83a88.19 88.19 0 0 1-67.21 77.6Z"/></svg><span class="fx-beam__label">Sayt</span></span>
<span class="fx-beam__node" data-node="bot"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M227.32 28.68a16 16 0 0 0-15.66-4.08h-.15L19.57 82.84a16 16 0 0 0-2.49 29.8L102 154l41.3 84.87a15.86 15.86 0 0 0 14.44 9.13q.69 0 1.38-.06a15.88 15.88 0 0 0 14-11.51l58.2-191.94v-.15a16 16 0 0 0-4-15.66ZM157.83 232l-.05.14L118 150.56l40.86-40.85a8 8 0 0 0-11.32-11.32L106.69 139.27 25.82 98.22l.14-.05L216 40Z"/></svg><span class="fx-beam__label">Telegram bot</span></span>
<span class="fx-beam__node" data-node="dokon"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M232 96a7.89 7.89 0 0 0-.3-2.2l-14.35-50.2A16.07 16.07 0 0 0 202 32H54a16.07 16.07 0 0 0-15.35 11.6L24.31 93.8A7.89 7.89 0 0 0 24 96v16a40 40 0 0 0 16 32v72a8 8 0 0 0 8 8h160a8 8 0 0 0 8-8v-72a40 40 0 0 0 16-32Zm-16 16a24 24 0 0 1-48 0v-8h48Zm-128-8h64v8a24 24 0 0 1-48 0Zm-48 8v-8h48v8a24 24 0 0 1-48 0Zm160 96H56v-57.39a40.53 40.53 0 0 0 8 .79 40 40 0 0 0 32-16 40 40 0 0 0 64 0 40 40 0 0 0 32 16 40.53 40.53 0 0 0 8-.79Z"/></svg><span class="fx-beam__label">Dökon</span></span>
</div>
<span class="fx-beam__node" data-node="crm" data-size="lg">CRM<span class="fx-beam__label">Arizalar</span></span>
<div class="fx-beam__col">
<span class="fx-beam__node" data-node="1c">1C<span class="fx-beam__label">Buxgalteriya</span></span>
<span class="fx-beam__node" data-node="hisobot">PDF<span class="fx-beam__label">Hisobot</span></span>
</div>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-surface --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-duration-pulse --fx-ease-standard --fx-font-size-xs --fx-font-weight-regular --fx-font-weight-semibold --fx-radius-circle --fx-shadow-md --fx-shadow-sm --fx-size-icon-lg --fx-size-icon-md --fx-space-1 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-primary --fx-text-tertiary --fx-viz-accent