2020-08-13 15:18:26 +08:00
|
|
|
## Divider
|
|
|
|
|
|
|
|
La línea divisoria que separa el contenido.
|
|
|
|
|
|
|
|
### Uso básico
|
|
|
|
|
|
|
|
Divide el texto de los diferentes párrafos.
|
|
|
|
|
|
|
|
:::demo
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-08-13 15:18:26 +08:00
|
|
|
```html
|
|
|
|
<template>
|
|
|
|
<div>
|
2021-09-04 19:29:28 +08:00
|
|
|
<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
|
|
|
|
>
|
2020-08-13 15:18:26 +08:00
|
|
|
<el-divider></el-divider>
|
2021-09-04 19:29:28 +08:00
|
|
|
<span
|
|
|
|
>There little thoughts are the rustle of leaves; they have their whisper
|
|
|
|
of joy in my mind.</span
|
|
|
|
>
|
2020-08-13 15:18:26 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
```
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-08-13 15:18:26 +08:00
|
|
|
:::
|
|
|
|
|
|
|
|
### Contenido personalizado
|
|
|
|
|
|
|
|
Puede personalizar el contenido en la línea divisoria.
|
|
|
|
|
|
|
|
:::demo
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-08-13 15:18:26 +08:00
|
|
|
```html
|
|
|
|
<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>
|
2021-09-04 19:29:28 +08:00
|
|
|
<span
|
|
|
|
>My wishes are fools, they shout across thy song, my Master. Let me but
|
|
|
|
listen.</span
|
|
|
|
>
|
2020-08-13 15:18:26 +08:00
|
|
|
<el-divider content-position="right">Rabindranath Tagore</el-divider>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
```
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-08-13 15:18:26 +08:00
|
|
|
:::
|
|
|
|
|
|
|
|
### División vertical
|
|
|
|
|
|
|
|
:::demo
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-08-13 15:18:26 +08:00
|
|
|
```html
|
|
|
|
<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>
|
|
|
|
```
|
2021-09-04 19:29:28 +08:00
|
|
|
|
2020-08-13 15:18:26 +08:00
|
|
|
:::
|
|
|
|
|
|
|
|
### Divider Atributos
|
2021-09-04 19:29:28 +08:00
|
|
|
|
|
|
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
|
|
|
| ---------------- | ---------------------------------------------- | ------ | --------------------- | ----------- |
|
|
|
|
| direction | indica la dirección del separador | string | horizontal / vertical | horizontal |
|
|
|
|
| content-position | personaliza el contenido en la línea divisoria | String | left / right / center | center |
|