选项选择器
Select
从固定的选项集合中选择一个或多个值。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'select'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
输入值来自一个明确、有限的候选集合。
什么时候不用
只有两个直观选项时，可直接使用单选或开关。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "组件生态" |
name | "ecosystem" |
items | ["React","Vue","Svelte"] |
value | "React" |
disabled | false |
help | "仅显示有官方来源的实现" |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 保留箭头键、Enter 与 Escape 交互。
- 清楚标识当前值与不可选项。
和相似组件的区别
Select 以选择为主；Combobox 还允许输入筛选，是否接受新值需明确。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit · 来源核验