分割线 Divider
划分空间的线，用于隔开内容。
基本使用
Show Code
vue
<template>
<n-divider></n-divider>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>带文字 指定文字位置
可选择文字位置 'left' | 'center' | 'right'
Center Text
Left Text
Right Text
Show Code
vue
<template>
<n-divider>Center Text</n-divider>
<n-divider position="left" :position-margin="120">Left Text</n-divider>
<n-divider position="right" :position-margin="120">Right Text</n-divider>
</template>虚线
Center Text
Show Code
vue
<template>
<n-divider dashed>Center Text</n-divider>
</template>自定义线宽
线宽3px
Center Text
Show Code
vue
<template>
<n-divider :borderWidth="3">Center Text</n-divider>
</template>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dashed | 是否为虚线 | boolean | false |
| position | 分割线标题的位置 | 'left' | 'center' |
| positionMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 position 必须为 left 或 right | string | number |
| borderWidth | 分割线宽度，单位px | number | 1 |