分隔线把页面内容和层次结构组织成单独的块。
在<a class="do-router" href="/zh-cn/design/1/components/lists.html">列表</a>中用于分隔内容
分隔线类型
- 全出血分隔线用于分隔不同的内容区块。
- 内嵌分隔线用于分隔相关的内容。
- 规格
- 粗细：
- 不透明度：12% 黑色或 12% 白色
在<a class="do-router" href="/zh-cn/design/1/components/lists.html">列表</a>中用于分隔内容
分隔线类型
分隔线类型
规格
全出血分隔线强调分隔内容区域和章节，但如果不需要进行如此明显的分类，可以考虑使用空白、副标题或内嵌型分隔线。
没有锚点的项目
当列表没有锚元素（如头像或图标）时，仅通过间距不足以分隔内容块。在这种情况下，全出血分隔线可以帮助创建一种规律来分隔单独的内容块。
全出血分隔线分隔邮件的摘要。
全出血分隔线分隔邮件中的发件人、收件人、主题和正文部分。
基于图片的内容
因为网格本身会创造视觉差异，网格列表不需要使用分隔线来从内容中分离副标题。在这种情况下，空白和副标题会充分的分隔这些部分。
合理的使用内嵌分隔线分隔内容的主要部分。
同时使用内嵌分隔线和锚元素（如头像）。
过度使用全出血分隔线会造成视觉干扰，并最终减弱分隔线的作用。
内嵌型分隔线有助于减少视觉干扰，应该和锚元素一起使用，但过度使用会减弱分隔线的作用。
全出血分隔线
全出血分隔线可以用于分隔明显不同的内容（例如：联系人信息中的详细介绍），或列表和页面布局中不同的元素（如列表项）。
全出血分隔线还可以用于指出元素展开时的接缝。
全出血分隔线示例
内嵌型分隔线
内嵌型分隔线用于分隔相关的内容，例如联系人列表中的一部分，或邮件中的对话。
内嵌型分隔线应该和锚元素（如头像或图标）一起使用，并和标题的参考线对齐。
内嵌型分隔线示例
当分隔线和副标题一起使用时，把分隔线放在副标题上方，以加强副标题和内容的联系。
副标题上的分隔线示例
副标题上的分割线示例
分隔线有 1dp 的粗细，在亮色主题中为黑色并带有 12% 的不透明度，在暗色主题中为白色并带有 12% 的不透明度 。
分隔线沿着内容块的底部边缘放置，独立于网格。
分隔线位于内容块的基线内。
全出血分隔线在 Material Design 中的应用示例
正确示例
Material Design 中的全出血分隔线用于邮件内容分隔
错误示例
Material Design 中的空白和副标题分隔的照片
Material Design 中的内嵌分隔线和锚元素
正确示例
Material Design 中的过度使用全出血分隔线导致视觉干扰
错误示例
Material Design 中的内嵌型分隔线用于减少视觉干扰
Material Design 中的全出血分隔线示例
Material Design 中的内嵌型分隔线示例
Material Design 中的内嵌型分隔线示例
正确示例
Material Design 中的副标题分隔线示例
错误示例
Material Design 中的副标题分割线示例
