Select

下拉选择框。@tripo3d/design 重导出 reka-ui 的 Select(SelectRoot 别名)和 SelectValue,并封装了带箭头图标的 SelectTrigger、带内置滚动按钮与 Portal 的 SelectContent 和 SelectItem——全部从 @tripo3d/design 统一导入。

Anatomy

• Select下拉根(SelectRoot 别名),承载 modelValue / open / disabled 状态
  • SelectTrigger触发器,展开时自带箭头旋转动画
  • SelectValue当前选中值的占位显示
  • SelectContent下拉面板,内部已挂载 SelectPortal、SelectViewport 以及上下滚动按钮
  • SelectItem单个选项,必须传 value

无需手动包裹 Portal

SelectContent 内部已自动渲染 SelectPortal 与滚动按钮,用户无需额外引入 SelectPortal。SelectGroup / SelectLabel / SelectSeparator 等高级组合同样从 @tripo3d/design 导入。

基本用法

受控选择

通过 Select 的 v-model 绑定当前值。

当前值: apple

<script setup lang="ts">
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@tripo3d/design';
import { ref } from 'vue';

const fruit = ref('apple');
</script>

<template>
  <Select v-model="fruit">
    <SelectTrigger class="w-50 bg-gray-4">
      <SelectValue placeholder="请选择" />
    </SelectTrigger>
    <SelectContent class="w-50 p-1">
      <SelectItem class="rounded-2 hover:bg-white-5" value="apple">
        Apple
      </SelectItem>
      <SelectItem class="rounded-2 hover:bg-white-5" value="banana">
        Banana
      </SelectItem>
      <SelectItem class="rounded-2 hover:bg-white-5" value="blueberry">
        Blueberry
      </SelectItem>
    </SelectContent>
  </Select>
</template>

禁用项

item disabled

单个选项可独立禁用,仍可被屏幕阅读器识别。

<Select default-value="a">
  <SelectTrigger><SelectValue /></SelectTrigger>
  <SelectContent>
    <SelectItem value="a">可选 A</SelectItem>
    <SelectItem disabled value="b">禁用的 B</SelectItem>
    <SelectItem value="c">可选 C</SelectItem>
  </SelectContent>
</Select>

整体禁用

root disabled

<Select disabled default-value="apple">
  <SelectTrigger class="opacity-50 cursor-not-allowed">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>...</SelectContent>
</Select>

API

Select Props

名称	类型	默认值	说明
modelValue	string | string[]	—	受控值;multiple 为真时使用数组
defaultValue	string | string[]	—	非受控初始值
open	boolean	—	受控展开状态
disabled	boolean	—	整体禁用
multiple	boolean	—	是否多选

其余 props 透传至 reka-ui SelectRoot(别名为 Select)。

Select Events

事件	Payload	说明
update:modelValue	(value: string | string[])	选中值变化
update:open	(open: boolean)	展开状态变化

SelectTrigger Props

名称	类型	默认值	说明
class	string	—	容器 class;已内置右侧箭头图标并随 data-state 旋转

其余 props 透传至 reka-ui SelectTriggerProps。

SelectContent Props

名称	类型	默认值	说明
position	'popper' | 'item-aligned'	'popper'	定位策略
side	'top' | 'right' | 'bottom' | 'left'	—	popper 模式下的方向
sideOffset	number	—	与触发器间距
align	'start' | 'center' | 'end'	—	次轴对齐
class	string	—	容器 class

其余 props 透传至 reka-ui SelectContentProps。

SelectItem Props

名称	类型	默认值	说明
value	string	—	选项的值(必填)
disabled	boolean	—	禁用此项
class	string	—	选项 class

其余 props 透传至 reka-ui SelectItemProps。

Slots

插槽	作用域	说明
default (SelectTrigger)	—	触发器内容,通常放置
default (SelectContent)	—	下拉选项列表
default (SelectItem)	—	选项内容(也可用 reka-ui 的 SelectItemText 渲染)

可访问性

• 基于 reka-ui,原生支持键盘方向键、首字母搜索、Enter 确认、Esc 关闭
• SelectTrigger 自动带 aria-haspopup、aria-expanded、data-state 等属性
• 禁用项带 data-disabled,屏幕阅读器会朗读禁用提示