Navbar (导航栏)

自定义导航栏,支持透明背景,渐变背景

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page>
		<t-navbar :main-class="navbarStyle" title="导航栏" :type="navbarType" @back="leftClick" right-icon="setting"
			@rightClick="rightClick"></t-navbar>
		<t-card main-class="mlrt-30" title="Navbar 导航栏" sub-title="自定义导航栏,支持透明背景,渐变背景"></t-card>
		<t-col main-class="p-30">
			<t-col main-class="tdb tdr mb-30 pt-10">
				<t-section title='尺寸'></t-section>
				<t-row main-class="p-30 fww">
					<t-button type='p' main-class="mrb-15" @click="setNav('')">默认(44px)</t-button>
					<t-button type='p' main-class="mrb-15" @click="setNav('h-38px')">38</t-button>
					<t-button type='p' main-class="mrb-15" @click="setNav('h-88px')">88</t-button>
				</t-row>
			</t-col>
			<t-col main-class="tdb tdr mb-30 pt-10">
				<t-section title='主题背景'></t-section>
				<t-row main-class="p-30 fww fais">
					<t-button type='p' main-class="mrb-15" @click="setType('normal')">normal</t-button>
					<t-button type='p' main-class="mrb-15" @click="setType('info')">info</t-button>
					<t-button type='p' main-class="mrb-15" @click="setType('primary')">primary</t-button>
					<t-button type='p' main-class="mrb-15" @click="setType('error')">error</t-button>
					<t-button type='p' main-class="mrb-15" @click="setType('warning')">warning</t-button>
					<t-button type='p' main-class="mr-15" @click="setType('success')">success</t-button>
				</t-row>
			</t-col>
			<t-col main-class="tdb tdr mb-30 pt-10">
				<t-section title='自定义背景'></t-section>
				<t-row main-class="p-30 fww fais">
					<t-button type='p' main-class="mrb-15" @click="setNav('bg-#00aa7f')">#00aa7f</t-button>
					<t-button type='p' main-class="mrb-15" @click="setNav('bir-blue,red')">渐变</t-button>
					<t-button type='p' main-class="mrb-15" @click="setNav('bg')">透明</t-button>
				</t-row>
			</t-col>
			<t-col main-class="tdr tdb mb-30 pt-10">
				<t-section title='插槽'></t-section>
				<t-navbar type="p" :fixed="false" :placeholder="false" back-view-class="tdb plr-20 ptb-10 r-60 faic">
					<template v-slot:left>
						<t-row main-class="faic">
							<t-icon name="arrow-leftward"></t-icon>
							<t-line direction="column" line-size="5px" main-class="#bcbcbc mlr-20" length="24"></t-line>
							<t-icon name="home-fill" main-class=""></t-icon>
						</t-row>
					</template>
					<template v-slot:center>
						<t-text main-class="c-#fff">插槽定制样式</t-text>
					</template>
					<template v-slot:right>
						<t-icon name="setting" main-class="c-#fff"></t-icon>
					</template>
				</t-navbar>
			</t-col>
		</t-col>
	</t-page>
</template>
<script>
	export default {
		data() {
			return {
				navbarStyle: '',
				navbarType: 'normal'
			}
		},
		methods: {
			leftClick() {
				uni.showToast({
					title: "点击左侧图标"
				})
			},
			rightClick() {
				uni.showToast({
					title: "点击右侧图标"
				})
			},
			setNav(sty : string) {
				this.navbarStyle = sty
			},
			setType(type : string) {
				this.navbarStyle = ''
				this.navbarType = type
			}
		}
	}
</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(镂空)
title	String	``	导航中间标题文本
titleViewClass	String	``	标题文本盒子的样式
titleClass	String	``	标题文本的样式
backViewClass	String	``	返回按钮盒子的样式
backTextClass	String	``
rightIconClass	String	``	右侧图标的样式
safeAreaInsetTop	Boolean	true	是否在顶部使用安全区域嵌入
fixed	Boolean	true	是否固定定位
backIcon	String	arrow-left	返回按钮的图标
rightIcon	String	``	右侧图标
showBack	Boolean	true	是否显示返回按钮
backIconClass	String	``	返回按钮图标的样式
rightViewClass	String	``	右侧容器盒子的样式
rightTextClass	String	``	右侧文字的样式
placeholder	Boolean	true	是否占位防止塌陷
border	Boolean	false	是否显示边框
backText	String	``	返回按钮的文本
rightText	String	``	右侧文本
autoBack	Boolean	true	是否自动处理返回动作

事件

名称	返回参数	说明
rightClick	-	当点击右侧区域时触发
back	-	当点击返回按钮时触发

插槽

名称	返回值	说明
name	-