Ma'lumot · compound
Globus va nuqtali xarita
Nuqtalardan iborat globus yoki tekis xarita (4.79): şaharlar — marker, boğlanişlar — yoy (globusda katta aylana böylab), ustidan yönaliş bölagi yuguradi. Ma'lumot sahifada matn: içidagi röyxat (data-lat, data-lon, data-to="Şahar, …") — canvas faqat köriniş. Globus sekin aylanadi, hover/fokusda töxtaydi, sudrab yoki ← → ↑ ↓ bilan aylantiriladi; data-view="map" — tekis 2:1 xarita. Quruqlik konturi qöpol (bezak darajasida) — aniq geografiya uçun emas. data-label="hover" (20.10): köp markerda nom faqat kursor yaqinlaşganda çiqadi, röyxat körinişdan yaşirinadi (ekran öquvçida qoladi). Sahna JS bilan qöşilgunça joyi oldindan band — sahifa siljimaydi (CLS).
- Toşkent — boş ofis
- Moskva — 2 ombor
- Dubay — hamkor
- Istanbul — import
- Seul — yetkazib beruvçi
- Toşkent — boş ofis
- Moskva — 2 ombor
- Dubay — hamkor
- Istanbul — import
- Seul — yetkazib beruvçi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-view | map tekis nuqtali xarita | globe |
data-tone | accent yoylar aksent rangida | brand |
data-list | hidden röyxat faqat ekran öquvçida | visible |
data-label | hover | list |
Anatomiya
- root
.fx-globeşart - stage
.fx-globe__stageixtiyoriy - canvas
.fx-globe__canvasixtiyoriy - places
.fx-globe__placesşart - tip
.fx-globe__tipixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Globusni aylantiradi (10°) |
| Tab | Globusga fokus — avtomatik aylaniş töxtaydi |
Canvas role="img", aria-label avtomatik: şaharlar va boğlanişlar röyxati; röyxatning özi sahifada matn. Globus fokuslanadi, ← → ↑ ↓ bilan aylanadi; avtomatik aylaniş hover/fokusda töxtaydi, körinmasa çizilmaydi, reduced-motion va data-fx-motion="calm|none" — statik. forced-colors'da tizim ranglari.
Kod
AI uçun: qaçon işlatiladi
- Landing sahifasida «qayerlarda işlaymiz», filiallar va eksport yönalişlari.
- Yetkazib beriş yoki hamkorlar tarmoğini umumiy körsatiş.
- Aniq manzil, yöl yoki hudud (interaktiv xarita) →
card - Mamlakatlar böyiça raqamlar →
chart - Aniq çegaralar, hudud yoki masofani körsatiş uçun işlatmang — kontur qöpol, bu bezak va umumiy manzara.
- 10 tadan köp yoy çizmang — globus çalkaşadi.
- Şaharlar röyxatini olib taşlamang — u ma'lumotning matn şakli (data-list="hidden" bilan faqat közdan yaşiring).
npx foxui add globe
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--fx-space-8);align-items:center">
<figure class="fx-globe" data-fx-globe>
<ul class="fx-globe__places" aria-label="Filiallar va hamkorlar">
<li data-lat="41.31" data-lon="69.24" data-to="Moskva, Dubay, Istanbul, Seul">Toşkent — boş ofis</li>
<li data-lat="55.75" data-lon="37.62">Moskva — 2 ombor</li>
<li data-lat="25.2" data-lon="55.27">Dubay — hamkor</li>
<li data-lat="41.01" data-lon="28.98">Istanbul — import</li>
<li data-lat="37.57" data-lon="126.98">Seul — yetkazib beruvçi</li>
</ul>
<figcaption>Yetkazib beriş tarmoği · 2026</figcaption>
</figure>
<figure class="fx-globe" data-fx-globe data-view="map">
<ul class="fx-globe__places" aria-label="Eksport yönalişlari">
<li data-lat="41.31" data-lon="69.24" data-to="Moskva, Dubay, Istanbul, Seul">Toşkent — boş ofis</li>
<li data-lat="55.75" data-lon="37.62">Moskva — 2 ombor</li>
<li data-lat="25.2" data-lon="55.27">Dubay — hamkor</li>
<li data-lat="41.01" data-lon="28.98">Istanbul — import</li>
<li data-lat="37.57" data-lon="126.98">Seul — yetkazib beruvçi</li>
</ul>
<figcaption>Eksport: 5 mamlakat</figcaption>
</figure>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-page --fx-border-color-default --fx-border-color-focus --fx-border-width-focus --fx-font-size-xs --fx-font-weight-medium --fx-radius-circle --fx-radius-control --fx-shadow-md --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-viz-accent