• Vant React

Tabs 标签页

介绍

选项卡组件,用于在不同的内容区域之间进行切换。

引入

import { Tabs } from "@taroify/core"

代码演示

基础用法

通过 value 绑定当前激活标签对应的索引值,默认情况下启用第一个标签。

import { Tabs } from "@taroify/core"

function BasicTabs() {
  const [value, setValue] = useState(0)
  return (
    <Tabs value={value} onChange={setValue}>
      <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
      <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
      <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
      <Tabs.TabPane title="标签 4">内容 4</Tabs.TabPane>
    </Tabs>
  )
}

通过标识匹配

Tabs.TabPane 标签指定 value 属性的情况下,Tabs.defaultValue 的值为当前标签的 value

<Tabs defaultValue="a">
  <Tabs.TabPane value="a" title="标签 1">
    内容 1
  </Tabs.TabPane>
  <Tabs.TabPane value="b" title="标签 2">
    内容 2
  </Tabs.TabPane>
  <Tabs.TabPane value="c" title="标签 3">
    内容 3
  </Tabs.TabPane>
  <Tabs.TabPane value="d" title="标签 4">
    内容 4
  </Tabs.TabPane>
</Tabs>

标签栏滚动

标签数量超过 5 个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中。

<Tabs>
  <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
  <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
  <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
  <Tabs.TabPane title="标签 4">内容 4</Tabs.TabPane>
  <Tabs.TabPane title="标签 5">内容 5</Tabs.TabPane>
  <Tabs.TabPane title="标签 6">内容 6</Tabs.TabPane>
  <Tabs.TabPane title="标签 7">内容 7</Tabs.TabPane>
</Tabs>

禁用标签

设置 disabled 属性即可禁用标签,如果需要监听禁用标签的点击事件,可以在 Tabs 上监听onClick 事件。

<Tabs>
  <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
  <Tabs.TabPane title="标签 2" disabled>
    内容 2
  </Tabs.TabPane>
  <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
</Tabs>

样式风格

Tabs 支持两种样式风格:linecard,默认为 line 样式,可以通过 theme 属性切换样式风格。

<Tabs theme="card">
  <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
  <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
  <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
</Tabs>

点击事件

可以在 Tabs 上绑定 onTabClick 事件,事件传参为标签对应的标识符和标题。

import { Tabs, Toast } from "@taroify/core"

function TabsWithTabClick() {
  return (
    <>
      <Toast id="toast" />
      <Tabs onTabClick={({ title }) => Toast.open(title)}>
        <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
        <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
        <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
      </Tabs>
      <Toast id="toast" />
    </>
  )
}

粘性布局

通过 sticky 属性可以开启粘性布局,粘性布局下,标签页滚动到顶部时会自动吸顶。

<Tabs sticky>
  <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
  <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
  <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
  <Tabs.TabPane title="标签 4">内容 4</Tabs.TabPane>
</Tabs>

自定义标签

通过 title 插槽可以自定义标签内容。

import { Tabs } from "@taroify/core"
import { MoreOutlined } from "@taroify/icons"

function TabsWithCustomTitle() {
  return (
    <Tabs>
      <Tabs.TabPane
        title={
          <>
            <MoreOutlined /> 标签 1
          </>
        }
      >
        内容 1
      </Tabs.TabPane>
      <Tabs.TabPane
        title={
          <>
            <MoreOutlined /> 标签 2
          </>
        }
      >
        内容 2
      </Tabs.TabPane>
      <Tabs.TabPane
        title={
          <>
            <MoreOutlined /> 标签 3
          </>
        }
      >
        内容 3
      </Tabs.TabPane>
    </Tabs>
  )
}
.taroify-icon {
  margin-right: 5px * 2;
  vertical-align: -2px * 2;
}

切换动画

通过 animated 属性可以开启切换标签内容时的转场动画。

<Tabs animated>
  <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
  <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
  <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
  <Tabs.TabPane title="标签 4">内容 4</Tabs.TabPane>
</Tabs>

滑动切换

通过 swipeable 属性可以开启滑动切换标签页。

<Tabs animated swipeable>
  <Tabs.TabPane title="标签 1">内容 1</Tabs.TabPane>
  <Tabs.TabPane title="标签 2">内容 2</Tabs.TabPane>
  <Tabs.TabPane title="标签 3">内容 3</Tabs.TabPane>
  <Tabs.TabPane title="标签 4">内容 4</Tabs.TabPane>
</Tabs>

API

Tabs Props

参数 说明 类型 默认值
defaultValue 绑定默认选中标签的标识符 number | string 0
value 绑定当前选中标签的标识符 number | string 0
theme 样式风格类型,可选值为 card string line
duration 动画时间,单位毫秒 number | string 300
animated 是否开启切换标签内容时的转场动画 boolean false
bordered 是否显示标签栏外边框,仅在 type="line" 时有效 boolean false
ellipsis 是否省略过长的标题文字 boolean true
sticky 是否使用粘性定位布局 boolean | { offsetTop } false
swipeable 是否开启手势左右滑动切换 boolean false
lazyRender 是否延迟渲染未展示的选项卡 boolean false

Tabs.Pane Props

参数 说明 类型 默认值
value 标签值,作为匹配的值 number | string 标签的索引值
title 标题 ReactNode -
disabled 是否禁用标签 boolean false
children 标签面板内容 ReactNode -

Tabs Events

事件名 说明 回调参数
onTabClick 点击标签时触发 event : Tabs.TabEvent
onChange 当前激活的标签改变时触发 value: any, event : Tabs.TabEvent

主题定制

样式变量

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

名称 默认值 描述
—tabs-active-color var(—danger-color) -
—tabs-wrap-height 44px * $hd -
—tabs-card-height 30px * $hd -
—tabs-card-margin 0 var(—padding-md) -
—tabs-card-border-width var(—border-width-base, $border-width-base)) -
—tabs-card-border-color var(—tabs-active-color) -
—tabs-card-border-radius var(—border-radius-sm) -
—tabs-nav-background-color var(—white) -
—tabs-line-width 40px * $hd -
—tabs-line-height 3px * $hd -
—tabs-line-border-radius var(—tabs-line-height) -
—tabs-line-background-color var(—tabs-active-color) -
—tab-color var(—gray-7) -
—tab-padding 0 var(—padding-base) -
—tab-font-size var(—font-size-md) -
—tab-line-height var(—line-height-md) -
—tab-active-color var(—text-color) -
—tab-active-font-weight var(—font-weight-bold) -
—tab-disabled-color var(—gray-5) -