• Vant React

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

import { Sidebar } from "@taroify/core"

代码演示

基础用法

<Sidebar>
  <Sidebar.Tab>标签名</Sidebar.Tab>
  <Sidebar.Tab>标签名</Sidebar.Tab>
  <Sidebar.Tab>标签名</Sidebar.Tab>
</Sidebar>

徽标提示

设置 badge 属性后，会在右上角展示相应的徽标。

<Sidebar>
  <Sidebar.Tab badge>标签名</Sidebar.Tab>
  <Sidebar.Tab badge="5">标签名</Sidebar.Tab>
  <Sidebar.Tab badge="20">标签名</Sidebar.Tab>
</Sidebar>

禁用选项

通过 disabled 属性禁用选项。

<Sidebar>
  <Sidebar.Tab>标签名</Sidebar.Tab>
  <Sidebar.Tab disabled>标签名</Sidebar.Tab>
  <Sidebar.Tab>标签名</Sidebar.Tab>
</Sidebar>

监听切换事件

设置 onChange 方法来监听切换导航项时的事件。

import { Sidebar } from "@taroify/core"

function EventSidebar() {
  return (
    <>
      <Toast id="toast" />
      <Sidebar onChange={(newValue, { children }: Sidebar.TabObject) => Toast.open(children)}>
        <Sidebar.Tab>标签名 1</Sidebar.Tab>
        <Sidebar.Tab>标签名 2</Sidebar.Tab>
        <Sidebar.Tab>标签名 3</Sidebar.Tab>
      </Sidebar>
    </>
  )
}

API

参数 说明 类型 默认值
defaultValue 默认导航项的索引 number | string 0
value 当前导航项的索引 number | string 0
事件名 说明 回调参数
onChange 切换导航项时触发 value: any, tab: Sidebar.TabObject

Sidebar.Tab Props

参数 说明 类型 默认值
badge 图标右上角徽标的内容 boolean | number | string | Badge -
disabled 是否禁用该项 boolean false
children 内容 ReactNode -

Sidebar.Tab Events

事件名 说明 回调参数
onClick 点击时触发 event: ITouchEvent

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—sidebar-width 80px * $hd -
—sidebar-disabled-color var(—gray-5) -
—sidebar-tab-font-size var(—font-size-md) -
—sidebar-tab-line-height var(—line-height-md) -
—sidebar-tab-color var(—text-color) -
—sidebar-tab-padding 20px * $hd var(—padding-sm) -
—sidebar-tab-background-color var(—background-color) -
—sidebar-tab-active-background-color var(—active-color) -
—sidebar-tab-active-font-weight var(—font-weight-bold) -
—sidebar-tab-active-color var(—text-color) -
—sidebar-tab-active-border-width 4px * $hd -
—sidebar-tab-active-border-height 16px * $hd -
—sidebar-tab-active-border-color var(—red) -
—sidebar-tab-active-active-background-color var(—white) -
—sidebar-tab-disabled-color var(—sidebar-disabled-color) -
—sidebar-tab-disabled-background-color var(—sidebar-tab-background-color) -