# t-line

Line 线条

t-line 组件介绍

线条组件，用于绘制线条，支持多种配置，包括线条大小、长度、方向、是否为细边框以及边框样式。

t-line 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-line 基础用法

基础用法参考 demo/line/line.uvue，通过 type 属性设置线条主题。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15"
				title="Line 线条"
				sub-title=" 创建线条，提供丰富的样式和行为配置。通过 type 属性，可设置线条主题。"></t-card>
		<introduction title="基础功能">
			<t-col class="r-10 p-10">
				<t-line class='mtb-15'
						type="success"></t-line>
				<t-line class='mtb-15'
						type="error"></t-line>
				<t-line class='mtb-15'
						type="primary"></t-line>
				<t-line class='mtb-15'
						type="warning"></t-line>
			</t-col>
		</introduction>
		<introduction title="纵向">
			<t-row class="r-10 p-10">
				<t-line direction="col"
						class='m-15'
						length="150px"></t-line>
				<t-line direction="col"
						class='m-15'
						length="150px"
						type="success"></t-line>
				<t-line direction="col"
						class='m-15'
						length="150px"
						type="error"></t-line>
				<t-line direction="col"
						class='m-15'
						length="150px"
						type="primary"></t-line>
				<t-line direction="col"
						class='m-15'
						length="150px"
						type="warning"></t-line>
			</t-row>
		</introduction>
		<introduction title="虚线">
			<t-col class="r-10 p-10">
				<t-line class='mtb-15'
						lineStyle="dashed"></t-line>
				<t-line class='mtb-15'
						type="success"
						lineStyle="dashed"></t-line>
				<t-line class='mtb-15'
						type="error"
						lineStyle="dashed"></t-line>
				<t-line class='mtb-15'
						type="primary"
						lineStyle="dashed"></t-line>
				<t-line class='mtb-15'
						type="warning"
						lineStyle="dashed"></t-line>
			</t-col>
		</introduction>
		<introduction title="更细的线条">
			<t-col class="r-10 p-10">
				<t-line class='mtb-15'
						:hairline="true"></t-line>
				<t-line class='mtb-15'
						type="success"
						:hairline="true"></t-line>
				<t-line class='mtb-15'
						type="error"
						:hairline="true"></t-line>
				<t-line class='mtb-15'
						type="primary"
						:hairline="true"></t-line>
				<t-line class='mtb-15'
						type="warning"
						:hairline="true"></t-line>
			</t-col>
		</introduction>
		<introduction title="设置线条宽度">
			<t-col class="r-10 p-10">
				<t-line class='mtb-15'
						:lineSize="10"></t-line>
				<t-line class='mtb-15'
						:lineSize="20"
						type="success"></t-line>
				<t-line class='mtb-15'
						:lineSize="30"
						type="error"></t-line>
				<t-line class='mtb-15'
						:lineSize="40"
						type="primary"></t-line>
				<t-line class='mtb-15'
						:lineSize="50"
						type="warning"></t-line>
			</t-col>
		</introduction>
		<introduction title="自定义颜色">
			<t-col class="r-10 p-10">
				<t-line class='mtb-15 bc-blue'
						:lineSize="10"></t-line>
			</t-col>
		</introduction>
	</view>
</template>

<script setup>

</script>

t-line Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain
lineSize	String	"1px"	线条的粗细	-
length	String	"auto"	线条的长度	-
direction	String	"row"	线条的方向	row, column
hairline	Boolean	true	是否使用细线条0.5px	true, false
lineStyle	String	"solid"	线条的类型	solid, dashed, dotted, double

t-line Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-line Slots

插槽名	说明
default	内容插槽，用于在线条中放置内容

LineStyle 说明

类型	说明
solid	实线
dashed	虚线
dotted	点状线
double	双横线