Divider 分割线

Divider（分割线）是UI设计中的基础视觉元素，主要用于在界面中建立清晰的内容边界和层次结构。

代码演示

基础使用

I am no bird; and no net ensnares me: I am a free human being with an independent will.

But man is not made for defeat. A man can be destroyed but not defeated.

默认显示一条实线、 1px 高度、颜色为 #e0e0e0 的分割线。

<template>
  <div>
    <p>
      I am no bird;
      and no net ensnares me:
      I am a free human being with an independent will.
    </p>
    <p-divider />
    <p>
      But man is not made for defeat. A man can be destroyed but not defeated.
    </p>
  </div>
</template>

设置分割线样式

Until I feared I would lose it, I never loved to read. One does not love breathing.

It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.

Call me Ishmael. Some years ago—never mind how long precisely—I thought I would sail about a little.

It was a bright cold day in April, and the clocks were striking thirteen.

So we beat on, boats against the current, borne back ceaselessly into the past.

你可以通过 type 属性 来设置分割线的样式类型，支持以下四种样式：

• solid：实线（默认样式）
• dashed：虚线
• dotted：点线
• double：双实线

<template>
  <div>
    <p>
      Until I feared I would lose it, I never loved to read.
      One does not love breathing.
    </p>
    <p-divider />
    <p>
      It is a truth universally acknowledged,
      that a single man in possession of a good fortune, must be in want of a
      wife.
    </p>
    <p-divider type="dashed" />
    <p>
      Call me Ishmael. Some years ago—never mind how long
       precisely—I thought I would sail about a little.
    </p>
    <p-divider type="dotted" />
    <p>
      It was a bright cold day in April, and the clocks were striking thirteen.
    </p>
    <p-divider type="double" />
    <p>
      So we beat on, boats against the current,
      borne back ceaselessly into the past.
    </p>
  </div>
</template>

设置分割线粗细

You don’t have to love your job. Jobs are a way to make money. Many people live fine lives in okay jobs by using the money they make on things they care about.

Sturgeon’s law states that 90% of everything is crap. If you dislike poetry, or fine art, or anything, it’s possible you’ve only ever seen the crap. Go looking!

People don’t realize how much they hate commuting. A nice house farther from work is not worth the fraction of your life you are giving to boredom and fatigue.

height 属性用于设置分割线的高度，支持以下两种参数类型：

• number 类型：表示像素值（等同于 px 单位）
• string 类型：支持任意合法的 CSS 高度值（如 px, %, em 等）

<template>
  <div>
    <p>
      You don’t have to love your job. Jobs are a way to make money.
      Many people live fine lives in okay jobs by using
      the money they make on things they care about.
    </p>
    <p-divider :height="3" />
    <p>
      Sturgeon’s law states that 90% of everything is crap.
      If you dislike poetry, or fine art, or anything, it’s
      possible you’ve only ever seen the crap. Go looking!
    </p>
    <p-divider height="5px" />
    <p>
      People don’t realize how much they hate commuting.
      A nice house farther from work is not worth the fraction of
      your life you are giving to boredom and fatigue.
    </p>
  </div>
</template>

设置颜色

People don’t realize how much they hate commuting. A nice house farther from work is not worth the fraction of your life you are giving to boredom and fatigue.

There’s some evidence that introverts and extroverts both benefit from being pushed to be more extroverted. Consider this the next time you aren’t sure if you feel like going out.

History remembers those who got to market first. Getting your creation out into the world is more important than getting it perfect.

您可以通过 color 属性设置分割线的颜色，支持所有合法 CSS 颜色值（如 hex, rgb, rgba, hsl 等）。

<template>
  <div>
    <p>
      People don’t realize how much they hate commuting.
      A nice house farther from work is not worth the fraction 
      of your life you are giving to boredom and fatigue.
    </p>
    <p-divider :height="4" color="red" />
    <p>
      There’s some evidence that introverts and extroverts both
      benefit from being pushed to be more extroverted. 
      Consider this the next time you aren’t sure if you feel like going out.
    </p>
    <p-divider color="#c03797" :height="4"/>
    <p>
      History remembers those who got to market first.
      Getting your creation out into the world is 
      more important than getting it perfect.
    </p>
  </div>
</template>

设置分割线文案

The only way to do great work is to love what you do.

Left Title

Be yourself; everyone else is already taken.

🌟

Success is not final, failure is not fatal: It is the courage to continue that counts.

Right Title

Happiness is not something ready-made. It comes from your own actions.

您可以通过 placement、contentBgColor 和 textColor 等属性来控制分割线标题的样式。其中：

• placement 用于设置标题位置，
  • 可选值为 left（左对齐）
  • center（居中，默认值）
  • right（右对齐）
• contentBgColor 用于设置标题背景色（支持所有合法 CSS 颜色值）
• textColor 用于设置标题文字颜色（支持所有合法 CSS 颜色值）

<template>
  <div>
    <p>
      The only way to do great work is to love what you do.
    </p>
    <p-divider placement="left">Left Title</p-divider>
    <p>
      Be yourself; everyone else is already taken.
    </p>
    <p-divider contentBgColor="#E5D0FF">🌟</p-divider>
    <p>
      Success is not final, failure is not fatal: 
      It is the courage to continue that counts.
    </p>
    <p-divider 
      placement="right"
      textColor="#c03797"
      contentBgColor="#ccc">Right Title
    </p-divider>
    <p>
      Happiness is not something ready-made. It comes from your own actions.
    </p>
  </div>
</template>

使用垂直分隔线

垂直分割线用于在视觉上分隔内容，通常用于菜单、列表、布局等场景。

Fruits

Vegetables

Meat

Dairy

Games

通过设置 direction="vertical" 可以明确指定为垂直方向的分割线。

<template>
  <div>
    <span>Fruits</span>
    <p-divider direction="vertical" />
     <span>Vegetables</span>
    <p-divider direction="vertical" type="dashed"/>
    <span>Meat</span>
    <p-divider direction="vertical" type="dotted" color="#c03797" height="2px"/>
    <span>Dairy</span>
    <p-divider direction="vertical" type="double"/>
    <span>Games</span>
  </div>
</template>

API

属性

属性名	说明	类型	默认值
size	分割线文字边距尺寸	small | medium | large	medium
type	分割线类型	solid | dashed | dotted | double	solid
placement	是否朴素按钮	left | center | right	center
color	分割线颜色	string	#e0e0e0
height	分割线的高度	string | number	1px
contentBgColor	分割线内容背景色	string	#fff / #121212
textColor	分割线内容颜色	string	#333 / #f0f0f0
direction	分割线方向	vertical | horizontal	horizontal

插槽

插槽名	说明
default	设置分割线的文案内容