Segmented セグメント選択

セグメントコントローラーです。オプションは文字列による簡易記法と { value, label, disabled } オブジェクト記法をサポートし、block でコンテナの幅いっぱいに広げられます。

セグメント選択

<template>
  <div class="demo-col" style="gap: 20px">
    <LhSegmented v-model="view" :options="['リスト', 'グリッド', '画冊']" />
    <p class="demo-note">文字列配列の簡易記法：{{ view }}</p>
    <LhSegmented v-model="dynasty" :options="options" />
    <p class="demo-note">オブジェクト記法（disabled 項を含む）：{{ dynasty }}</p>
    <LhSegmented v-model="view" :options="['リスト', 'グリッド', '画冊']" disabled />
    <LhSegmented v-model="view" :options="['リスト', 'グリッド', '画冊']" block />
    <p class="demo-note">block でコンテナの幅いっぱいに広げます</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    view: 'リスト',
    dynasty: 'tang',
    options: [
      { value: 'tang', label: '唐' },
      { value: 'song', label: '宋' },
      { value: 'yuan', label: '元' },
      { value: 'ming', label: '明', disabled: true },
    ],
  }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	現在の値（model: modelValue/input）	string \| number	—
options	オプション（文字列またはオブジェクト、必須）	(string \| number \| { value, label, disabled? })[]	—
disabled	全体を無効化	boolean	false
block	コンテナの幅いっぱいに広げる	boolean	false
sx	sx によるレイアウト省略記法	—	—

Events

input（v-model、パラメータ (val)）、change (val)。

アクセシビリティ

ルート要素は role="radiogroup"、各項目は role="radio" + aria-checked です。キーボードの ←/→ で切り替えます。