标签输入框
@astryxdesign/core v0.7.1 · Tokenizer
使用方法
Tokenizer 把多条搜索结果收成可删除的标签。数据源和自动补全相同，本地用 createStaticSource，远程实现 search。已选条目不会再次出现在列表里。
hasCreate 允许把当前输入收成一条新标签。hasClear 一次清空。输入框为空时，Backspace 删掉最后一条。方向键可以在标签之间移动焦点，Backspace 或 Delete 删除当前标签。
overflow 控制放不下时的表现：
| 值 | 行为 |
|---|---|
none | 标签换行，全部可见。 |
unfocused-inline | 失焦时收成一行，末尾显示 +N，聚焦后在原处展开。 |
unfocused-layer | 失焦时同样收成一行，聚焦后浮在字段上展开，不把下面的内容往下推。 |
宽度测量复用 useOverflow。#icon 插槽放在输入区开头，每条标签也可以用 #token 换成自己的 Token。
解剖
| 部分 | 说明 |
|---|---|
| 标签 | 输入上方的可见文字，说明用户在选什么。也用作无障碍名称。 |
| 标签芯片 | 表示每个已选项的可移除芯片。每片有标签和移除按钮。 |
| 搜索输入 | 用户输入、用来搜索数据源的文本框。达到 maxEntries 后隐藏。 |
| 下拉菜单 | 用户输入时出现在输入框下方的搜索结果列表。 |
| 转圈 | 搜索进行中时，字段末尾的加载指示。 |
| 尾部内容 | 输入后面的插槽，放操作按钮、计数或其他控件。 |
| 清除按钮 | 一次去掉所有已选标签的按钮。clearable 打开且已经有标签时显示。 |
最佳实践
| 指引 | 实践 |
|---|---|
| 推荐 | 标签会很多、字段又要保持一行时，用 unfocused-inline。 |
| 推荐 | 允许用户自造条目时打开 hasCreate，并在变更事件里区分 add 和 create。 |
| 避免 | 选项是短小的固定清单时用标签输入框。那种场景用多选器。 |
示例
全部清除
Alice JohnsonBob Smith
选中之后出现全部清除按钮。
可新建
Free-text only
Create or search
可以只输入新标签，也可以在搜索结果之外新建一条。
尾部内容
Action button in the end slot
Alice JohnsonCharlie Brown
输入区末尾放一个操作按钮。
图标
Leading icon reinforces the search affordance
Alice JohnsonCharlie Brown
开头的搜索图标说明这里可以搜索。
数量上限
Limited to 3 selections — 1 remaining
Choose up to 3 skills
ReactTypeScript
到达上限后不能再添加。
溢出
Inline overflow — content shifts down on expand
Alice JohnsonBob SmithCharlie BrownDiana PrinceEve WilliamsFrank Miller
Layer overflow — expands as overlay, no layout shift
Alice JohnsonBob SmithCharlie BrownDiana PrinceEve WilliamsFrank Miller
失焦时收成一行。行内模式展开会把下面的内容往下推，浮层模式盖在字段上。
状态
Alice JohnsonCharlie Brown
At least one reviewer is required
Alice Johnson
Consider adding at least 2 approvers
Bob SmithDiana Prince
All required reviewers added
禁用、错误、警告和成功四种状态。