新着
マップ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…
An abstract grid of region tiles you can pick from, with the choice announced below.
<!-- Static snapshot: "Europe" is the pressed tile. Wire aria-pressed to state in a framework. -->
<div class="w-full rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950">
<div role="group" aria-label="Select a region" class="grid grid-cols-2 gap-2 sm:grid-cols-3">
<button type="button" aria-pressed="false" class="flex min-h-[44px] items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800">Americas</button>
<button type="button" aria-pressed="true" class="flex min-h-[44px] items-center justify-center rounded-lg border border-blue-600 bg-blue-600 px-3 py-2 text-sm font-medium text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-blue-500 dark:bg-blue-500">Europe</button>
<button type="button" aria-pressed="false" class="flex min-h-[44px] items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800">Africa</button>
<button type="button" aria-pressed="false" class="flex min-h-[44px] items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800">Middle East</button>
<button type="button" aria-pressed="false" class="flex min-h-[44px] items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800">Asia Pacific</button>
<button type="button" aria-pressed="false" class="flex min-h-[44px] items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800">Oceania</button>
</div>
<p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Serving <span class="font-semibold text-gray-900 dark:text-gray-100">Europe</span></p>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
regions | Region[] | - | Regions |
defaultSelectedId | string | - | Default selected id |
onSelect | (id: string) => void | - | ユーザーが選択したメニュー項目を引数に呼ばれます。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Pass `regions` and an optional `defaultSelectedId`, and read the choice via `onSelect`. Each tile is a toggle button carrying `aria-pressed`, sized to a 44px minimum tap target; the grid goes two-up on phones and three-up from `sm`.