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.TabPanel title="标签 1">内容 1</Tabs.TabPanel>
      <Tabs.TabPanel title="标签 2">内容 2</Tabs.TabPanel>
      <Tabs.TabPanel title="标签 3">内容 3</Tabs.TabPanel>
      <Tabs.TabPanel title="标签 4">内容 4</Tabs.TabPanel>
    </Tabs>
  )
}

徽标用法

import { Tabs } from "@taroify/core"

function BadgeTabs() {
  return (
    <Tabs>
      <Tabs.TabPanel title="标签 1" dot>
        内容 1
      </Tabs.TabPanel>
      <Tabs.TabPanel title="标签 2" badge={8}>
        内容 2
      </Tabs.TabPanel>
      <Tabs.TabPanel title="标签 3" badge="Hot">
        内容 3
      </Tabs.TabPanel>
      <Tabs.TabPanel title="标签 4" badge={<Success className="badge-icon" />}>
        内容 4
      </Tabs.TabPanel>
    </Tabs>
  )
}

.badge-icon {
  display: block;
  margin-left: 0;
  font-size: 10px * $hd;
  line-height: 16px * $hd;
  margin-right: 0;
}

通过标识匹配

在 Tabs.TabPanel 标签指定 value 属性的情况下，Tabs.defaultValue 的值为当前标签的 value。

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

标签栏滚动

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

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

禁用标签

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

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

样式风格

Tabs 支持两种样式风格：line 和card，默认为 line 样式，可以通过 theme 属性切换样式风格。

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

点击事件

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

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

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

粘性布局

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

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

自定义标签

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

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

function TabsWithCustomTitle() {
  return (
    <Tabs>
      <Tabs.TabPanel
        title={
          <>
            <MoreOutlined /> 标签 1
          </>
        }
      >
        内容 1
      </Tabs.TabPanel>
      <Tabs.TabPanel
        title={
          <>
            <MoreOutlined /> 标签 2
          </>
        }
      >
        内容 2
      </Tabs.TabPanel>
      <Tabs.TabPanel
        title={
          <>
            <MoreOutlined /> 标签 3
          </>
        }
      >
        内容 3
      </Tabs.TabPanel>
    </Tabs>
  )
}

.taroify-icon {
  margin-right: 5px * 2;
  vertical-align: -2px * 2;
}

切换动画

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

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

滑动切换

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

<Tabs animated swipeable>
  <Tabs.TabPanel title="标签 1">内容 1</Tabs.TabPanel>
  <Tabs.TabPanel title="标签 2">内容 2</Tabs.TabPanel>
  <Tabs.TabPanel title="标签 3">内容 3</Tabs.TabPanel>
  <Tabs.TabPanel title="标签 4">内容 4</Tabs.TabPanel>
</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`
shrink	是否使用收缩布局	booleans	`false`
swipeable	是否开启手势左右滑动切换	boolean	`false`
swipeThreshold	滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动	number	`5`
lazyRender	是否延迟渲染未展示的选项卡	boolean	`false`
dot	是否展示为小红点	boolean	`false`
badge	图标上徽标的内容	boolean \| number \| string \| Badge \| ReactNode	-

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

#Tabs 标签页

#介绍

#引入

#代码演示

#基础用法

#徽标用法

#通过标识匹配

#标签栏滚动

#禁用标签

#样式风格

#点击事件

#粘性布局

#自定义标签

#切换动画

#滑动切换

#API

#Tabs Props

#Tabs.Pane Props

#Tabs Events

#主题定制

#样式变量