#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~
Material Design链接：Material Design——Chips
选项卡是表示输入，属性或动作的紧凑元素。
一、用法
选项卡允许用户输入信息，进行选择，过滤内容或触发操作。
△原则
· 紧凑 选项卡是代表离散信息的紧凑组件
· 相关性 选项卡应该与它们所代表的内容或任务有明确而有用的关系。
· 重点 选项卡应该使任务更容易完成，或者内容更容易排序。
△类型
输入选项卡：输入芯片表示在字段中使用的信息，例如实体或不同的属性。
选择选项卡：在包含至少两个选项的集合中，选择芯片代表单个选择。
动作选项卡：动作选项卡触发与主要内容相关的动作。
二、分析
· 容器 选项卡容器容纳所有元件，它们的尺寸由这些元件决定，容器也可以通过笔划来定义
· 缩略图（可选） 缩略图通过显示头像，角标或图标来识别实体（如个人）
· 文本 选项卡文本可以是实体名称，描述，标签，操作或会话
· 删除图标（可选） 输入选项卡可以包含删除图标
三、输入选项卡
△ 用法
输入选项卡以紧凑的形式表示复杂的信息，例如实体（人，地点或事物）或文本，用户可以通过将文本转换为选项卡来验证输入。
左：用于显示实体的输入选项卡；右：用于显示实体的概述输入选项卡。
输入选项卡可以提供建议的回复内容。
△ 行为
· 转型
输入选项卡根据用户输入变换文本。
文本转换为输入选项。
· 可编辑
输入选项卡的文本是可编辑的，直到用户对选项卡采取行动，例如发送电子邮件，点击选项卡编辑输入选项卡的文本。
点击时输入选项卡可编辑。
· 信息化
如果系统无法识别文本输入，则输入选项卡可以提示错误。
输入选项卡可以表示错误状态。
· 多项
单个字段可以包含多个条目选项卡。
多个输入选项卡。
· 可移动
输入选项卡可以重新排序或移动到其他领域。
可移动的。
· 展开
输入选项卡可以展开以显示更多信息或选项。
可输入选项卡的展开。
△ 位置
输入选项卡可以与其他组件集成，它们可以出现在：
· 与字段中的文本输入光标内联
· 在堆叠列表中
· 在水平滚动列表中
如果所有选项卡都需要可见，则输入芯片可以换行到新行。
输入选项卡水平滚动。△ 状态
输入选项卡状态。
四、选择选项卡
△ 用法
选择选项卡允许从一组选项中选择单个选项卡。
选择选项卡清楚地描绘和显示在一个紧凑的区域选项。它们是切换按钮、单选按钮和单一选择菜单的一个很好的替代方案。
左：一套选项卡；右：一套描边选项卡。△ 行为
选择单个选择选项卡会自动取消选择该组中的所有其他选项卡。
△ 位置
选择选项卡是一系列的，它们通常是水平和顺序显示的。
选择芯选项卡的水平放置。
Right：选择选项卡可以水平滚动；Caution：选择选项卡可以换到新的行，使用两行或更多行选择选项卡会使每个选项卡更难扫描。
Wrong：选择选项卡不应只提供一个选项。
△ 状态
五、筛选选项卡
△ 用法
筛选选项卡使用标签或描述性文字筛选内容。
筛选选项卡显示在一个紧凑的位置，它们是切换按钮或复选框的好选择。
左：一套筛选选项卡；右：一套描边筛选选项卡。
△ 行为
点击选项卡进行选择，可以选择或者取消选项卡。
可以用图标来提示选中状态。
当用户点击筛选时，筛选选项卡建议可以动态地改变。△ 位置
筛选选项卡可以显示在搜索字段下方。
在侧页中显示多组筛选选项卡。△ 状态
六、动作选项卡
△ 用法
动作选项卡提供与主要内容相关的操作，它们应该动态地和上下文地出现在UI中。
动作选项卡的另一种选择是按钮，它应该持续地、始终如一地出现。
左：一套动作选项卡；右：一套描边动作选项卡。
△ 行为
动作选项卡可以触发动作或显示进展和确认。
点击动作选项卡会触发上下文操作。△ 位置
动作选项卡显示在主要内容之后，例如在卡片下方或持久地在屏幕底部。
动作选项卡应显示在主要内容下方。
Caution：动作选项卡应该是一个组的；Right：动作选项卡可以水平滚动。△ 状态
END.THANKS FOR YOUR READING~
如有不当，还请多多指教~
网友评论