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:right>
				<tm-icon _class="px-32" name="tmicon-plus"></tm-icon>
			</template>
		</tm-navbar>
        <tm-sheet>
            <tm-text :fontSize="24" _class="font-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),如果对该框架感兴趣的可以参与我们一同进步!