Section (标题)
创意标题栏，适用于展示创意作品、设计灵感的标题。
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page main-class="p-30">
<t-card main-class="mb-30" title='Section 标题' sub-title="创意标题栏，适用于展示创意作品、设计灵感的标题。"></t-card>
<t-section main-class="mb-30" title="主题-type" @click="test" :hover="true"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="p" @click="test"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="e" :disabled="true"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="w"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="s"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="i"></t-section>
<t-section main-class="mb-30" title="主题-effect" @click="test"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="p" effect="normal" @click="test"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="e" effect="dark"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="w" effect="disabled"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="s" effect="light"></t-section>
<t-section main-class="mb-30" title="装饰线条主题" type="i" effect="plain"></t-section>
<t-section main-class="mb-30" title="主题-size" type="p" line-class="twhr-15"></t-section>
<t-section main-class="mb-30" title="线条样式控制" type="e" size="large" line-class="twhr-15"></t-section>
<t-section main-class="mb-30" title="线条样式控制" type="w" size="medium" line-class="twhr-15"></t-section>
<t-section main-class="mb-30" title="线条样式控制" type="s" size="small" line-class="twhr-15"></t-section>
<t-section main-class="mb-30" title="线条样式控制" type="i" size="mini" line-class="twhr-15"></t-section>
<t-section title="更多" type="p" main-class="mb-30" line-class="twhr-15"></t-section>
<t-section title="主标题-副标题" main-class="mb-30" type="p"></t-section>
<t-section main-class="mb-30" title="主标题" type="p" sub-title="副标题测试" @click="test"></t-section>
<t-section main-class="mb-30" title="主标题" type="e" sub-title="副标题测试"></t-section>
<t-section main-class="mb-30" title="主标题" type="w" sub-title="副标题测试"></t-section>
<t-section main-class="mb-30" title="主标题" type="s" sub-title="副标题测试"></t-section>
<t-section main-class="mb-30" title="主标题" type="i" sub-title="副标题测试"></t-section>
<t-section title="线条渐变色" type="p" line-class="bib-#ffb703,#ff416c" main-class="mb-30"></t-section>
<t-section title="调整字体大小" main-class="s-50" sub-title="副标题测试"></t-section>
</t-page>
</template>
<script setup>
function test() {
console.log(123)
}
</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(镂空) |
| type | String | primary | ||
| titleClass | String | `` | 标题样式 | |
| tagClass | String | `` | 描述样式 | |
| subTitleClass | String | `` | 副标题样式 | |
| tag | String | `` | 描述 | |
| title | String | `` | 标题 | |
| lineClass | String | `` | 线条样式 | |
| subTitle | String | `` | 副标题 | |
| line | Boolean | true | 是否显示底部线条 |
事件
| 名称 | 返回参数 | 说明 |
|---|---|---|
| click | (e : UniPointerEvent) | - |
插槽
| 名称 | 返回值 | 说明 |
|---|---|---|
| name | - |