导航栏 Navbar

布局 · 展示组件

页面导航栏

按需导入wbbb-ui/components/navbar

基础用法

<script setup lang="ts">
import { WbbbNavbar } from 'wbbb-ui/components/navbar'
import 'wbbb-ui/styles/navbar'
</script>

<template>
  <WbbbNavbar />
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认内容态

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`border`	控制是否显示分隔线或边框。	`boolean`	`true`	否
`fixed`	是否将组件固定在视口位置。	`boolean`	`false`	否
`leftArrow`	是否在左侧显示返回箭头。	`boolean`	`false`	否
`leftText`	设置左侧显示的文字。	`string`	`''`	否
`placeholder`	设置尚未输入或选择时的占位文案。	`boolean`	`false`	否
`rightText`	设置右侧显示的文字。	`string`	`''`	否
`safeAreaTop`	是否为设备顶部安全区增加留白。	`boolean`	`true`	否
`title`	设置组件标题文字。	`string`	`''`	否

事件（Events）

clickLeft
clickRight

插槽（Slots）

left
title
right

双向绑定

不支持 v-model。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：更多状态组合和跨端表现请在 Playground 中验证。

导航栏 Navbar ​

基础用法 ​

状态与交互 ​

API 参考 ​