Skip to content
On this page

组件库文档 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-VUEAPP-NVUE小程序WEB/H5VUE3/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
borderDirectionStringbottom边线的方向,可选值:top,right,bottom,left
round[Number,String]0圆角0-25,单位rpx
marginArrayasPropType<Array<number>>()=>[0,0]外间距[x,y]x=左右,y=上下
paddingArrayasPropType<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颜色
hideHomeBooleanfalse是否隐藏首页图标
hideBackBooleanfalse是否隐藏返回图标
isPlaceBooleantrue是否占位,如果为false,底部内容会被导航遮盖,true则会店内内容位置
beforeBack[Boolean,Function]()=>true是否隐藏返回图标,可以直接返回Boolean,或者Promise<Boolean>
homePath[String]/pages/index/index返回首页的路径,注意:需要hideHome属性为false
blurBooleanfalse背景磨砂,可选值:false,true;注意:当为渐变背景时,背景磨砂效果将会消失
iconFontSizev3.0.73+[Number]37返回图标,Home图标字号
unitv3.0.73+[String]rpx字号单位
darkBgColorString''有时自动的背景,可能不是你想要暗黑背景,此时可以使用此参数,强制使用背景色

🌹 事件

事件名参数返回数据描述
click
close

🌽 slot插槽

名称数据名称数据类型说明
left------左侧插槽
default------中间插槽
right------右侧插槽

🥗 ref方法

💏 文档贡献

此页文档由ygy贡献(git,github),如果对该框架感兴趣的可以参与我们一同进步!