组件 工具栏

工具栏

工具栏显示在受其操作影响的视图上方。

工具栏会作为一个层级,显示在受其影响的内容之上。工具栏可以约束自己的宽度,以便为从其上方经过的其他材质腾出空间。

避免使用其他材质元素将工具栏上的操作分隔开,除非它只是暂时显示的,例如菜单和对话框。

海拔高度

在应用内容之上

滚动

受影响的内容会在工具栏下滚动。

移出屏幕的内容

当材质移出屏幕时,可能会暂时覆盖工具栏。

Material Design 中的工具栏位于视图上方

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

工具栏在受其操作影响的材质上方显示一个层级。当材质在工具栏下方滚动时,会被裁剪,无法穿过工具栏到另一侧。

Material Design 中的工具栏固定显示在材质上方

工具栏位于另一层材质上方的一个层级。

其他材质在滚动时可以覆盖工具栏。

Material Design 中的工具栏可被其他材质覆盖

工具栏会保持和其他材质的边线,直到工具栏离开屏幕。

最后,第二个材质在滚动时也可以覆盖工具栏。

Material Design 中的第二个材质覆盖工具栏

第二个材质在滚动时也可以覆盖工具栏。

工具栏的左右两侧的操作不会被其他材质分隔开,除了如菜单和对话框之类的临时材质。

相反,工具栏会限制它们的宽度,以便为在其上经过的材质腾出空间。工具栏上的左右两侧的操作会始终保持在那一侧。

Material Design 中的工具栏宽度应小于页面宽度

推荐做法

将工具栏的宽度限制为小于其材质的全长。

Material Design 中的材质不应被其他材质分隔

不推荐做法

切勿让一个材质被另一个持久显示的材质分隔开。

工具栏可以和其他材质共享一条边线。

在某些情况下,共享的边线可以转换为层级,这种变形称为“瀑布”效果

Material Design 中的工具栏与其他材质共享边线

在"瀑布"效果变形中,工具栏开始显示边线,然后抬升形成一个独立层级。