Divider 分割线

用于分隔内容的分割线。

基础用法

上半部分内容

下半部分内容

<template>
  <div>上半部分内容</div>
  <x-divider />
  <div>下半部分内容</div>
</template>

<script setup>
import { Divider } from '@xto/base'
</script>

设置文案

可以在分割线上自定义文案。

内容区域

分割线

内容区域

左侧文案

内容区域

右侧文案

<template>
  <x-divider>分割线</x-divider>
  <x-divider content-position="left">左侧文案</x-divider>
  <x-divider content-position="right">右侧文案</x-divider>
</template>

垂直分割

文字

文字

文字

<template>
  <span>文字</span>
  <x-divider direction="vertical" />
  <span>文字</span>
</template>

API

Props

属性	说明	类型	默认值
direction	设置分割线方向	'horizontal' | 'vertical'	'horizontal'
contentPosition	设置文案位置	'left' | 'center' | 'right'	'center'
borderStyle	设置分割线样式	'solid' | 'dashed' | 'dotted'	'solid'