ETU组件库

Appearance

Return to top
On this page

Divider 分割线

区隔内容的分割线。

基础用法

对不同段落的文本进行分割。

第一段文本

第二段文本

<template>
  <p>第一段文本</p>
  <etu-divider></etu-divider>
  <p>第二段文本</p>
</template>

<template>
  <p>第一段文本</p>
  <etu-divider></etu-divider>
  <p>第二段文本</p>
</template>

设置文案

通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 失效。

第一段文本

文案分隔线
文案分隔线
文案分隔线

第二段文本

<template>
  <p>第一段文本</p>
  <etu-divider content-position="left">文案分隔线</etu-divider>
  <etu-divider>文案分隔线</etu-divider>
  <etu-divider content-position="right">文案分隔线</etu-divider>
  <p>第二段文本</p>
</template>

<template>
  <p>第一段文本</p>
  <etu-divider content-position="left">文案分隔线</etu-divider>
  <etu-divider>文案分隔线</etu-divider>
  <etu-divider content-position="right">文案分隔线</etu-divider>
  <p>第二段文本</p>
</template>

虚线

您可以设置分隔符的样式。

第一段文本

第二段文本

<template>
  <p>第一段文本</p>
  <etu-divider border-style="dotted"></etu-divider>
  <p>第二段文本</p>
</template>

<template>
  <p>第一段文本</p>
  <etu-divider border-style="dotted"></etu-divider>
  <p>第二段文本</p>
</template>

垂直分隔线

Rain
Home
Grass
<template>
  <div>
    <span>Rain</span>
    <etu-divider direction="vertical" />
    <span>Home</span>
    <etu-divider direction="vertical" border-style="dashed" />
    <span>Grass</span>
  </div>
</template>

<template>
  <div>
    <span>Rain</span>
    <etu-divider direction="vertical" />
    <span>Home</span>
    <etu-divider direction="vertical" border-style="dashed" />
    <span>Grass</span>
  </div>
</template>

Divider 属性

属性名说明类型可选值默认值
direction设置分割线方向stringhorizontal/verticalhorizontal
border-style设置分隔符样式stringnone/solid/hidden/dashed/...solid
content-position自定义分隔线内容的位置stringleft/center/rightcenter

Divider 插槽

名称说明
—自定义默认内容