--- url: https://nsh.dev/zh-CN/elements/select description: "Select 组件：从一组条目中选出一个值，桌面上是触发元素处的弹出层，手机上是 sheet，支持键盘、输入跳转、搜索和分组，样式由应用决定。" demo: https://nsh.dev/play/index.html#el-select --- # Select 选择框从一组条目中选出一个值：一项设置、一个筛选条件、一个国家、一个时区。应用提供的触发元素打开列表，并按每种设备的习惯呈现： - 在桌面平台和桌面浏览器中，它是触发元素处的弹出层，至少与触发元素一样宽，高度随行数增长，最多占满触发元素旁边的空间；键盘可以在条目间移动并选中一个。 - 在手机和平板上，它是屏幕底部、覆盖在背景层之上的 sheet。 选择框负责行为：值（应用持有的，或它自己保存的）、打开状态、键盘、输入跳转、搜索、分组、高亮的行以及屏幕阅读器听到的内容。外观由应用决定：应用为触发元素、弹出层、列表、行、分组标题和搜索框设置样式，或者自己绘制行。 ```rust use nsh_base::{SelectItem, SelectItemState, select, theme}; use nsh_core::ui::prelude::*; const FRUITS: [(&str, &str); 5] = [ ("apple", "苹果"), ("banana", "香蕉"), ("blueberry", "蓝莓"), ("grapes", "葡萄"), ("pineapple", "菠萝"), ]; fn fruit_select() -> impl IntoElement { let fruit = signal(None::); let title = move || { let chosen = fruit.get(); FRUITS .iter() .find(|(value, _)| Some(*value) == chosen.as_deref()) .map_or("选择水果", |(_, title)| *title) .to_string() }; select() .items( FRUITS .iter() .map(|&(value, title)| SelectItem::new(value, title).disabled(value == "grapes")) .collect::>(), ) .value(move || fruit.get()) .on_change(move |next: &Option| fruit.set(next.clone())) .accessibility_label("水果") .offset(px(4.0)) .popup_style(|s| { s.p_1() .rounded_lg() .border_1() .border_color(move || theme().border) .bg(move || theme().popover) .text_color(move || theme().popover_foreground) .shadow_md() }) .item_style(|s| s.rounded_md().overflow_hidden()) .trigger( view() .h_9() .w_48() .flex_row() .items_center() .justify_between() .px_3() .rounded_md() .border_1() .border_color(move || theme().input) .hover(|s| s.bg(move || theme().accent)) .child(text(title)) .child(text("▾").text_color(move || theme().muted_foreground)), ) .render_item(|item: &SelectItemState| { view() .flex_row() .items_center() .justify_between() .px_2() .py_1p5() .when(item.highlighted, |v| v.bg(move || theme().accent)) .when(item.disabled, |v| v.opacity(0.5)) .child(text(item.title.clone()).text_sm()) .when(item.selected, |v| v.child(text("✓").text_sm())) }) } ``` ```tsx import { mount, signal, Text, View } from "nsh"; import { Select } from "nsh/base"; const FRUITS = [ { value: "apple", title: "苹果" }, { value: "banana", title: "香蕉" }, { value: "blueberry", title: "蓝莓" }, { value: "grapes", title: "葡萄", disabled: true }, { value: "pineapple", title: "菠萝" }, ]; function App() { const fruit = signal(null); const title = () => FRUITS.find((f) => f.value === fruit())?.title; return ( ``` 这些行是弹出层滚动视图中的虚拟化列表：上千个条目的列表只创建可见的行；行的总高度超过可用空间时，弹出层可以滚动。 ## 值 有 `value` 时，选中的条目由应用持有：选择框显示该值对应的条目，并用 `onChange(value)` 报告一次选择；应用把 `value` 设为它以跟随这次选择，或者保留自己的值。`value={null}` 表示没有选中任何条目。省略 `value` 时，选择框自己保存值，初始为 `defaultValue`。`onChange` 只报告变化：再次选择已选中的条目会关闭列表。 `cleanable` 会在有选中条目时加一个清除按钮：按下它会清空值，以 `onChange(null)` 报告，列表保持关闭。这个按钮在选择框的视图里、触发元素之后，不在触发元素里面，所以按它不会打开列表；由应用摆放它（用 `absolute` 盖在触发元素末端、原本放箭头的位置）并填充内容： ```tsx 没有找到时区} trigger={trigger} /> ``` 在桌面平台上，列表打开时搜索框就获得键盘焦点；在触摸屏上，按下搜索框时键盘才弹出。每次打开时搜索都从空白开始。 ## 应用绘制的行 `itemClass` 为每个条目的行设置样式，行中显示条目的标题，提供 `renderItem` 时改由它绘制：`focus:` 作用于高亮的行（按键或指针所在的行），`selected:` 作用于选中的行，`disabled:` 作用于禁用的行。要自己绘制行，传入 `renderItem`：它收到条目及其状态（[`SelectItemState`](#types)），返回行的内容，只为可见的行调用。`renderGroup` 以同样的方式绘制分组标题： ```tsx