# t-navbar

Navbar 导航栏

t-navbar 组件介绍

导航栏组件，自定义导航栏，支持透明背景、渐变背景，提供完整的导航功能。

t-navbar 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-navbar 基础用法

基础用法参考 demo/navbar/navbar.uvue，支持透明背景、渐变背景及插槽定制。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-navbar title="导航栏"
				  :class="navbarStyle"
				  :type="navbarType"
				  @back="leftClick"
				  right-icon="setting"
				  @rightClick="rightClick"></t-navbar>
		<t-card class="mlrt-15"
				title="Navbar 导航栏"
				sub-title="自定义导航栏,支持透明背景,渐变背景"></t-card>

		<t-col class="p-15">
			<t-col class="r-10 mb-15 pt-5">
				<t-section title='尺寸'></t-section>
				<t-row class="p-15 f fww">
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setNav('')">默认(44px)</t-button>
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setNav('h-38')">38</t-button>
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setNav('h-88')">88</t-button>
				</t-row>
			</t-col>

			<t-col class="r-10 mb-15 pt-5">
				<t-section title='主题背景'></t-section>
				<t-row class="p-15  f fww fais">
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setType('')">normal</t-button>
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setType('info')">info</t-button>
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setType('primary')">primary</t-button>
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setType('error')">error</t-button>
					<t-button type="primary"
							  class="mb-7 mr-7"
							  @click="setType('warning')">warning</t-button>
					<t-button type="primary"
							  class="mr-7"
							  @click="setType('success')">success</t-button>
				</t-row>
			</t-col>
			<t-section title='插槽'
					   class="mb-15 r-10"></t-section>
			<t-navbar type="primary"
					  :fixed="false"
					  :placeholder="false"
					  class="r-10"
					  back-view-class="plr-10 ptb-7 r-30 faic">
				<template #left>
					<t-row :class="[`fc r-50 h-25 w-60 tvg`]">
						<t-icon name="arrow-left"
								class="sfwb"
								size="large"></t-icon>
						<t-line direction="column"
								:hairline="false"
								:line-size="2"
								class="bc-#333333 mlr-10"
								length="12"></t-line>
						<t-icon name="home-fill"
								class="sfwb"
								size="large"></t-icon>
					</t-row>
				</template>
				<template #center>
					<t-text :fore="true"
							type="primary"
							class="sfwb">插槽定制样式</t-text>
				</template>
				<template #right>
					<t-icon name="setting"
							size="large"
							:fore="true"
							type="primary"
							:hover="true"></t-icon>
				</template>
			</t-navbar>
		</t-col>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	// @tui-autocss-include
	const ncss = 'h-38 h-88'

	const navbarStyle = ref('')
	const navbarType = ref('')

	const leftClick = () => {
		uni.showToast({
			title: "点击左侧图标"
		})
	}

	const rightClick = () => {
		uni.showToast({
			title: "点击右侧图标"
		})
	}

	const setNav = (sty : string) => {
		navbarStyle.value = sty
	}

	const setType = (type : string) => {
		navbarStyle.value = ''
		navbarType.value = type
	}
</script>

t-navbar Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
title	String	""	导航中间标题文本	-
titleViewClass	String	""	标题文本盒子的样式	-
titleClass	String	""	标题文本的样式	-
showBack	Boolean	true	是否显示返回按钮	true, false
backViewClass	String	""	返回按钮盒子的样式	-
backIconClass	String	""	返回按钮图标的样式	-
backTextClass	String	""	返回按钮文本的样式	-
rightViewClass	String	""	右侧容器盒子的样式	-
rightIconClass	String	""	右侧图标的样式	-
rightTextClass	String	""	右侧文字的样式	-
safeAreaInsetTop	Boolean	true	是否在顶部使用安全区域嵌入	true, false
placeholder	Boolean	true	是否占位防止塌陷	true, false
fixed	Boolean	true	是否固定定位	true, false
border	Boolean	false	是否显示边框	true, false
backIcon	String	"arrow-left"	返回按钮的图标	-
backText	String	""	返回按钮的文本	-
rightIcon	String	""	右侧图标	-
rightText	String	""	右侧文本	-
autoBack	Boolean	true	是否自动处理返回动作	true, false

t-navbar Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-navbar Slots

插槽名	说明
left	左侧插槽，用于自定义返回按钮区域
center	中间插槽，用于自定义标题区域
right	右侧插槽，用于自定义右侧按钮区域