Tabs 标签页

Tabs 是一组分层的内容区域,也就是标签面板,每次只显示一个面板。

获取组件

import { Tabs } from 'rsuite';

演示

默认

Pills

Subtle

禁用

反转

垂直

带图标

受控的

可访问性

ARIA 属性

  • tablist 角色被添加到容器元素。
    • aria-orientationverticaltrue 时设置为 vertical
  • tab 角色被添加到每个选项卡元素。
    • aria-selectedactiveKeyeventKey 相同时设置为 true
    • aria-disableddisabledtrue 时设置为 true
    • aria-controls 设置为相应选项卡面板的 id
  • tabpanel 角色被添加到每个面板元素。
    • aria-labelledby 设置为相应选项卡的 id
    • aria-hiddenactiveKeyeventKey 不同时设置为 true

键盘交互

  • - 将焦点移动到上一个选项卡,并激活它。
  • - 将焦点移动到下一个选项卡,并激活它。
  • - 将焦点移动到上一个选项卡,并激活它。(垂直模式)
  • - 将焦点移动到下一个选项卡,并激活它。(垂直模式)
  • Home - 将焦点移动到第一个选项卡,并激活它。
  • End - 将焦点移动到最后一个选项卡,并激活它。

Props

名称 类型(默认值) ˇ 描述
activeKey string 将具有匹配 eventKey 的选项卡标记为活动状态。
appearance 'tabs' | 'subtle' | 'pills' ('tabs') 外观样式。
children ChildrenArray<Tabs.Tab> 组件的内容。
classPrefix string ('tabs') 组件 CSS 类的前缀。
defaultActiveKey string 默认活动的选项卡的 eventKey
onSelect (eventKey: string, event) => void 选项卡选中后的回调函数。
reversed boolean 反转显示。
vertical boolean 垂直显示。

<Tabs.Tab>

名称 类型 (默认值) 描述
children ReactNode 组件的内容。
disabled boolean 禁用状态。
eventKey string 选项卡的标识符。
icon Element<typeof Icon> 设置选项卡的图标。
title * ReactNode 设置选项卡的标题。
Vercel banner