Tabs 标签页

用于在同一区域切换展示不同内容。

基础用法

import { Tabs, TabPane } from '@airo-ui/react'

function Demo() {
  return (
    <Tabs defaultActiveKey="tab1">
      <TabPane tabKey="tab1" tab="标签一">
        <p>标签一的内容</p>
      </TabPane>
      <TabPane tabKey="tab2" tab="标签二">
        <p>标签二的内容</p>
      </TabPane>
      <TabPane tabKey="tab3" tab="标签三">
        <p>标签三的内容</p>
      </TabPane>
    </Tabs>
  )
}

受控模式

import { useState } from 'react'
import { Tabs, TabPane } from '@airo-ui/react'

function Demo() {
  const [activeKey, setActiveKey] = useState('tab1')

  return (
    <Tabs activeKey={activeKey} onChange={setActiveKey}>
      <TabPane tabKey="tab1" tab="标签一">
        <p>内容一</p>
      </TabPane>
      <TabPane tabKey="tab2" tab="标签二">
        <p>内容二</p>
      </TabPane>
    </Tabs>
  )
}

API

Tabs Props

名称	类型	默认值	说明
activeKey	string	—	受控模式当前激活的标签 key
defaultActiveKey	string	—	非受控模式默认激活的标签 key
onChange	(key: string) => void	—	切换标签时触发
children	ReactNode	—	TabPane 子元素

TabPane Props

名称	类型	默认值	说明
tabKey	string	—	标签唯一标识（必填）
tab	string	—	标签显示文本（必填）
children	ReactNode	—	标签内容