Tabs 选项卡

使用场景#

Tabs 让用户可以在不同子任务、视图、模式之间切换，它具有全局导航的作用，是全局功能的主要展示和切换区域，一个 Tab 标记一个核心功能，Tab 之间可以快速点击切换。

示例#

基本示例#

例子
代码片段
组件属性
设计文档

例子内容

inline

() => {
  return (
    <Tabs onChange={console.log}>
      <Tab value="t1" title="例子">
        <Box fontSize="body" p="m">
          例子内容
        </Box>
      </Tab>
      <Tab value="t2" title="代码片段">
        <Box fontSize="body" p="m">
          代码片段内容
        </Box>
      </Tab>
      <Tab value="t3" title="组件属性" disabled>
        <Box fontSize="body" p="m">
          组件属性内容
        </Box>
      </Tab>
      <Tab value="t4" title="设计文档">
        <Box fontSize="body" p="m">
          设计文档内容
        </Box>
      </Tab>
    </Tabs>
  );
}

() => {
  return (
    <Tabs onChange={console.log}>
      <Tab value="t1" title="例子">
        <Box fontSize="body" p="m">
          例子内容
        </Box>
      </Tab>
      <Tab value="t2" title="代码片段">
        <Box fontSize="body" p="m">
          代码片段内容
        </Box>
      </Tab>
      <Tab value="t3" title="组件属性" disabled>
        <Box fontSize="body" p="m">
          组件属性内容
        </Box>
      </Tab>
      <Tab value="t4" title="设计文档">
        <Box fontSize="body" p="m">
          设计文档内容
        </Box>
      </Tab>
    </Tabs>
  );
}

等宽全屏#

对于小屏幕设备，通常可以使用等宽全屏设置

例子
代码片段
组件属性
设计文档

inline

() => {
  return (
    <Tabs fill onChange={console.log}>
      <Tab value="t1" title="例子" />
      <Tab value="t2" title="代码片段" />
      <Tab value="t3" title="组件属性" />
      <Tab value="t4" title="设计文档" />
    </Tabs>
  );
}

() => {
  return (
    <Tabs fill onChange={console.log}>
      <Tab value="t1" title="例子" />
      <Tab value="t2" title="代码片段" />
      <Tab value="t3" title="组件属性" />
      <Tab value="t4" title="设计文档" />
    </Tabs>
  );
}

垂直方向#

例子
代码片段
组件属性
设计文档

例子内容

inline

() => {
  return (
    <Tabs direction="column" onChange={console.log}>
      <Tab value="t1" title="例子">
        <Box fontSize="body" p="m">
          例子内容
        </Box>
      </Tab>
      <Tab value="t2" title="代码片段">
        <Box fontSize="body" p="m">
          代码片段内容
        </Box>
      </Tab>
      <Tab value="t3" title="组件属性" disabled>
        <Box fontSize="body" p="m">
          组件属性内容
        </Box>
      </Tab>
      <Tab value="t4" title="设计文档">
        <Box fontSize="body" p="m">
          设计文档内容
        </Box>
      </Tab>
    </Tabs>
  );
}

() => {
  return (
    <Tabs direction="column" onChange={console.log}>
      <Tab value="t1" title="例子">
        <Box fontSize="body" p="m">
          例子内容
        </Box>
      </Tab>
      <Tab value="t2" title="代码片段">
        <Box fontSize="body" p="m">
          代码片段内容
        </Box>
      </Tab>
      <Tab value="t3" title="组件属性" disabled>
        <Box fontSize="body" p="m">
          组件属性内容
        </Box>
      </Tab>
      <Tab value="t4" title="设计文档">
        <Box fontSize="body" p="m">
          设计文档内容
        </Box>
      </Tab>
    </Tabs>
  );
}

超出滚动#

inline

() => {
  return (
    <Tabs onChange={console.log}>
      <Tab value="t1" title="选项卡 1" />
      <Tab value="t2" title="选项卡 2" />
      <Tab value="t3" title="选项卡 3" />
      <Tab value="t4" title="选项卡 4" />
      <Tab value="t5" title="选项卡 5" />
      <Tab value="t6" title="选项卡 6" />
      <Tab value="t7" title="选项卡 7" />
      <Tab value="t8" title="选项卡 8" />
    </Tabs>
  );
}

() => {
  return (
    <Tabs onChange={console.log}>
      <Tab value="t1" title="选项卡 1" />
      <Tab value="t2" title="选项卡 2" />
      <Tab value="t3" title="选项卡 3" />
      <Tab value="t4" title="选项卡 4" />
      <Tab value="t5" title="选项卡 5" />
      <Tab value="t6" title="选项卡 6" />
      <Tab value="t7" title="选项卡 7" />
      <Tab value="t8" title="选项卡 8" />
    </Tabs>
  );
}

API#

Tabs#

字段	描述
defaultValue	`string` 默认选中的 tab
value	`string` 受控选中的 tab
onChange	`(nextValue: string) => void` 选项卡切换时的回调
fill	`boolean` 对于较小视图，实现满屏等宽效果（仅作用于水平模式）
direction	`Direction` 选项卡方向
className	`string`

Tab#

字段	描述
value	`string` 唯一标识符
title	`ReactNode` 标题
selected	`boolean` 是否选中
disabled	`boolean` 是否禁用