TnTitle 标题

该组件可以在页面中显示标题，支持自定义标题内容，支持自定义标题栏样式。

组件位置

nodeuni_modules

typescript

import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'

import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'

typescript

import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'

import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

设置title属性设置标题的内容

vue

<template>
  <TnTitle title="图鸟UI" />
</template>

<template>
  <TnTitle title="图鸟UI" />
</template>

内置标题类型

左边竖线标题

设置mode为vLine，可以显示左边的竖线

通过assistColor属性可以设置左边竖线的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色

vue

<template>
  <TnTitle title="图鸟UI" mode="vLine" assist-color="tn-red" />
</template>

<template>
  <TnTitle title="图鸟UI" mode="vLine" assist-color="tn-red" />
</template>

左边点标题

设置mode为dot，可以显示左边的点

通过assistColor属性可以设置左边点的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色

vue

<template>
  <TnTitle title="图鸟UI" mode="dot" assist-color="tn-red" />
</template>

<template>
  <TnTitle title="图鸟UI" mode="dot" assist-color="tn-red" />
</template>

底部横线标题

设置mode为hLine，可以显示底部的横线

通过assistColor属性可以设置底部横线的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色

vue

<template>
  <TnTitle title="图鸟UI" mode="hLine" assist-color="tn-red" />
</template>

<template>
  <TnTitle title="图鸟UI" mode="hLine" assist-color="tn-red" />
</template>

副标题标题

设置mode为subTitle，可以显示副标题

通过subTitle属性可以设置副标题的内容

通过assistColor属性可以设置副标题的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值文字颜色

vue

<template>
  <TnTitle title="图鸟UI" sub-title="Tuniao" assist-color="tn-red" />
</template>

<template>
  <TnTitle title="图鸟UI" sub-title="Tuniao" assist-color="tn-red" />
</template>

透明标题

设置mode为transparent，可以显示透明标题，此时color属性可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色

vue

<template>
  <TnTitle title="图鸟UI" mode="transparent" color="gradient__cool-1" />
</template>

<template>
  <TnTitle title="图鸟UI" mode="transparent" color="gradient__cool-1" />
</template>

API

Props

属性名	说明	类型	默认值	可选值
title	标题内容	String	-	-
sub-title	子标题内容，设置 `mode` 为 `subTitle` 时生效	String	-	-
mode	标题模式，每个模式的说明可以查看上面的说明	String	`normal`	`vLine` \ `dot` \ `hLine` \ `subTitle` \ `transparent`
size	设置标题尺寸，内置`sm`、`lg`、`xl`，同时也可以传递指定的尺寸	String	-	`sm` \ `lg` \ `xl`
align	标题对齐方式	String	`left`	`center` \ `right`
color	标题颜色，以 tn 开头则使用图鸟内置的颜色	String	-	-
assist-color	辅助元素颜色，以 tn 开头则使用图鸟内置的颜色	String	-	-

Emits

事件名	说明	类型
click	点击事件	`() => void`

TnTitle 标题 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

内置标题类型 ​

左边竖线标题 ​

左边点标题 ​

底部横线标题 ​

副标题标题 ​

透明标题 ​

API ​

Props ​

Emits ​