新着
マップDotted World Map
A stylised dotted-continent world drawn in inline SVG, with labelled city pins and no tile server.
#map#world#dotted
3 個のフレームワーク中級
Loading…
A zig-zagging SVG route with numbered stops above an ordered list of directions.
<div class="w-full rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950">
<div class="relative w-full overflow-hidden rounded-xl bg-gray-50 dark:bg-gray-900">
<svg viewBox="0 0 300 120" role="img" aria-label="Route with 4 stops" class="h-auto w-full text-gray-300 dark:text-gray-700">
<polyline points="30,80 120,35 210,80 270,35" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 8" />
<circle cx="30" cy="80" r="10" class="fill-blue-600 dark:fill-blue-500" />
<text x="30" y="84" text-anchor="middle" class="fill-white text-[11px] font-semibold">1</text>
<circle cx="120" cy="35" r="10" class="fill-blue-600 dark:fill-blue-500" />
<text x="120" y="39" text-anchor="middle" class="fill-white text-[11px] font-semibold">2</text>
<circle cx="210" cy="80" r="10" class="fill-blue-600 dark:fill-blue-500" />
<text x="210" y="84" text-anchor="middle" class="fill-white text-[11px] font-semibold">3</text>
<circle cx="270" cy="35" r="10" class="fill-blue-600 dark:fill-blue-500" />
<text x="270" y="39" text-anchor="middle" class="fill-white text-[11px] font-semibold">4</text>
</svg>
</div>
<ol class="mt-4 space-y-3">
<li class="flex gap-3">
<span class="flex h-6 w-6 flex-none items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white dark:bg-blue-500">1</span>
<span><span class="block text-sm font-medium text-gray-900 dark:text-gray-100">Head north on Market St</span><span class="block text-xs text-gray-500 dark:text-gray-400">400 m</span></span>
</li>
<li class="flex gap-3">
<span class="flex h-6 w-6 flex-none items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white dark:bg-blue-500">2</span>
<span><span class="block text-sm font-medium text-gray-900 dark:text-gray-100">Turn right onto 5th Ave</span><span class="block text-xs text-gray-500 dark:text-gray-400">1.2 km</span></span>
</li>
</ol>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
steps | RouteStep[] | - | プロセスの手順（順序どおり）。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Pass `steps` as `{ id, label, detail }`; the stops are spread across the SVG viewBox and numbered automatically, and the same list renders as an accessible `<ol>` beneath. The route line and stop numbers stay in sync with the list.