Divider
Divider
출처: 문서
본문
내용을 구분해 주는 분리선 컴포넌트예요. 구역 사이에 선을 하나 긋고 싶을 때 바로 이 Divider를 써요.
기본 사용 (Basic usage)
서로 다른 문단을 구분할 때 사용해요.
There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.
커스텀 내용 (Custom content)
분리선 위에 표시할 내용을 직접 지정할 수 있어요.
My wishes are fools, they shout across thy song, my Master. Let me but listen.
I cannot choose the best. The best chooses me.
Rabindranath Tagore
<template>
<div class="divider-demo">
<el-divider content-position="left">Rabindranath Tagore</el-divider>
<el-divider>
<el-icon><star-filled /></el-icon>
</el-divider>
<el-divider content-position="right">Rabindranath Tagore</el-divider>
</div>
</template>
<script setup lang="ts">
import { StarFilled } from '@element-plus/icons-vue'
</script>
점선 (dashed line)
분리선의 스타일을 설정할 수 있어요. border-style 속성을 쓰면 점선 스타일을 만들 수 있어요.
What language is thy answer, O sky?
The language of eternal silence.
---
What language is thy answer, O sky?
The language of eternal silence.
세로 구분선 (Vertical divider)
direction 속성에 vertical을 넘기면 세로 방향 구분선을 만들 수 있어요.
Home | Grass
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| direction | Set divider's direction | enum | horizontal |
| border-style | Set the style of divider | enum css/border-style | solid |
| content-position | The position of the customized content on the divider line | enum | center |
Slots
| Name | Description |
|---|---|
| default | Customized content on the divider line |