Skip to content

Select

组合式选择器运行时:Root 持有 value/open,Trigger/Value/Content/Item 分工渲染。

运行时

状态契约由 @varo-ui/headless 提供;渲染 Parts 分别来自 @varo-ui/h5/primitives@varo-ui/weapp/primitives

演示

安装包@varo-ui/headless

安装

bash
pnpm add @varo-ui/headless @varo-ui/h5
# 或
pnpm add @varo-ui/headless @varo-ui/weapp

基础用法

通过上方演示面板切换 H5 实时预览,以及小程序运行时契约/代码。

分组与只读

分组用 SelectGroup/SelectLabelreadonly 阻止变更但仍可展示当前值。定位与动画交给 UI wrapper。

Parts

Part作用
SelectRootvalue/open 状态
SelectTrigger打开入口
SelectValue当前值展示
SelectContent选项容器
SelectGroup分组
SelectLabel分组标题
SelectItem单个选项

Props

SelectRoot

Prop类型默认值描述
valueunknownundefined受控值
defaultValueunknownundefined非受控初始值
openboolean | undefinedundefined受控打开态
defaultOpenbooleanfalse非受控初始打开态
optionsarrayundefined选项数据
placeholderstringundefined占位
disabledbooleanfalse禁用
readonlybooleanfalse只读
multiplebooleanfalse多选语义

SelectItem

Prop类型描述
optionobject选项对象

Events

EventPayload描述
update:valueunknown值同步
valueChangeunknown值变化
update:openboolean打开态同步
openChangeboolean打开态变化

无障碍

  • Trigger 负责打开。
  • Item 负责选择。
  • disabled/readonly 时不应改 value。

平台说明

  • H5 可实时预览打开/选择。
  • 小程序侧浮层定位与 portal 策略由封装层处理。

相关文档