Segmented 分段选择

AuSegmented 使用连续滑动的材质选中层切换互斥选项。支持左右方向键、Home 和 End，禁用选项不会被选中。

基础用法

当前视图：list；时间范围：本周

<script setup>
import { ref } from 'vue';
import { AuSegmented } from 'aurora-plus';
import { IconLayoutGrid, IconList } from 'aurora-plus/icons';
const view = ref('list');
const period = ref('本周');
const items = [
  { label: '列表', value: 'list', icon: IconList },
  { label: '网格', value: 'grid', icon: IconLayoutGrid },
  { label: '预览', value: 'preview', disabled: true },
];
</script>
<template>
  <div class="segmented-example">
    <AuSegmented v-model="view" :items="items" />
    <AuSegmented v-model="period" :items="['今日', '本周', '本月']" fill />
    <AuSegmented model-value="只读" :items="['只读', '编辑']" size="small" disabled />
    <p>当前视图：{{ view }}；时间范围：{{ period }}</p>
  </div>
</template>
<style scoped>
.segmented-example { display: grid; justify-items: start; width: min(400px, 100%); gap: 12px; }
.segmented-example p { margin: 0; color: var(--au-color-text-secondary); font-size: 12px; }
</style>

items 可以是字符串或数字数组，也可以是包含 label、value、icon、disabled 的对象数组。各项的值须唯一；无匹配值时不显示选中层。

Segmented API

Attributes

属性	说明	类型	默认值
modelValue	当前值，支持 v-model	string | number	undefined
items	选项数组	Array	[]
valueKey	对象选项的值字段	string	value
size	尺寸：small / default / large；选项高度 24 / 28 / 36px	string	default
disabled	禁用整个选择器	boolean	false
fill	等宽填满容器	boolean	false

Events

事件名	说明	参数
update:modelValue	当前值更新	(value)
change	当前值发生变化	(value, previousValue, item)

Slots

插槽名	说明
item	自定义选项内容，参数 { item, selected }