@ chakra-ui/ tabs (英语)

可访问标签组件 .

这个 Tab 财务报告和审定财务报表 TabPanel 元素与其在树上排列的顺序相关. 没有一个组件是空包装,每个组件都与真正的DOM有关 元素,并赋予您对样式和 组成.

安装

yarn add @chakra-ui/tabs

# or

npm i @chakra-ui/tabs

导入组件

import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react"

使用量

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

标签变体和颜色方案

Tabs 分为6个不同的变体来样式标签 : line, (中文(简体) ),enclosed, (中文(简体) ), enclosed-colored, (中文(简体) ), soft-rounded, (中文(简体) ), solid-rounded。每个变体都来了 不同的颜色方案.

<Tabs variant="enclosed" colorScheme="red">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

手动激活标签

默认, Tabs 自动启动。 这意味着当你使用 用于更改标签的箭头密钥,该标签被激活并被聚焦.

A 的内容 TabPanel 最好能预装 但是,如果切换 到标签面板会引发网络请求, 可能还会有页面刷新, 可能 这一点可能会影响键盘的经验 屏幕阅读器用户.

在此情况下, 您应该使用手动激活的标签, 它会移动焦点 不激活标签。 以特定标签为重点,用户可以激活一个 选项卡 空间 或者说 输入。 。 。 .

<Tabs isManual variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>

标签大小

您可以通过路过更改标签大小 size 道具 (英语). 我们支持3个尺寸 sm, (中文(简体) ), md, (中文(简体) ), lg

<Tabs size="md" variant="enclosed">
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
  </TabPanels>
</Tabs>