Navbar 导航栏

基础用法

<vz-navbar title="Navbar 导航栏"></vz-navbar>

右侧图标

<vz-navbar
  title="Navbar 导航栏"
  right-icon="iconfont icon-setup"
  :fixed="false"
  :safe-area-inset-top="false"
></vz-navbar>

两侧文字

<vz-navbar
  title="Navbar 导航栏"
  left-text="返回"
  right-text="设置"
  :fixed="false"
  :safe-area-inset-top="false"
></vz-navbar>

自定义颜色

<vz-navbar
  title="Navbar 导航栏"
  left-text="返回"
  right-icon="iconfont icon-setup"
  title-color="#ffffff"
  left-color="violet"
  right-color="teal"
  background="linear-gradient(to right, teal, violet)"
  :fixed="false"
  :safe-area-inset-top="false"
></vz-navbar>

插槽

<vz-navbar
  side-width="auto"
  :backable="false"
  :fixed="false"
  title-size="14px"
  :safe-area-inset-top="false"
  class="navbar"
  @left="handleClickLeft"
  @right="handleClickRight"
>
  <template #left>
    <view class="navbar_left">
      <text>郑州</text>
      <vz-icon name="vz-icon-arrow-bottom"></vz-icon>
    </view>
  </template>
  <view style="width: 100%">
    <vz-input
      placeholder="请输入"
      prefix-icon="vz-icon-search"
      height="30px"
      text-size="14px"
      background="var(--vz-bg-color-page)"
      round
    ></vz-input>
  </view>
  <template #right>
    <view class="navbar_right">
      <vz-icon name="iconfont icon-setup"></vz-icon>
    </view>
  </template>
</vz-navbar>

右侧无内容

<vz-navbar
  :backable="false"
  :right="false"
  :fixed="false"
  :safe-area-inset-top="false"
  class="navbar"
  @left="handleClickLeft"
>
  <template #left>
    <view class="navbar_left">
      <text>郑州</text>
      <vz-icon name="vz-icon-arrow-bottom"></vz-icon>
    </view>
  </template>
  <view style="width: 100%">
    <vz-input
      placeholder="请输入"
      prefix-icon="vz-icon-search"
      height="30px"
      text-size="14px"
      background="var(--vz-bg-color-page)"
      round
    ></vz-input>
  </view>
</vz-navbar>

Props

属性名	说明	类型	默认值	样式变量
fixed	是否固定在顶部	boolean	true	-
z-index	z-index	string / number	--vz-z-index	--vz-navbar-z-index
holder	固定在顶部时，是否占位	boolean	true	-
px	左右边距。默认单位 px	string / number	12px	--vz-navbar-px
height	导航栏高度（不包括状态栏高度）。默认单位 px	string / number	自动计算，不固定	--vz-navbar-height
background	背景。透明 transparent	string	--vz-bg-color	--vz-navbar-background
border	是否显示显示下边框	boolean	false	-
backable	点击左侧按钮是否返回	boolean	true	-
title	标题文字	string	-	-
title-size	标题字体大小	string	16px	--vz-navbar-title-size
title-color	标题字体颜色	string / number	inherit	--vz-navbar-title-color
left	是否显示左侧区域	boolean	true	-
left-icon	左侧按钮图标	string	vz-icon-arrow-left	-
left-text	左侧文案	string	-	-
left-color	左侧字体颜色	string	inherit	--vz-navbar-left-color
right	是否显示右侧区域	boolean	true	-
right-icon	右侧按钮图标	string	-	-
right-text	右侧文案	string	-	-
right-color	右侧字体颜色	string	inherit	--vz-navbar-right-color
gap	图标与文字之间的间距。默认单位 px	string / number	--vz-gap-base	--vz-navbar-gap
side-width	左右两侧宽度（自适应 auto）。默认单位 px	string / number	自动计算，不固定	--vz-navbar-side-width
safe-area-inset-top	是否开启顶部安全区适配	boolean	true (WEB: false)	-
status-bar	是否显示占位状态栏（navbar 固定在顶部，且透明时可能会用到。需同时满足 fixed: true, safe-area-inset-top: true 时才生效）	boolean	false	-
status-bar-fixed	状态栏是否固定在顶部	boolean	false	-
status-bar-bg	背景	status-bar	-	-
i-class	根节点样式类	string	-	-
i-style	根节点样式	Vue.StyleValue	-	-

Events

事件名	说明	参数
loaded	传递自动获取的参数	{ height: string, sideWidth: string, statusBarHeight: string }
left	点击左侧	-
right	点击右侧	-
title	点击中间	-

Slots

插槽名	说明
default	中间内容
left	左侧内容
right	右侧内容

CSS

变量名	描述	默认值
--vz-navbar-left-size	左侧字体大小	inherit
--vz-navbar-right-size	右侧字体大小	inherit
--vz-navbar-border-color	下边框	--vz-border-color

SCSS

$navbar: (
  "z-index": var(--vz-z-index),
  "px": 12px,
  "background": var(--vz-bg-color),
  "border-color": var(--vz-border-color),
  "text-size": 16px,
  "gap": var(--vz-gap-base),
);