Divider 分割线

点击扫码预览

23:47



---

🎉

组件名：rice-divider

组件类型：RiceDividerComponentPublicInstance

右侧模拟器为iframe嵌入，可能出现布局错乱等现象，可扫右侧二维码或 点击在线预览

用于将内容分割成多个区域。

平台兼容性

uni-app x

Android	iOS	微信小程序	H5	鸿蒙Next
√	√	√	√	×

uni-app

Android	iOS	微信小程序	H5	鸿蒙Next
×	×	×	×	×

基本使用

水平分割线

<rice-divider margin="10px 0"></rice-divider>
<rice-divider dashed></rice-divider>

带文字的分割线

文字可以通过 text 传入； 文字位置通过 text-position 传入，默认为 center

<rice-divider text="文字信息" text-position="left"></rice-divider>
<rice-divider text="文字信息"></rice-divider>
<rice-divider text="文字信息" text-position="right"></rice-divider>

带文字的虚线分割线

可以通过 dashed 设置为虚线

<rice-divider dashed text="文字信息" text-position="left"></rice-divider>
<rice-divider dashed text="文字信息"></rice-divider>
<rice-divider dashed text="文字信息" text-position="right"></rice-divider>

自定义文字和线条样式

• 可以通过插槽自定义文字区域内容
• 可以通过 text-color 等设置文字样式
• 可以通过 hairline 设置是否为 1px 的线条

<rice-divider text-position="left" width="686rpx" border-color="#52a8ff">
	<template #default>
		<rice-icon name="apps-o" size="18px" color="#52a8ff"></rice-icon>
	</template>
</rice-divider>
<rice-divider text="文字信息" text-size="16" text-color="#ed6a0c" border-color="#ed6a0c"/>
<rice-divider text="1px的线条" :hairline="false" text-position="right" text-color="#ed6a0c" border-color="#ed6a0c"/>

垂直分割线

Template

<view class="box">
	<rice-text text="文字信息" size="14px" color="#999"/>
	<rice-divider direction="vertical" width="32px"/>
	<rice-text text="文字信息" size="14px" color="#999"/>
	<rice-divider direction="vertical" width="32px"/>
	<rice-text text="文字信息" size="14px" color="#999"/>
</view>

Style

<style lang="scss">
.box{
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 16px 0;
}
</style>

API

Props

参数	说明	类型	默认值
direction	分割线的方向，可选值 horizontal vertical	string	horizontal
dashed	是否使用虚线	boolean	false
hairline	是否使用0.5px的线条	boolean	true
width	线条宽度, direction 为 vertical 时是线条的高度	string / number	100%
border-color	线条颜色	string	#d6d7d9
border-dark-color	暗黑模式下的线条颜色，不传会自动适配	string	#3a3a3c
text	文字内容 direction 为 vertical 时无效	string/number/boolean	--
text-size	文字大小	string/number	14px
text-position	文字的位置，可选值 left right center	string	center
text-color	文字颜色	string	#999
text-dark-color	暗黑模式下文字颜色，不传会自动适配	string	rgba(255,255,255,.75)
margin	自定义边距	string	direction 为 horizontal 时是 margin: 20px auto;，否则为 margin: 0 20px;

Slots

名称	说明
default	自定义内容区域