# t-section

Section 分区

t-section 组件介绍

标题组件，创意标题栏，适用于展示创意作品、设计灵感的标题。

t-section 平台兼容

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

t-section 基础用法

<template>
	<view class="p-15">
		<t-card class="mb-15 r-5"
				title='Section 标题'
				sub-title="创意标题栏，适用于展示创意作品、设计灵感的标题。"></t-card>
		<t-section class="mb-15 r-5"
				   title="线条样式控制"
				   @click="test"
				   :hover="true"></t-section>
		<t-section class="mb-15 r-5"
				   title="线条样式控制"
				   type="error"
				   line-class="twhr-7"></t-section>

		<t-section title="主标题-副标题"
				   sub-title="副标题测试"
				   class="mb-15 r-5"
				   type="primary"></t-section>

		<t-section title="线条渐变色"
				   type="primary"
				   line-class="bib-#ffb703,#ff416c"
				   class="mb-15 r-5"></t-section>
		<t-section title="调整字体大小"
				   title-class="s-40"
				   line-class="w-15 h-40 r-40 mlr-15"
				   sub-title-class="s-30"
				   sub-title="副标题测试"></t-section>
	</view>
</template>
<script setup>
	function test() {
		console.log(123)
	}
</script>

t-section Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
tag	String	""	描述	-
tagClass	String	""	描述样式	-
title	String	""	标题	-
titleClass	String	""	标题样式	-
subTitle	String	""	副标题	-
subTitleClass	String	""	副标题样式	-
line	Boolean	true	是否显示底部线条	true, false
lineClass	String	""	线条样式	-

t-section Events

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

t-section Slots

插槽名	说明
right	右侧插槽，用于放置右侧内容