LuLu UI Edge版中文文档 » 分隔线

安装与调用

引入CSS即可：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Hr/index.css">

所有分隔线均使用原生的分隔线元素 <hr> 元素实现，在标准 HTML 中，无需闭合，但是在 React 等框架中，需要加闭合标签，例如：<hr/>。

基础样式

如果 <hr> 不做任何设置，则表现为 0.5px 的分隔线。

<hr>

如果考虑无障碍访问，并不推荐使用过细的边框线，此时可以使用类名 .ui-hr-solid 实现 1px 大小的实线分隔线。

<hr class="ui-hr-solid">

虚线分隔线使用类名 .ui-hr-dashed，支持通过 CSS 自定义属性 --ui-hr-filled 和 --ui-hr-open 设置虚线的虚实比例。

操作下面的滑竿，可以感受不同虚实间隔长度下的虚线效果。

<hr class="ui-hr-dashed">

<hr class="ui-hr-dashed" style="--ui-hr-filled: 4px; --ui-hr-open: 6px;">

两头虚的分隔线，使用类名 .ui-hr-weak，效果如下所示：

<hr class="ui-hr-weak">

波浪线使用类名 .ui-hr-wavy。

<hr class="ui-hr-wavy">

阴影分隔线使用类名 .ui-hr-shadow。

<hr class="ui-hr-shadow">

斜纹分隔线使用类名 .ui-hr-twill，支持彩色斜纹，使用类名 ui-hr-twill-colorful。

<hr class="ui-hr-twill">
<!-- 彩色斜纹 -->
<hr class="ui-hr-twill-colorful">

带文字内容

使用 data-content 属性设置文字内容，配合对应的类名，即可实现相应的效果。

两端实线：

<hr class="ui-hr-solid" data-content="分隔线">

两端虚线：

<hr class="ui-hr-dashed" data-content="分隔线">

两端淡出：

<hr class="ui-hr-weak" data-content="分隔线">

尺寸设置

除了斜纹和波浪线，其他的分隔线默认尺寸是 1px，可以通过 size 属性设置为 0.5。

例如：

<hr class="ui-hr-solid" size="0.5">
<hr class="ui-hr-dashed" size="0.5">
<hr class="ui-hr-weak" size="0.5">

带文字内容的分隔线也是类似的：

<hr class="ui-hr-solid" size="0.5" data-content="分隔线">
<hr class="ui-hr-dashed" size="0.5" data-content="分隔线">
<hr class="ui-hr-weak" size="0.5" data-content="分隔线">

颜色设置

对于基础的分隔线效果，可以使用原生的 color 属性设置边框颜色：

<hr class="ui-hr-solid" color="#2a80eb">
<hr class="ui-hr-dashed" color="#eb4646">
<hr class="ui-hr-weak" color="#f59b00">

对于复杂的分隔线，可以使用 CSS 自定义属性 --ui-hr-border 进行设置，例如：

<hr class="ui-hr-wavy" style="--ui-hr-border:#2a80eb">
<hr class="ui-hr-shadow" style="--ui-hr-border:#eb4646">
<hr class="ui-hr-twill" style="--ui-hr-border:#f59b00">

带内容的分隔线也是使用 CSS 自定义属性 --ui-hr-border 属性进行设置，例如：

<hr class="ui-hr-solid" data-content="分隔线" style="--ui-hr-border:#eb4646">
<hr class="ui-hr-dashed" data-content="分隔线" style="--ui-hr-border:#2a80eb">
<hr class="ui-hr-weak" data-content="分隔线" style="--ui-hr-border:#f59b00">

如果希望文字内容和线条颜色同时变化，可以使用下面两种语法：

<hr class="ui-hr-solid" data-content="分隔线" style="--ui-hr-border:#eb4646;color:#eb4646;">
<hr class="ui-hr-solid" data-content="分隔线" color="inherit" style="color:#eb4646;">