介绍

在页面顶部的导航栏。

引入

import Navbar from 'sard-uniapp/components/navbar/navbar.vue'
import NavbarItem from 'sard-uniapp/components/navbar-item/navbar-item.vue'

代码演示

基础使用

使用 title 显示居中的标题。

<template>
  <sar-navbar title="标题" />
</template>

返回按钮

设置 show-back 显示返回按钮，设置 back-text 显示返回文本。

vue lang="ts"

<template>
  <sar-navbar title="标题" show-back back-text="返回" @back="onBack" />
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'

const onBack = () => {
  toast('返回上一页')
}
</script>

vue lang="js"

<template>
  <sar-navbar title="标题" show-back back-text="返回" @back="onBack" />
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
const onBack = () => {
  toast("\u8FD4\u56DE\u4E0A\u4E00\u9875");
};
</script>

导航项

可以在 left/right 插槽中放置导航项。导航项带有默认的颜色和点击态。

内置的返回按钮也是使用导航项实现的。

<template>
  <sar-navbar title="标题">
    <template #left>
      <sar-navbar-item>返回上一页</sar-navbar-item>
    </template>
    <template #right>
      <sar-navbar-item icon="search" icon-family="demo-icons" />
      <sar-navbar-item text="分享" />
      <sar-navbar-item>
        <sar-badge value="5">
          <sar-icon family="demo-icons" name="chat-dots" size="40rpx" />
        </sar-badge>
      </sar-navbar-item>
    </template>
  </sar-navbar>
</template>

流动导航

默认情况下标题居中， left/right 绝对定位于左右两侧；可以使用 flow 使其变为流动布局。

<template>
  <sar-navbar title="发现" flow>
    <template #left>
      <sar-navbar-item icon="list-task" icon-family="demo-icons" />
    </template>
    <template #right>
      <sar-navbar-item icon="share" icon-family="demo-icons" />
      <sar-navbar-item icon="star" icon-family="demo-icons" />
      <sar-navbar-item icon="heart" icon-family="demo-icons" />
    </template>
  </sar-navbar>
</template>

自定义内容

默认插槽的内容会覆盖标题，可以实现更加自由的布局。

<template>
  <sar-navbar flow>
    <template #left>
      <sar-navbar-item text="城市" icon="down" reverse />
    </template>
    <sar-input placeholder="请输入关键词" root-style="border-radius: 9999px" />
    <template #right>
      <sar-navbar-item text="搜索" />
    </template>
  </sar-navbar>
</template>

背景色

使用 css 变量 --sar-navbar-bg 设置想要的背景色，例如全屏时设置背景透明。

<template>
  <sar-navbar
    title="标题"
    show-back
    back-text="返回"
    root-style="--sar-navbar-bg: transparent"
  />
</template>

文本颜色

使用 css 变量 --sar-navbar-item-color 和 --sar-navbar-title-color 设置导航项颜色和标题颜色。

<template>
  <sar-navbar
    title="标题"
    show-back
    back-text="返回"
    root-style="
      --sar-navbar-bg: var(--sar-primary);
      --sar-navbar-item-color: var(--sar-white);
      --sar-navbar-title-color: var(--sar-white);
    "
  />
</template>

API

NavbarProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
title	自定义标题	string	-
flow	默认 left/right 绝对定位于左右两侧，标题居中；可以使用 flow 使其变为流动布局。	boolean	false
show-back 1.12+	是否显示返回按钮（仅显示，返回逻辑需自行编写）	boolean	false
back-text 1.12+	返回按钮的文本	string	-
fixed 1.12+	是否固定到页面顶部	boolean	false
status-bar 1.12+	是否包含状态栏	boolean	false
fixation-class 1.23.2+	固定栏元素类名	string	-
fixation-style 1.23.2+	固定栏元素样式	StyleValue	-

NavbarSlots

插槽	描述	属性
default	自定义导航中间内容	-
title	自定义标题内容	-
left	自定义导航左侧区域内容	-
right	自定义导航右侧区域内容	-

NavbarEmits

事件	描述	类型
back	点击返回按钮项时触发	(event: any) => void

NavbarItemProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
text 1.12+	导航项文本	string	-
icon 1.12+	导航项图标	string	-
icon-family 1.12+	导航项图标字体名称	string	-
icon-size 1.12+	导航项图标大小	string	-
reverse 1.12+	默认图标在文本前面，可以互换位置	string	false

NavbarItemSlots

插槽	描述	属性
default	自定义默认内容	-

NavbarItemEmits

事件	描述	类型
click	点击导航项时触发	(event: any) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-navbar-height: 88rpx;
  --sar-navbar-bg: var(--sar-emphasis-bg);
  --sar-navbar-z-index: 999;

  --sar-navbar-title-max-width: 60%;
  --sar-navbar-title-font-size: var(--sar-text-lg);
  --sar-navbar-title-color: var(--sar-emphasis-color);

  --sar-navbar-item-padding-x: 20rpx;
  --sar-navbar-item-gap: 8rpx;
  --sar-navbar-item-font-size: var(--sar-text-lg);
  --sar-navbar-item-icon-size: 40rpx;
  --sar-navbar-item-color: var(--sar-primary);
  --sar-navbar-item-active-opacity: var(--sar-active-opacity);

  --sar-navbar-left-gap: 8rpx;
  --sar-navbar-right-gap: 8rpx;
}