Körsatiş · primitive

Xarita markeri

Xarita ustidagi marker (4.206, Base Web «Map Marker», Aceternity «3D Pin»): MapLibre, Leaflet yoki Yandex xaritasiga HTML marker sifatida qöyiladigan tugma. data-type: pin (standart — tomçi şaklli, içida ikon yoki harf, uçi aniq nuqtaga tegadi), price (narx tabletkasi dumli — kvartira, e'lon, yetkaziş narxi; körilgani data-seen bilan xira), dot (nuqta — «Siz şu yerdasiz», data-pulse bilan tölqin), cluster (yaqin markerlar soni, data-size sm/md/lg — bosilsa xarita yaqinlaşadi). Tanlangan — aria-pressed="true": kattaroq, brend rangida, biroz kötariladi va nom yorliği oçiq qoladi. Hover/fokusda nom yorliği (.fx-mapmarker__tip) çiqadi. Rang data-color (6 pastel). Namuna uçun .fx-mapmarker__map — haqiqiy xaritasiz katak fon; joy --fx-mapmarker-x / --fx-mapmarker-y.

beta0.29.0 dan.fx-mapmarkerFaqat CSS

Variantlar

AtributQiymatlarStandart
data-typepin
price narx tabletkasi
dot nuqta
cluster son		pin
data-coloryellow
pink
blue
coral
green
purple		none
data-sizesm
md
lg		md
data-pulseon tölqin (siz şu yerdasiz)off

Anatomiya

  1. map (namuna maydoni).fx-mapmarker__mapixtiyoriy
  2. root (button).fx-mapmarkerşart
  3. body (şakl).fx-mapmarker__bodyşart
  4. glyph (harf).fx-mapmarker__glyphixtiyoriy
  5. tip (nom yorliği).fx-mapmarker__tipixtiyoriy

Holatlar

selectedhover / focus (yorliq)seen (price)

Klaviatura va kiriş

TugmaAmal
TabMarkerlar orasida (DOM tartibida)
Enter, SpaceMarkerni tanlaydi / cluster'ni yaqinlaştiradi

Har bosiladigan marker — <button> (Tab tartibi, Enter/Space), aria-label'da töliq ma'lumot («Kvartira, 2 xona, oyiga 450 ming söm»); tanlov aria-pressed. Körinadigan yorliq aria-hidden (aria-label takrorlamasin). «Siz şu yerdasiz» nuqtasi role="img" — bosilmaydi. Xarita konteyneri role="group" aria-label. Fokus halqasi marker şakli atrofida; tölqin animatsiyasi harakat kamaytirilganda töxtaydi; yuqori kontrast rejimida tizim ranglari. Xaritada markerlar röyxatini (jadval yoki list) alternativ sifatida ham bering.

Naqş: WAI-ARIA APG button · rol button

Kod

AI uçun: qaçon işlatiladi
Işlating
  • Filiallar, dökonlar, kvartiralar, kuryer yoki buyurtma joylaşuvini xaritada körsatiş.
  • Manzil tanlaş va «Men şu yerdaman» nuqtasi.
Işlatmang
  • Raqamlar böyiça hudud xaritasi (issiqlik) → heatmap
  • Oddiy holat nuqtasi → indicator
  • Manzillar röyxati → list
  • Yuzlab markerni birdaniga çizmang — yaqinlarini cluster'ga yiğing (supercluster va h.k.).
  • Tanlanganni faqat rang bilan bildirmang — ölçam, kötariliş va oçiq yorliq ham bor.
  • Markerni <div> qilib qöymang — bosiladigan bölsa <button> (Tab, Enter) va aniq aria-label (manzil, narx).
  • Narx markerida «söm»ni qisqartirib ma'noni yöqotmang — aria-label'da töliq yozing.
npx foxui add mapmarker
<div class="fx-mapmarker__map" role="group" aria-label="Toşkent: «Mehr Klinikasi» filiallari xaritasi">
  <button class="fx-mapmarker" type="button" data-color="green" aria-pressed="false" aria-label="Mehr Klinikasi, Çilonzor filiali" style="--fx-mapmarker-x: 22%; --fx-mapmarker-y: 38%"><span class="fx-mapmarker__body"><span class="fx-mapmarker__glyph">M</span></span><span class="fx-mapmarker__tip" aria-hidden="true">Çilonzor filiali<small>08:00–20:00 · oçiq</small></span></button>
  <button class="fx-mapmarker" type="button" data-color="blue" aria-pressed="true" aria-label="Mehr Klinikasi, Yunusobod filiali — tanlangan" style="--fx-mapmarker-x: 48%; --fx-mapmarker-y: 30%"><span class="fx-mapmarker__body"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21V8l8-5 8 5v13M9 21v-6h6v6"/></svg></span><span class="fx-mapmarker__tip" aria-hidden="true">Yunusobod filiali<small>Boş ofis · 24/7</small></span></button>
  <button class="fx-mapmarker" type="button" data-color="coral" aria-pressed="false" aria-label="Mehr Klinikasi, Mirzo Ulugʻbek filiali" style="--fx-mapmarker-x: 70%; --fx-mapmarker-y: 62%"><span class="fx-mapmarker__body"><span class="fx-mapmarker__glyph">M</span></span><span class="fx-mapmarker__tip" aria-hidden="true">Mirzo Ulugʻbek filiali<small>Bugun yopiq</small></span></button>
  <button class="fx-mapmarker" type="button" data-type="price" aria-pressed="false" aria-label="Kvartira, 2 xona, oyiga 450 ming söm" style="--fx-mapmarker-x: 35%; --fx-mapmarker-y: 78%"><span class="fx-mapmarker__body"><span>450 ming</span></span></button>
  <button class="fx-mapmarker" type="button" data-type="price" aria-pressed="false" aria-label="Kvartira, 3 xona, oyiga 1,2 million söm — körilgan" style="--fx-mapmarker-x: 58%; --fx-mapmarker-y: 82%" data-seen><span class="fx-mapmarker__body"><span>1,2 mln</span></span></button>
  <button class="fx-mapmarker" type="button" data-type="cluster" data-size="lg" aria-label="Sergeli tumanida 24 ta joy — yaqinlaştiriş" style="--fx-mapmarker-x: 84%; --fx-mapmarker-y: 24%"><span class="fx-mapmarker__body"><span>24</span></span></button>
  <button class="fx-mapmarker" type="button" data-type="cluster" data-size="sm" aria-label="Olmazor tumanida 5 ta joy — yaqinlaştiriş" style="--fx-mapmarker-x: 12%; --fx-mapmarker-y: 72%"><span class="fx-mapmarker__body"><span>5</span></span></button>
  <span class="fx-mapmarker" data-type="dot" data-pulse role="img" aria-label="Siz şu yerdasiz" style="--fx-mapmarker-x: 52%; --fx-mapmarker-y: 58%"><span class="fx-mapmarker__body"></span></span>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-control-h-sm --fx-duration-pulse --fx-ease-spring --fx-ease-standard --fx-fg-info --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-knob-motion-loop --fx-mapmarker-x --fx-mapmarker-y --fx-motion-base --fx-motion-fast --fx-motion-press --fx-motion-shift-sm --fx-radius-circle --fx-radius-control --fx-radius-pill --fx-radius-surface --fx-shadow-md --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-on-brand --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-viz-grid --fx-z-raised

Ş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.
Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)