Map Viewv1.0.0
قابِ نقشه برای صفحه‌هایی که مکان مهم است: شعبه‌ها، داروخانه‌های نزدیک، انتخابِ نشانی و پیگیریِ پیک. نشانگرها با درصدِ x و y روی قاب می‌نشینند و سه حالت دارند: pin برای یک مکان، count برای شمارِ مکان‌های یک ناحیه و you برای موقعیتِ کاربر. بدونِ src، تصویرِ پیش‌فرضِ دیگ با توکن‌ها کشیده می‌شود و در دارک بی‌فیلتر تیره است.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/map-view.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/map-view.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/map-view.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/map-view.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { MapMarker, MapView, MapViewOverlay } from "@/components/ui/map-view"این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
MapView قاب است (نسبتِ پیش‌فرضِ ۱۶ به ۹، قابلِ تغییر با className) و MapMarkerها فرزندِ آن‌اند. مختصاتِ نشانگر فیزیکی است، نه منطقی: x از چپ و y از بالا، و با RTL برعکس نمی‌شود چون نقشه جهتِ نوشتار ندارد.
MapView کتابخانهٔ نقشه نیست و جابه‌جایی و زوم ندارد. برای نقشهٔ تعاملیِ واقعی کتابخانهٔ نقشه را داخلِ قاب بگذارید و MapMarker را فقط برای ظاهرِ یکدستِ نشانگرها به کار ببرید؛ یا با src تصویرِ ثابتِ نقشه را نشان دهید.
دسترس‌پذیری
- نشانگرهای pin و count دکمه‌اند و با Tab در دسترس‌اند؛ label نامِ مکان یا «۷ داروخانه در این ناحیه» را به صفحه‌خوان می‌گوید و aria-pressed انتخاب را.
- نشانگرِ you تعاملی نیست و فقط با role=img اعلام می‌شود.
- نقشه هیچ‌وقت تنها راهِ انتخاب نیست: کنارش فهرستِ همان مکان‌ها با نام، فاصله و وضعیت بیاید (نمونهٔ «نقشه و فهرست»).
- نشانگرِ فعال با رنگ و اندازه فرق می‌کند، نه فقط با رنگ.
- MapViewOverlay همیشه بالای نشانگرهاست تا هیچ نشانگری متنِ کارت را نپوشاند.
مرجع API
MapView
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| label | string | "نقشه" | متنِ جایگزینِ نقشه برای صفحه‌خوان. |
| src | string | — | تصویرِ نقشهٔ واقعی؛ بدونِ آن تصویرِ پیش‌فرضِ دیگ کشیده می‌شود. |
| className | string | — | نسبت (aspect-[2/1]) و اندازه؛ پیش‌فرض aspect-[16/9]. |
MapViewOverlay
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| position | "top" | "bottom" | "bottom" | کارت یا نوار بالای نشانگرها، چسبیده به پایین یا بالای قاب. |
MapMarker
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| x | number | — | فاصله از لبهٔ چپ، درصد. |
| y | number | — | فاصله از لبهٔ بالا، درصد. |
| label | string | — | نامِ دسترس‌پذیرِ نشانگر. |
| variant | "pin" | "count" | "you" | "pin" | یک مکان، شمارِ ناحیه، یا موقعیتِ کاربر. |
| active | boolean | false | مکانِ انتخاب‌شده؛ نارنجی و بزرگ‌تر. |
| children | React.ReactNode | — | شماره، شمار یا آیکون. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
نقشه و فهرست
یک state برای نقشه و RadioCardها؛ لمسِ نشانگر کارت را انتخاب می‌کند و برعکس.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
پیگیریِ پیک
مبدأ با pin، مقصد با you، و کارتِ وضعیت در MapViewOverlay که همیشه بالای نشانگرهاست؛ نشانگرها را بالاتر از کارت بچینید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| نقشه و فهرست | داروخانه‌ها یا شعبه‌های نزدیک |
| پیگیریِ پیک | سفارشِ در راه |
دستورالعمل استفاده
نقشه کنارِ فهرست، نه به‌جای آن
انجام بده
فهرستِ مکان‌ها با نام، فاصله و باز یا بسته بودن کنارِ نقشه، با انتخابِ مشترک.
انجام نده
نقشهٔ تنها با نشانگرهای بی‌نام که کاربر باید یکی‌یکی لمس کند تا بفهمد کدام باز است.