Ma'lumot · compound
Haqiqiy globus
Haqiqiy Yer xaritasi globus körinişida: nuqtalar (şahar, bekat, filial) va ular orasidagi katta aylana yoylari — yöl, karvon, yetkaziş marşruti. Sekin aylanadi, tegilganda töxtaydi; ⤢ bilan butun ekran, Esc bilan qaytadi; telefonda kvadrat. Okean, yöl va nuqta ranglari tokenlardan — rang mavzusi va qoronği rejim almaşsa xarita ham almaşadi. Xarita kutubxonasi (MapLibre GL, BSD) loyihaning özida: foxui/globus faqat uzatilgan maplibregl bilan işlaydi. Lazy rejim: avval yengil joy egasi, bosilganda yuklanadi — sahifa tezligi saqlanadi. ⤢ tugmasi — fx-btn: npx foxui sync uni özi qöşadi; CSS'ni qölda alohida ulasangiz, button.css ham kerak. Tiplar — globus.d.mts. Jonli namuna (Buyuk ipak yöli): /namuna/globus/.
Anatomiya
- root
.fx-globusşart - map
.fx-globus__xaritaşart - fullscreen
.fx-globus__kattaixtiyoriy - placeholder
.fx-globus__joyixtiyoriy - sphere
.fx-globus__sharixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Esc | Butun ekran oynasini yopadi, fokus oçgan tugmaga qaytadi |
| Strelkalar, + − | Xaritani suriş va yaqinlaştiriş (MapLibre) |
Ildiz role="region" va aria-label — xarita nima haqida. Nuqtalar xaritadan taşqari matn röyxatida ham bölişi kerak (ekran öquvçi canvas'ni körmaydi); flyTo() röyxat tugmalaridan çaqiriladi. Butun ekran — modal oyna: role="dialog" aria-modal, fokus ✕ tugmasiga ötadi, Tab oyna içida aylanadi (orqadagi sahifaga çiqmaydi), Esc yoki ✕ yopadi va fokus oçgan tugmaga qaytadi. Harakatni kamaytiriş rejimida aylaniş yöq.
Kod
AI uçun: qaçon işlatiladi
- Bir neça mamlakat yoki qit'aga yoyilgan nuqtalar va ular orasidagi yöl: tarixiy marşrut, yetkaziş, filiallar.
- Ta'lim va hikoya sahifasi — foydalanuvçi globusni özi aylantirib, nuqtaga uçib körsin.
- Raqamlarni mintaqa böyiça taqqoslaş →
chart - Tugun va boğlanişlar (xaritasiz) →
graph - Xarita kutubxonasini sahifa oçilişida yuklamang, agar globus birinçi ekranda bölmasa — globusLazy() ni işlating.
- Okean yoki nuqta rangini qölda yozmang — viz.map-* tokenlari rang mavzusi va rejim bilan özi almaşadi.
- Mualliflik belgisini (OpenStreetMap, OpenFreeMap) yaşirmang — litsenziya talabi; u yiğiq ⓘ bölib turadi.
- Faqat bitta manzil körsatiş uçun globus işlatmang — oddiy xarita yoki manzil matni yetarli.
npx foxui add globus
<div class="fx-globus" role="region" aria-label="Buyuk ipak yöli xaritasi">
<div class="fx-globus__xarita">
<div class="fx-globus__joy">
<span class="fx-globus__shar" aria-hidden="true"></span>
<button class="fx-btn" data-variant="primary" type="button">Globusni oçiş</button>
</div>
</div>
</div>Tokenlar: --fx-bg-surface --fx-duration-pulse --fx-ease-standard --fx-radius-circle --fx-radius-surface --fx-shadow-lg --fx-space-12 --fx-space-3 --fx-space-4 --fx-viz-map-space --fx-viz-map-water --fx-z-modal