ui-divider 分割线组

版本：v2.3.11

分割线组件用于分隔内容区域，支持水平和垂直两种方向，以及自定义样式

基本使用

<template>
  <div class="divider-demo">
    <p>这是分割线上方的内容</p>
    <ui-divider />
    <p>这是分割线下方的内容</p>
    
    <div style="display: flex; align-items: center; gap: 16px; margin: 20px 0;">
      <p>左侧内容</p>
      <ui-divider direction="vertical" />
      <p>右侧内容</p>
    </div>
  </div>
</template>

<style scoped>
.divider-demo {
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
direction	String	'horizontal'	分割线方向，可选值：horizontal、vertical
contentPosition	String	-	分割线文字位置，可选值：left、center、right
margin	Number	16	分割线上左右外边距，单位：px
color	String	'#e5e5e5'	分割线颜
thickness	Number	1	分割线厚度，单位：px

Slots

名称	说明
default	分割线中间的文字内容

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/divider/divider