Needless UI

组件

选择器

从简短或海量的列表中选择一个或多个选项。

导入

import-select.ts
import { type NuiOption, NuiSelect } from '@needless-ui/angular/select';

NuiSelect

点击后打开选项列表的按钮。

选择器
nui-select
名称类型默认值说明
options输入NuiOption<V>[]选项，以 NuiOption 对象的形式提供。
value双向绑定V | nullnull选中的值，或 null。也可以与表单配合使用。
values双向绑定readonly V[][]启用 multiple 时选中的多个值。
multiple输入booleanfalse允许选择多个选项。选择期间列表保持打开。
selectAll输入booleanfalse启用 multiple 时，添加一个全选或全部清除的按钮。
placeholder输入string'Select…'未选择任何项时显示的文本。
label输入string可访问名称，在没有 <label> 为按钮命名时使用。
triggerId输入string按钮的 id，供 <label for> 使用。
disabled输入booleanfalse禁用选择器。
compareWith输入(a: V, b: V) => booleanObject.is判断两个值是否为同一选项，适用于对象类型的值。
virtual输入boolean | 'auto''auto'只渲染可见的行：始终、从不，或 auto（超过 200 行时启用）。
openChange输出boolean列表打开或关闭时发出。
show方法() => void打开列表。
hide方法() => void关闭列表。
focus方法(options?: FocusOptions) => void让按钮获得焦点。

它显示或播报的所有文本也都是输入属性，因此可以翻译： selectAllLabel clearAllLabel emptyLabel

NuiOption

单个选项。选择器、组合框和命令面板都接收这种对象。

名称类型默认值说明
value属性V选中它时设置的值，可以是任意类型。
label属性string显示并用于搜索的文本。
description属性string显示在主文本下方的次要文本。
group属性string分组相同的选项会按顺序列在该分组标题下。
keywords属性string[]搜索时额外匹配的词，例如同义词或代码。
disabled属性boolean会显示，但无法选择。
children属性NuiOption<V>[]下一级的选项，会让列表变成树。

NuiOptionTemplate

把它放在组件内的 ng-template 上，即可自行绘制每一行。上下文中包含选项及其所在行。

选择器
ng-template[nuiOptionTemplate]

NuiOptionText

绘制选项的显示文本（标出匹配的字母）、描述和路径，用于你自定义的行。

选择器
[nuiOptionText]
名称类型默认值说明
nuiOptionText输入NuiOptionRow<V>行，取自模板上下文。