区隔内容的分割线，一般用于页面底部"没有更多"的提示。

基本使用

文字内容通过text传入

<template>
  <un-divider text="分割线"></un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

设置虚线

可以通过dashed指定虚线

<template>
  <un-divider text="分割线" :dashed="true"></un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

设置细线

可以通过hairline指定细线

<template>
  <un-divider text="分割线" :hairline="true"></un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

文本加粗

可以通过bold文本加粗

<template>
  <un-divider text="分割线" :bold="true"></un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

设置以点代替文字

可以通过dot指定以点代替文字

<template>
  <un-divider text="分割线" :dot="true"></un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

设置文本靠左靠右

可以通过position指定文字靠左靠右

<template>
  <un-divider text="靠左" position="left"></un-divider>
  <un-divider text="靠右" position="right"></un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

设置文本颜色和线条颜色

可以通过color和lineColor指定文字和线条颜色

<template>
  <un-divider
        text="分割线"
        color="#2979ff"
        lineColor="#ff0000"
  ></un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

插槽模式 3.3.1

<template>
  <un-divider>
    <text style="font-size: 14px;color: #2979ff;">分割线</text>
  </un-divider>
</template>

<script setup lang="ts">
// 代码逻辑
</script>

API

Props

参数	说明	类型	默认值
dashed	是否虚线	Boolean	false
hairline	是否细线	Boolean	true
dot	是否以点替代文字，优先于text字段起作用	Boolean	false
position	内容文本的位置	String	center
text	文本内容	String | Number	-
size	文本大小	String | Number	14
color	文本颜色	String	#909399
bold	文本加粗	Boolean	false
lineColor	线条颜色	String	#dcdfe6

Events

事件名	说明	回调参数	版本
click	divider组件被点击时触发	-	-

Slots

名称	说明	参数
default	自定义内容	-

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-divider-text-font-size	$text-base	文本字体大小
$un-divider-text-color-muted	$text-color-muted	文本颜色
$un-divider-text-margin	0 15px	文本边距
$un-divider-dot-font-size	$text-sm	点的字体大小
$un-divider-dot-margin	0 12px	点的边距
$un-divider-dot-color-muted	$text-color-muted	点的颜色