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

徽标用法

import { Tabs } from "@taroify/core"

function BadgeTabs() {
  return (
    <Tabs>
      <Tabs.TabPane title="标签 1" dot>内容 1</Tabs.TabPane>
      <Tabs.TabPane title="标签 2" badge={8}>内容 2</Tabs.TabPane>
      <Tabs.TabPane title="标签 3" badge="Hot">内容 3</Tabs.TabPane>
      <Tabs.TabPane title="标签 4" badge={<Success className="badge-icon" />}>内容 4</Tabs.TabPane>
    </Tabs>
  )
}
.badge-icon {
  display: block;
  margin-left: 0;
  font-size: 10px * $hd;
  line-height: 16px * $hd;
  margin-right: 0;
}

通过标识匹配

在 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 支持两种样式风格：line 和card，默认为 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 | string0
value绑定当前选中标签的标识符number | string0
theme样式风格类型，可选值为 cardstringline
duration动画时间，单位毫秒number | string300
animated是否开启切换标签内容时的转场动画booleanfalse
bordered是否显示标签栏外边框，仅在 type="line" 时有效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局boolean | { offsetTop }false
swipeable是否开启手势左右滑动切换booleanfalse
swipeThreshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
lazyRender是否延迟渲染未展示的选项卡booleanfalse
dot是否展示为小红点booleanfalse
badge图标上徽标的内容boolean | number | string | Badge | ReactNode-

Tabs.Pane Props

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

Tabs Events

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

主题定制

样式变量

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

名称默认值描述
—tabs-active-colorvar(—danger-color)-
—tabs-wrap-height44px * $hd-
—tabs-card-height30px * $hd-
—tabs-card-margin0 var(—padding-md)-
—tabs-card-border-widthvar(—border-width-base, $border-width-base))-
—tabs-card-border-colorvar(—tabs-active-color)-
—tabs-card-border-radiusvar(—border-radius-sm)-
—tabs-nav-background-colorvar(—white)-
—tabs-line-width40px * $hd-
—tabs-line-height3px * $hd-
—tabs-line-border-radiusvar(—tabs-line-height)-
—tabs-line-background-colorvar(—tabs-active-color)-
—tab-colorvar(—gray-7)-
—tab-padding0 var(—padding-base)-
—tab-font-sizevar(—font-size-md)-
—tab-line-heightvar(—line-height-md)-
—tab-active-colorvar(—text-color)-
—tab-active-font-weightvar(—font-weight-bold)-
—tab-disabled-colorvar(—gray-5)-