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	—

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
}