mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
55348b30b6
* style: use prettier * style: just prettier format, no code changes * style: eslint fix object-shorthand, prefer-const * style: fix no-void * style: no-console
1.8 KiB
1.8 KiB
Divider
The dividing line that separates the content.
Basic usage
Divide the text of different paragraphs.
:::demo
<template>
<div>
<span
>I sit at my window this morning where the world like a passer-by stops
for a moment, nods to me and goes.</span
>
<el-divider></el-divider>
<span
>There little thoughts are the rustle of leaves; they have their whisper
of joy in my mind.</span
>
</div>
</template>
:::
Custom content
You can customize the content on the divider line.
:::demo
<template>
<div>
<span>What you are you do not see, what you see is your shadow. </span>
<el-divider content-position="left">Rabindranath Tagore</el-divider>
<span>I cannot choose the best. The best chooses me.</span>
<el-divider><i class="el-icon-star-on"></i></el-divider>
<span
>My wishes are fools, they shout across thy song, my Master. Let me but
listen.</span
>
<el-divider content-position="right">Rabindranath Tagore</el-divider>
</div>
</template>
:::
Vertical divider
:::demo
<template>
<div>
<span>Rain</span>
<el-divider direction="vertical"></el-divider>
<span>Home</span>
<el-divider direction="vertical"></el-divider>
<span>Grass</span>
</div>
</template>
:::
Divider Attributes
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
direction | Set divider's direction | string | horizontal / vertical | horizontal |
content-position | customize the content on the divider line | String | left / right / center | center |