TaroifyReact UI

    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)-