Material Design——Tabs
#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~
Material Design链接:Material Design——Tabs
选项卡通过不同的屏幕、数据集和其他交互来组织内容。

一、用法
选项卡组织和允许在与层次结构相关的内容组之间进行导航。
选项卡是一个系列的
每个选项卡应包含与集合中其他选项卡不同的内容,例如, 选项卡可以呈现不同的新闻节、不同的音乐流派或不同的文档主题。



△ 原则
· 可伸缩 当选项卡可以水平滚动时, UI 可以有尽可能多的选项卡
· 信息 选项卡将内容组织到类别中, 以帮助用户轻松查找不同类型的信息
· 同一行 在同等重要的类别中, 制表符作为对等方彼此相邻显示
与其他组件的组合
选项卡可以与顶级应用程序栏等组件配对, 或者嵌套在诸如卡片和表单之类的组件中。
△ 同一行
固定选项卡
固定选项卡显示一个屏幕上的所有选项卡, 每个选项卡的宽度固定,每个选项卡的宽度由屏幕宽度除以制表符数来确定,选项卡集表示这是当前触发的选项卡。

可滚动选项卡
无固定宽度显示可滚动制表符,它们是可滚动的, 这样某些选项卡将保留在屏幕之外, 直到滚动。

二、分析

△ 文本标签
文本标签应清楚和简明地描述它们所代表的选项卡的内容,选项卡内容应包含一组具有共同特征的项。
制表符标签显示在单行中,如果需要, 可以使用第二行, 并截断文本,或者, 您可以使用可滚动的选项卡允许更长的标题空间。


△ 图标
图标以简单、可识别的方式传达标签所代表的内容类型,但是, 它们在表达复杂内容时不像文本标签那样有效。




△ 活动选项卡指示器
若要将活动选项卡与非活动选项卡区分开来, 请对活动选项卡的文本和图标应用下划线和颜色更改。

三、行为
△ 在选项卡之间移动
用户可以通过点击选项卡或通过在内容上执行滑动手势在选项卡之间导航。
· 点击选项卡
通过点击定位到一个选项卡

· 在内容区域内滑动
要在选项卡之间导航, 用户可以在内容区域内向左或向右滑动。
对于每种类型的选项卡, 笔势的出现方式不同:
1.固定选项卡不响应所有的滑动手势
2.在华东时, 可滚动制表符独立于内容区域滚动
在内容区域中放置其他 swipeable 内容 (如交互式地图或列表项) 时, 请格外小心

△ 活动
当屏幕滚动时, 制表符可以固定在屏幕的顶部, 或者从屏幕上滚动,如果他们从屏幕上滚动, 当用户向上滚动时, 它们将返回。



四、位置
△ 制表符布局
选项卡显示在一行中, 每个选项卡都连接到它所表示的内容,作为一个集合, 所有选项卡为同一个主题。


△ 制表符放置
选项卡可以与诸如顶级应用程序栏、嵌入在特定 UI 区域中的组件或嵌套在卡片和表等组件中一起使用,选项卡控制显示在它们下面的 UI 区域。



选项卡可以嵌入到特定的 UI 区域中, 以便控制该区域中显示的内容。




五、固定选项卡
△ 用法
固定选项卡同时显示集合中的所有选项卡,它们最适合于快速切换相关内容, 如地图中的传输方法,若要在固定选项卡之间导航, 请单击单个选项卡, 或在内容区域中向左或向右滑动。


△ 位置
固定制表符的宽度相等, 可计算为:
· 屏幕的宽度除以制表符的数目
· 最宽标签标签的宽度
使用固定选项卡时, 请确保在移动时可以看到它们, 而不截断其文本,不要同时使用四个以上的固定标签。



△ 密集固定选项卡
密集固定标签在屏幕上不相等,选项卡栏居中、右对齐或左对齐,应在横向布局 (如横向模式) 中使用群集固定选项卡。


六、可滚动选项卡
△ 用法
在屏幕上无法容纳一组选项卡时, 请使用可滚动选项卡,可滚动选项卡可以使用较长的文本标签和更大数量的制表符,它们最好用于浏览触摸界面。

△ 位置
可滚动选项卡同时显示所有选项卡的子集,每个选项卡的宽度由其文本标签的长度定义。




△ 行为
要在一组可滚动的选项卡之间导航, 用户可以向左或向右滑动设置。选项卡集可以循环, 因此当用户到达集中的最后一个选项卡时, 第一个选项卡将再次显示。
要选择单个选项卡, 请点击它。
· 激活时的制表符放置
在点击时, 可滚动制表符应重新定位以在屏幕上完全可见。


七、状态
默认情况下, 选项卡继承启用的状态, 其中有一个活动态。
选项卡的非活动状态可以继承悬停、焦点和按下状态。

选项卡的活动状态可以继承悬停、焦点和按下状态。

END.THANKS FOR YOUR READING~
如有不当,还请多多指教~