Divider (分割线)

内容进行分割展示

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page main-class="p-30" title="分割线">
		<t-card main-class="mb-30" title="Divider 分割线" sub-title="内容进行分割展示"></t-card>
		<t-section title='功能展示' type='p' main-class="tdb-tdr"></t-section>
		<t-col main-class="mt-30 tdr tdb plr-100 pt-30">
			<t-divider main-class="mb-30" :line="line" :dot="isdot" :lineStyle="lineStyle" :text="text"></t-divider>
			<t-divider main-class="mb-30" :line="line" :dot="isdot" type="success" :lineStyle="lineStyle"
				:text="text"></t-divider>
			<t-divider main-class="mb-30" :line="line" :dot="isdot" type="error" :lineStyle="lineStyle"
				:text="text"></t-divider>
			<t-divider main-class="mb-30" :line="line" :dot="isdot" type="primary" :lineStyle="lineStyle"
				:text="text"></t-divider>
			<t-divider main-class="mb-30" :line="line" :dot="isdot" type="warning" :lineStyle="lineStyle"
				:text="text"></t-divider>
		</t-col>
		<t-row main-class="fww tdr tdb mt-20 p-20">
			<t-button size='mini' main-class="mrb-30" type='p' @click="setText">设置文本</t-button>
			<t-button size='mini' type='p' main-class="mrb-30" @click="setBorder">设置线条样式</t-button>
			<t-button size='mini' type='p' main-class="mrb-30" @click="setBorder1">不显示线条</t-button>
			<t-button size='mini' type='p' main-class="mrb-30" @click="setDot">显示圆点</t-button>
		</t-row>
	</t-page>
</template>
<script setup>
	const text = ref('页面有限，服务不止')
	const line = ref(true)
	const lineStyle = ref('solid')
	const isdot = ref(false)
	function setText() {
		text.value = text.value == '页面有限，服务不止' ? '加载中' : '页面有限，服务不止'
	}
	function setBorder() {
		lineStyle.value = lineStyle.value == 'solid' ? 'dashed' : 'solid'
	}
	function setBorder1() {
		line.value = line.value ? false : true
	}
	function setDot() {
		isdot.value = !isdot.value
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
text	String	页面不止，服务有限	分割线中间展示内容
line	Boolean	true	是否显示分割线线条
lineClass	String	``	分割线的样式
textClass	String	``	分割线内容样式
lineStyle	String	solid	分割线类型	solid: 实线 dashed: 虚线
dot	Boolean	false	是否显示圆点
dotClass	String	``	圆点的样式