组件库文档 tmui.design
标题栏 Navbar
页面自定标题栏,时,请务必放置在页面的最顶部。
🌶️ 标题栏 Navbar 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-navbar title="标题导航栏" color="primary" linear="right" linearDeep="accent">
<template v-slot:left>
标题导航栏
</template>
<template v-slot:right>
<tm-icon _class="px-32" name="tmicon-plus"></tm-icon>
</template>
</tm-navbar>
<tm-sheet>
<tm-text
:fontSize="24"
_class="text-weight-b"
label="使用时必须放置在页面的顶部
它有非多的属性,请行配置其属性,当为渐变背景时,背景磨砂效果将会消失.
"
></tm-text>
</tm-sheet>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmNavbar from '@/tmui/components/tm-navbar/tm-navbar.vue'
const list = ref([{ title: '开始' }, { title: '投放中' }, { title: '审核' }, { title: '最后审查' }, { title: '完成' }])
const list2 = ref([{ title: '开始' }, { title: '投放中' }, { title: '审核' }])
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
followTheme | [Boolean,String] | true | 是否跟随主题,可选值:false,true |
transprent | [Boolean,String] | false | 是否透明,可选值:false,true |
color | [String] | white | 背景主题色,对应基础容器Sheet组件的color |
text | [Boolean] | false | 是否浅色背景,可选值:false,true |
border | [Number,String] | 0 | 边框 |
shadow | [Number,String] | 1 | 投影,0-25 |
borderDirection | String | bottom | 边线的方向,可选值:top,right,bottom,left |
round | [Number,String] | 0 | 圆角0-25,单位rpx |
margin | ArrayasPropType<Array<number>> | ()=>[0,0] | 外间距[x,y]x=左右,y=上下 |
padding | ArrayasPropType<Array<number>> | ()=>[0,0] | 内间距[x,y]x=左右,y=上下 |
height | [Number] | 44 | 高度,单位px |
leftWidth | [Number] | 220 | 指两边,左宽度除了中间,中间标题宽度为自动 |
rightWidth | [Number] | 220 | 指两边,左宽度除了中间,中间标题宽度为自动 |
fontSize | [Number] | 30 | 字体大小 |
title | [String] | 标题 | 标题文字 |
fontColor | [String] | "" | 字体颜色,默认为自动,提供了,将强制使用本主题色 |
homeColor | [String] | "" | 左侧icon颜色 |
hideHome | Boolean | false | 是否隐藏首页图标 |
hideBack | Boolean | false | 是否隐藏返回图标 |
isPlace | Boolean | true | 是否占位,如果为false,底部内容会被导航遮盖,true则会店内内容位置 |
beforeBack | [Boolean,Function] | ()=>true | 是否隐藏返回图标,可以直接返回Boolean,或者Promise<Boolean> |
homePath | [String] | /pages/index/index | 返回首页的路径,注意:需要hideHome属性为false |
blur | Boolean | false | 背景磨砂,可选值:false,true;注意:当为渐变背景时,背景磨砂效果将会消失 |
iconFontSizev3.0.73+ | [Number] | 37 | 返回图标,Home图标字号 |
unitv3.0.73+ | [String] | rpx | 字号单位 |
darkBgColor | String | '' | 有时自动的背景,可能不是你想要暗黑背景,此时可以使用此参数,强制使用背景色 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | |||
close |
🌽 slot插槽
名称 | 数据名称 | 数据类型 | 说明 |
---|---|---|---|
left | --- | --- | 左侧插槽 |
default | --- | --- | 中间插槽 |
right | --- | --- | 右侧插槽 |
🥗 ref方法
无