BottomNavigation（底部导航栏）
底部导航栏是一个应用程序主要目标界面之间导航的控件。
开发文档
| 平台 | 状态 |
|---|---|
| Android | 可用 |
| IOS | 可用 |
| Web | 计划中 |
| Flutter | 可用 |
目录
- 使用
- 剖析
- 行为
- 位置
- 状态
- 主题
- 规格
使用
底部导航栏一般在屏幕底部，有3～5个目标。每一个目标有一个图标和一可选的文本标签。当点击底部导航图标时，用户将被带到与该图标关联的顶级导航目标。
原则
何时使用
底部导航栏应用于：
- 需要从应用程序中的任何位置访问的顶级目标
- 三到五个目标
- 仅限手机或平板电脑
底部导航栏不应用于：
剖析
- 容器
- 非活动状态图标
- 非活动状态标签
- 活动状态图标
- 活动状态标签
如何显示
底部导航的显示方式取决于所使用的数量：
- 三个目标：显示所有的图标和文本标签。
- 四个目标：活动状态时显示图标和文本标签。非活动状态时显示图标或文本标签。建议使用文本标签。
-
五个目标：活动状态时显示图标和文本标签。非活动状态使用图标，如果空间允许，则使用文本标签。
此底部导航中有三个目标，每个目标都有一个图标和文本标签。
图标
底部导航目标始终包含一个图标。最好将图标与文本标签配对，尤其是在图标没有明显含义的情况下。
文本标签
文本标签提供了对底部导航目标的简短有意义的描述。
图标和标签颜色
活动与非活动状态的图标以及文本标签应与容器形成足够的对比。根据组件的配色方案，活动状态目标的图标和标签应使用应用程序的“主要”或“强调”的“开”颜色。非活动状态的图标和标签可以使用中等强调的“打开”颜色。
行为
导航
底部导航在Android和iOS上的行为有所不同。选择底部导航目标（当前未选择的一项）时，每个平台显示不同的结果：
- 在Android上： 该应用程序导航到目的地的顶级屏幕。任何先前的用户交互和临时屏幕状态都会重置，例如滚动位置，选项卡选择和嵌入式搜索。
- 在iOS上： 目的地反映了用户的先前交互。如果用户以前访问过该应用程序的该部分，则他们将返回上一次查看的屏幕（如果可能，保留其先前状态）。否则，该应用程序将导航到顶级屏幕。
需要改善用户体验时，可以覆盖默认平台导航。例如，需要在部分之间频繁切换的Android应用可以保留每个部分的状态。或者，如果一个iOS应用更适合用例，则它可以使用户返回到顶级屏幕（或重置其滚动位置）。
示例
在Android上，重新访问版块会重置应用程序，使用户返回到其顶级屏幕。（视频示例）
在iOS上，当用户重新访问某个部分时，他们将返回到该部分中的上一步，例如详细信息屏幕。
在应用程序的层次结构中向下移动（从父屏幕到子屏幕）时，可以持续显示底部导航栏，以便在应用程序的各个部分之间快速导航。
导航到专辑时，此音乐应用程序的底部导航栏仍保持在视图中。
角标
底部导航图标的右上角可以包含角标。这些角标可以包含动态信息，例如许多待处理的请求。
- 角标
- 带有数字的角标
- 带有最大字符数的角标
滚动
滚动时，底部导航栏可以显示或消失，以留出更多空间容纳内容。：
- 向下滚动隐藏底部导航栏
- 向上滚动显示它
视频
转场
建议在底部导航目标之间进行过渡时使用就地淡入淡出动画。横向（从一侧到另一侧）过渡可能意味着不存在的项目之间存在对等关系，或者误导用户以为他们可以使用手势在各个部分之间导航。
视频
不建议使用视频
位置
海拔
对话框，底部工作表，导航抽屉，屏幕键盘或其他完成流程所需的元素可以暂时覆盖底部导航。请勿在任何屏幕上永久阻塞它们。
视频示例
固定大小的导航栏
底部导航栏目标位置固定。它们不会滚动或水平移动。
横屏视图
状态
底部导航目标可能处于活动状态，非活动状态，获取焦点或处于按下状态。
底部导航使用不透明度和文本来显示目标何时处于活动状态或用于显示按下，获取焦点和未活动的状态。
处于不活动状态的目标具有较小的不透明性；活动状态具有完全不透明性。
- 非活动状态目标
- 活动状态目标
状态
如果不始终使用文本标签（始终），则仅为活动目标指定文本标签。
- 没有文本标签的非活动目标
- 具有文本标签的活动目标
主题
颜色
Owl的底部导航栏在三个元素上使用自定义颜色：容器，活动的项目和不活动的项目。
| 元件 | 类别 | 属性 | 值 |
|---|---|---|---|
| 容器 | 主蓝 | 颜色 透明度 |
#0336FF 100％ |
| 活动图标，活动文本 | On Primary | 颜色 透明度 |
#FFFFFF 100％ |
| 非活动的图标 | On Primary | 颜色 不透明度 |
#FFFFFF 76％ |
排版
了解排版
Owl的底部导航栏对文本标签使用自定义排版。
| 元件 | 类别 | 属性 | 值 |
|---|---|---|---|
| 文字标签 | 字幕 | 字体 字形 大小 案件 |
Rubik Regular 12 所有大写 |
规格
手机
竖屏
最小宽度
最大宽度
横屏
