跳到主要内容

导航栏 Navbar

为页面提供导航功能,用于页面顶部

安装使用

import { TiNavbar } from '@titian-design/mobile-vue'

用法示例

基础用法

<template>
<TiNavbar title="标题" />
<TiNavbar title="标题" subtitle="副标题" />
</template>

<script lang="ts" setup>
import { TiNavbar } from '@titian-design/mobile-vue';
</script>

沉浸式

<template>
<div @scroll="onScroll">
<TiNavbar ref="navbarRef" title="标题" type="immersion" />
滚动内容
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiNavbar } from '@titian-design/mobile-vue';
const onScroll = (e) => {
navbarRef.value.$el.updateOpacity({ scrollTop: e.target.scrollTop });
};
</script>

毛玻璃效果

在没有占位的情况下有效,沉浸式模式默认没有占位

<template>
<TiNavbar title="标题" :use-placeholder="false" frosted-glass />
<TiNavbar title="标题" type="immersion" frosted-glass />
</template>

<script lang="ts" setup>
import { TiNavbar } from '@titian-design/mobile-vue';
</script>

返回和回到首页

<template>
<TiNavbar title="标题" use-home-button @back="back" @home="home" />
</template>

<script lang="ts" setup>
import { TiNavbar } from '@titian-design/mobile-vue';
const back = () => {}
const home = () => {}
</script>

自定义icon

<template>
// 城市选择
<TiNavbar title="标题">
<view slot="prefix">城市<TiIcon name="arrow-down" /></view>
</TiNavbar>

// 自定义返回
<TiNavbar title="标题">
<view slot="prefix"><TiIcon name="arrow-back" />返回</view>
</TiNavbar>

// 自定义搜索
<TiNavbar title="标题">
<view slot="prefix"><TiIcon name="search" />搜索 </view>
</TiNavbar>

// 自定义title
<TiNavbar>
<view slot="title">
<TiTabs :tabs="['全部', '热销']" ext-style="width: 160px;--tabs-background-color: transparent" />
</view>
</TiNavbar>

// 右侧icon
<TiNavbar title="标题" :right-icons="['category']" />
</template>

<script lang="ts" setup>
import { TiNavbar, TiTabs, TiIcon } from '@titian-design/mobile-vue';
</script>

TiNavbar API

属性 Properties

名称类型必填默认值说明备注
typestringnormal导航栏的风格,常规模式:normal 沉浸式:immersion-
backgroundstring-导航栏的背景,可设置颜色,渐变色,图片,同css属性background用法-
font-colorstring-导航条前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000-
titlestring-导航栏的标题-
subtitlestring-导航栏的副标题-
left-iconsarray-导航栏左侧图标集合-
right-iconsarray-导航栏右侧图标集合H5专属
use-placeholderbooleantrue是否自动产生一个占位,可以避免导航栏遮盖下面的元素-
use-back-buttonbooleantrue使用组件内部返回按钮-
use-home-buttonbooleanfalse使用组件内部回到首页按钮-
transition-distancenumber100沉浸式模式下,滑动指定距离,标题部分从透明至完全显示-
transition-start-topnumber50沉浸式模式下,动画开始的起始距离-
frosted-glassbooleanfalse毛玻璃效果,在usePlaceholder为false 或者 沉浸式模式下有效-
subtitle-heightnumber-使用了subtitle的插槽的情况下,副标题内容高度,此时subtitleHeight为必传-
loadingbooleanfalse是否使用loading-
ext-stylestring | Record<string, string>-根节点样式-

事件 Events

名称参数列表描述备注
click-icon(e: CustomEvent<{iconName: string}>) => void点击左侧或者右侧icon时触发-
back(e: CustomEvent<{iconName: string}>) => void点击默认返回按钮时触发-
home(e: CustomEvent<{iconName: string}>) => void点击默认回到首页按钮时触发-

插槽 Slots

名称说明备注
prefix导航栏左侧图标位置插槽-
title导航栏中间标题位置插槽-
suffix导航栏右侧位置插槽H5专属

外部样式类 External Classes

名称说明备注
ext-title-class标题样式类名-
ext-subtitle-class副标题样式类名-
ext-class根节点样式类名-

CSS 变量 CSS Variable

变量默认值说明备注
--navbar-title-font-size34rpx标题字号-
--navbar-title-color#000000标题颜色,仅支持 #ffffff 和 #000000-
--navbar-title-max-width346rpx标题最大宽度-
--navbar-subtitle-font-size24rpx副标题字号-
--navbar-subtitle-color#9e9e9e副标题颜色-
--navbar-padding-h16rpx导航栏水平方向内边距-
--navbar-background#ffffff导航栏背景----
--navbar-backdrop-filterblur(15px)毛玻璃效果的虚化程度-
--navbar-menu-background-左侧自定义的胶囊按钮的背景色-
--navbar-menu-border-color-左侧自定义的胶囊按钮的边框颜色-