ui-labo / ynetlabo

yn-prefecture-picker

都道府県 Picker

日本地図から都道府県・エリアを選びます。地図の形状は公有ドメインのデータから 自前で生成しており、外部のライブラリもタイルサーバも使いません。

実物
  • mode="dropdown" のときは上の枠を押すと開きます。600px 未満では下から出るシートになります。
  • selectionLevel="prefecture" はエリアを選ぶと拡大し、そこから県を選ぶ 2 段階です。
  • 「とうきょう」「tokyo」「toukyou」「東京」のどれでも同じ県に届きます。

docs/specs/prefecture-picker

API

この表は spec から生成しています。実装と食い違うことがないよう、手書きしていません。

名前型既定値説明
value単数: 上表の表現 | null / 複数: その配列null / []選択中の値
selectionLevel"prefecture" | "area""prefecture"選ぶ単位
multiplebooleanfalse複数選択
codeFormat上表参照"jis"value と変更イベントの表現
grouping上表参照 | カスタム定義"region9"区切り
layout"list" | "map""map"表示方式
items都道府県の配列埋め込みスナップショットデータの差し替え
placeholderstring"選択してください"未選択時の表示
disabledbooleanfalse操作不可
requiredbooleanfalse未選択を不正とする
invalidbooleanfalse外部からエラー表示を強制する
display"name" | "shortName""name"トリガへ表示する表記
searchablebooleantrue絞り込み入力を出す（"area" では無効）
mode"dropdown" | "inline""dropdown"表示のしかた
transition"auto" | "fade" | "slide" | "none""auto"開閉の見せ方（"inline" では開閉が無い）
footer"auto" | "none" | count / clear / done の並び"auto"フッタに出す部品
popoverMinWidth長さ272pxポップオーバー幅の下限
popoverMaxWidth長さ420pxポップオーバー幅の上限
namestring—フォーム送信時のフィールド名（Web のみ）

イベント

値が変わったとき change を発火し、event.detail.value に codeFormat に従った値（複数選択では配列）を渡します。 選択が変わっていない場合は発火しません。

codeFormat

値の表現

やり取りする値の形はパラメータで選べます。既定は JIS の 2 桁コードです。

値selectionLevel="prefecture"selectionLevel="area"
"jis"（既定）"13""kanto"
"jisNumber"13"kanto"
"ynetlabo""13-TOK""3-KTO"
"iso""JP-13""kanto"
"name""東京都""関東"
"shortName""東京""関東"

grouping

区切り

地方区分の流儀そのものを切り替えます。region9 と region11 では 三重県の所属が変わりますが、これは意図的なものです。

値区切りグループ数
"region9"（既定）ynetlabo API の地方区分をそのまま使う9
"region8"標準 8 地方区分（沖縄を九州に含める）8
"region11"中部を細分し、三重を東海に移す11
"kana"五十音（あ行〜わ行）10
"none"区切らない0

mode="inline"

画面に埋め込む

選択そのものが主役の画面では、ダイアログを挟まず常に表示したままにできます。 親がクリア・確定のボタンを持っているなら、Picker 側のフッタは消せます。

<yn-prefecture-picker
  mode="inline"
  selection-level="area"
  multiple
  code-format="ynetlabo"
  footer="count"
  style="--prefecture-picker-map-max-height: 300px">
</yn-prefecture-picker>