Needless UI

组件

组合框

在你输入时给出建议选项的文本框。

导入

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

NuiCombobox

在你输入时给出建议选项的文本框。

选择器
nui-combobox
名称类型默认值说明
options输入NuiOption<V>[]选项，以 NuiOption 对象的形式提供。
value双向绑定V | nullnull选中的值，或 null。也可以与表单配合使用。
values双向绑定readonly V[][]启用 multiple 时选中的多个值。
multiple输入booleanfalse允许选择多个选项，并以标签形式显示。
create输入(text: string) => V由输入的文本生成值。列表会提议添加尚不是选项的文本。
filtering输入booleantrue在输入时过滤选项。由服务器过滤时请关闭它。
loading输入booleanfalse在结果返回之前显示加载提示行。
clearable输入booleanfalse添加一个清除值的按钮，并允许按 Esc 键清除。
placeholder输入string''文本框为空时显示的文本。
label输入string可访问名称，在没有 <label> 为文本框命名时使用。
inputId输入string文本框的 id，供 <label for> 使用。
disabled输入booleanfalse禁用文本框。
compareWith输入(a: V, b: V) => booleanObject.is判断两个值是否为同一选项，适用于对象类型的值。
displayWith输入(value: V) => stringString不在选项中的值所显示的文本，例如在选项加载之前设置的值。
virtual输入boolean | 'auto''auto'只渲染可见的行：始终、从不，或 auto（超过 200 行时启用）。
queryChange输出string在输入时发出文本，用于服务器端搜索。
openChange输出boolean列表打开或关闭时发出。
show方法() => void打开列表。
hide方法() => void关闭列表。
clear方法() => void清除值和文本。
focus方法(options?: FocusOptions) => void让文本框获得焦点。

它显示或播报的所有文本也都是输入属性，因此可以翻译： emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

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

选择器
ng-template[nuiOptionTemplate]

NuiOptionText

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

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