Select 选择器

显示一个可供选择的选项列表。列表至少与触发器等宽，过长时可滚动，在紧凑触屏上变为底部面板。

基础用法

// data-driven
SSelect({ value: this.fruit!!, placeholder: 'Select a fruit', options: FRUITS })

// compound, like shadcn
SSelect({ value: this.tz!! }) {
  SSelectTrigger({ placeholder: 'Timezone' })
  SSelectContent() {
    SSelectLabel({ text: 'Asia' })
    SSelectItem({ value: 'cst', text: 'China Standard Time' })
    SSelectSeparator()
    SSelectLabel({ text: 'Europe' })
    SSelectItem({ value: 'cet', text: 'Central European Time' })
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

长列表

数据形式是虚拟化的：只存在可见的行，滚出视野的行会被复用，列表会在所选选项处打开。每第 97 项被禁用。

// 1 000 options: List + Repeat.virtualScroll() — only the visible rows are built,
// and the list opens scrolled to the selected option.
SSelect({ value: this.item!!, placeholder: 'Pick an item', options: MANY_OPTIONS })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

MANY_OPTIONS.length 个选项 · item = …

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SSelect

shadcn-vue 的 Select。两种使用方式：

指针 / 宽屏上为锚定列表，紧凑的触控屏上为底部面板。

数据形式会使用 List + Repeat.virtualScroll()（ADR D14）渲染选项：只存在可见的行，列表打开时会滚动到所选选项。组合形式会构建每个条目（插槽内容无法虚拟化）——凡是超过一屏的内容请使用 options。

面板令牌（ADR D13/D14）：--select-*（background、border-color、radius、border-width、padding、shadow、highlight-background、highlight-foreground、max-height），未设置时回退到共享的 --menu-* 表面；可通过 tokens 按实例设置。

属性	类型	默认值	说明
value!!	string | undefined	undefined
defaultValue	string	''
placeholder	ResourceStr	$r('app.string.spark_select_placeholder')
options	SparkSelectOption[]	[]	数据驱动模式：渲染自己的触发器 +（虚拟化的）内容
disabled	boolean	false
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'
tokens	SparkOptionPanelTokens	{}	数据模式：面板覆盖项（参见 SSelectContent）

事件	类型	默认值	说明
onValueChange	(v: string) => void	() => { }

插槽: 子组件（尾随闭包）

SSelectTrigger

输入框样式的触发器，显示所选标签（或占位文字）以及一个箭头。

属性	类型	默认值	说明
placeholder	ResourceStr	$r('app.string.spark_select_placeholder')
sizing	'default' | 'sm'	'default'	'default' 为 h-9，'sm' 为 h-8

SSelectContent

选项列表：至少与触发器等宽，锚定在其下方；紧凑的触控屏上为底部面板。使用 options（即 SSelect({ options }) 所传入的）时，各行是虚拟化的；否则渲染插槽。

tokens / --select-* → --menu-* → bg-popover rounded-md border p-1 shadow-md。

属性	类型	默认值	说明
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'
maxListHeight	number	320	内容开始滚动前列表的最大高度，单位 vp；--select-max-height / tokens.maxHeight 可覆盖它
options	SparkSelectOption[]	[]	数据模式：使用虚拟化的行替代插槽
tokens	SparkOptionPanelTokens	{}

插槽: 子组件（尾随闭包）

SSelectItem

组合形式中的一个选项（与数据形式的行相同：右侧对勾，按下时透明度渐变）。

属性	类型	默认值	说明
value	string	''
text	string	''
disabled	boolean	false

SSelectLabel

属性	类型	默认值	说明
text	ResourceStr	''

SSelectSeparator

无属性。

SSelectGroup

插槽: 子组件（尾随闭包）