• 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={<Badge position="bottom-right" max={99} content={100} />}>标签名</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 | string0
value当前导航项的索引number | string0
事件名说明回调参数
onChange切换导航项时触发value: any, tab: Sidebar.TabObject

Sidebar.Tab Props

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

Sidebar.Tab Events

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

主题定制

样式变量

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

名称默认值描述
—sidebar-width80px * $hd-
—sidebar-disabled-colorvar(—gray-5)-
—sidebar-tab-font-sizevar(—font-size-md)-
—sidebar-tab-line-heightvar(—line-height-md)-
—sidebar-tab-colorvar(—text-color)-
—sidebar-tab-padding20px * $hd var(—padding-sm)-
—sidebar-tab-background-colorvar(—background-color)-
—sidebar-tab-active-background-colorvar(—active-color)-
—sidebar-tab-active-font-weightvar(—font-weight-bold)-
—sidebar-tab-active-colorvar(—text-color)-
—sidebar-tab-active-border-width4px * $hd-
—sidebar-tab-active-border-height16px * $hd-
—sidebar-tab-active-border-colorvar(—red)-
—sidebar-tab-active-active-background-colorvar(—white)-
—sidebar-tab-disabled-colorvar(—sidebar-disabled-color)-
—sidebar-tab-disabled-background-colorvar(—sidebar-tab-background-color)-