Segmented セグメント選択

排他的な選択肢の切り替え。ビュー切替え機構に適したコンポーネントです。

基本的な使い方

基本的な使い方

<script setup>
import { ref } from 'vue'
const view = ref('リスト')
</script>

<template>
  <LhSegmented v-model="view" :options="['リスト', 'カード', 'テーブル']" />
</template>

<script>
export default {
  data() {
    return { view: 'リスト' }
  },
}
</script>

<template>
  <LhSegmented v-model="view" :options="['リスト', 'カード', 'テーブル']" />
</template>

無効化された項目と block

無効化された項目

<script setup>
import { ref } from 'vue'
const seg = ref('day')
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: '日', value: 'day' }, { label: '週', value: 'week' }, { label: '月', value: 'month', disabled: true }]"
  />
</template>

<script>
export default {
  data() {
    return { seg: 'day' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: '日', value: 'day' }, { label: '週', value: 'week' }, { label: '月', value: 'month', disabled: true }]"
  />
</template>

コンポーネントレベルの disabled でセレクター全体を無効化します。

グループ全体の無効化

<script setup>
import { ref } from 'vue'
const segDisabled = ref('甲')
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['甲', '乙', '丙']"
  />
</template>

<script>
export default {
  data() {
    return { segDisabled: '甲' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['甲', '乙', '丙']"
  />
</template>

API

LhSegmented Props

プロパティ名	説明	型	デフォルト値
modelValue	現在の値（v-model で制御）	string | number	—
options	選択肢（文字列の省略記法またはオブジェクト）	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	グループ全体を無効化	boolean	false
block	コンテナいっぱいに広げる	boolean	false
sx	sx クイックレイアウトプロパティ	LhSxProps	—

LhSegmented Events

イベント名	説明	コールバック引数
update:modelValue	選択項目の変化時に発火。v-model と組み合わせて使用	(value: string | number)
change	選択項目の変化時に発火（クリック・矢印キーどちらでも発火）	(value: string | number)

アクセシビリティ

• role="radiogroup" + 選択肢 role="radio" + aria-checked
• roving tabindex：矢印キーで移動（無効化された項目はスキップ、先頭と末尾でループ）。Tab キーでフォーカスできるのはフォーカス位置のみ
• 選択ハイライトの背景色は CSS 変数でトランジションする

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/segmented/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhSegmentedProps

export interface LhSegmentedProps {
  /** 現在の値（v-model で制御） */
  modelValue?: LhSegmentedValue
  /** 選択肢（文字列の省略記法またはオブジェクト） */
  options: LhSegmentedInput[]
  disabled?: boolean
  /** コンテナいっぱいに広げる */
  block?: boolean
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhSegmentedValue _{（@lh-ui/share/core/segmented から）}

/** 選択肢の値の型 */
export type LhSegmentedValue = string | number

LhSegmentedInput _{（@lh-ui/share/core/segmented から）}

/** 入力選択肢（文字列の省略記法またはオブジェクト） */
export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

LhSegmentedOption _{（@lh-ui/share/core/segmented から）}

/** 選択肢オブジェクトの形式 */
export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}