跳转到内容
AsterUI v0.12.76

Tabs 标签页

将内容组织到单独的视图中,一次只显示一个。

导入

Section titled “导入”
import { Tabs } from 'asterui'

示例

Section titled “示例”

基础用法

自动处理内容切换的简单标签页。

Content of Tab 1
 
import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs>
        <Tabs.Panel tab="Tab 1" key="1">
          <Typography.Text>Content of Tab 1</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 2" key="2">
          <Typography.Text>Content of Tab 2</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 3" key="3">
          <Typography.Text>Content of Tab 3</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

设置页面

使用浮动标签输入的完整设置页面。

 
import { Tabs, Space, Input, Button } from 'asterui'

function App() {
  return (
      <Tabs defaultActiveKey="account" variant="border">
        <Tabs.Panel tab="Account" key="account">
          <Space direction="vertical" size="md">
            <Input floatingLabel="Username" placeholder="john_doe" />
            <Input floatingLabel="Email" type="email" placeholder="john@example.com" />
            <Button color="primary">Save</Button>
          </Space>
        </Tabs.Panel>
        <Tabs.Panel tab="Security" key="security">
          <Space direction="vertical" size="md">
            <Input floatingLabel="Current Password" type="password" />
            <Input floatingLabel="New Password" type="password" />
            <Button color="primary">Update</Button>
          </Space>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

盒装变体

带有封闭盒样式的标签页。

Home content
 
import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs variant="box">
        <Tabs.Panel tab="Home" key="home">
          <Typography.Text>Home content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Profile" key="profile">
          <Typography.Text>Profile content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Settings" key="settings">
          <Typography.Text>Settings content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

凸起变体

带有 3D 凸起外观的标签页。

Overview content
 
import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs variant="lift">
        <Tabs.Panel tab="Overview" key="1">
          <Typography.Text>Overview content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Reports" key="2">
          <Typography.Text>Reports content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Analytics" key="3">
          <Typography.Text>Analytics content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

不同尺寸

使用 Space 和 Typography 组件的各种尺寸的标签页。

Small
Small tabs content
Large
Large tabs content
 
import { Tabs, Space, Typography } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <div>
          <Typography.Text strong>Small</Typography.Text>
          <Tabs size="sm">
            <Tabs.Panel tab="Tab 1" key="1"><Typography.Text>Small tabs content</Typography.Text></Tabs.Panel>
            <Tabs.Panel tab="Tab 2" key="2"><Typography.Text>Content 2</Typography.Text></Tabs.Panel>
          </Tabs>
        </div>
        <div>
          <Typography.Text strong>Large</Typography.Text>
          <Tabs size="lg">
            <Tabs.Panel tab="Tab 1" key="1"><Typography.Text>Large tabs content</Typography.Text></Tabs.Panel>
            <Tabs.Panel tab="Tab 2" key="2"><Typography.Text>Content 2</Typography.Text></Tabs.Panel>
          </Tabs>
        </div>
      </Space>
    )
}

export default App

禁用标签

禁用特定标签。

Active content
 
import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs>
        <Tabs.Panel tab="Active" key="1">
          <Typography.Text>Active content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Disabled" key="2" disabled>
          <Typography.Text>Cannot see this</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Also Active" key="3">
          <Typography.Text>Active content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

数据驱动模式

使用 items 属性的数据驱动标签页,带有图标。

Home content
 
import { Tabs, notification, Typography } from 'asterui'
import { HomeIcon, UserIcon, Cog6ToothIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [activeKey, setActiveKey] = useState('home')
  
  const items = [
    { key: 'home', label: 'Home', icon: <HomeIcon size="sm" />, children: <Typography.Text>Home content</Typography.Text> },
    { key: 'profile', label: 'Profile', icon: <UserIcon size="sm" />, children: <Typography.Text>Profile content</Typography.Text> },
    { key: 'settings', label: 'Settings', icon: <Cog6ToothIcon size="sm" />, children: <Typography.Text>Settings content</Typography.Text> },
  ]
  
  return (
      <Tabs
        items={items}
        activeKey={activeKey}
        onChange={(key) => {
          setActiveKey(key)
          notification.info({ message: `Switched to ${key}` })
        }}
        variant="border"
      />
    )
}

export default App

底部位置

位于内容下方的标签页。

Content appears above the tabs
 
import { Tabs, Typography } from 'asterui'

function App() {
  return (
      <Tabs position="bottom" variant="border">
        <Tabs.Panel tab="Tab 1" key="1">
          <Typography.Text>Content appears above the tabs</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 2" key="2">
          <Typography.Text>Second tab content</Typography.Text>
        </Tabs.Panel>
        <Tabs.Panel tab="Tab 3" key="3">
          <Typography.Text>Third tab content</Typography.Text>
        </Tabs.Panel>
      </Tabs>
    )
}

export default App

API

Section titled “API”

Tabs

Section titled “Tabs”
属性描述类型默认值
children标签面板(复合模式)React.ReactNode-
items标签项(数据驱动模式)TabItem[]-
activeKey当前活动的标签键(受控)string-
defaultActiveKey默认活动的标签键(非受控)string-
onChange标签更改时的回调(key: string) => void-
variant视觉样式变体'box' | 'border' | 'lift'-
size标签大小'xs' | 'sm' | 'md' | 'lg' | 'xl'-
position标签相对于内容的位置'top' | 'bottom''top'
className额外的 CSS 类string-

TabItem(用于 items 属性)

Section titled “TabItem(用于 items 属性)”
属性描述类型默认值
key唯一标识符string-
label标签按钮标签React.ReactNode-
children标签面板内容React.ReactNode-
disabled禁用标签booleanfalse
icon标签图标React.ReactNode-

Tabs.Panel(复合模式)

Section titled “Tabs.Panel(复合模式)”
属性描述类型默认值
key标签的唯一标识符(React key 属性)string-
tab标签按钮标签React.ReactNode-
disabled禁用标签booleanfalse
icon标签图标React.ReactNode-
children标签面板内容React.ReactNode-

可访问性

Section titled “可访问性”
  • 使用正确的 ARIA 角色: tablist、tab 和 tabpanel
  • 键盘导航: 箭头键在标签之间移动,Tab 键将焦点移入面板
  • 活动标签用 aria-selected="true" 指示
  • 禁用的标签使用 aria-disabled 进行正确的通信
  • 标签面板使用 aria-labelledby 与其标签关联

使用提示

Section titled “使用提示”
  • 使用 activeKey 进行受控标签,defaultActiveKey 进行非受控
  • 使用 items 属性进行数据驱动的标签,Tabs.Panel 进行复合模式
  • 使用 position="bottom" 将标签放在内容下方