选项卡

用于在选项卡界面中显示内容

管理您的团队成员

import { Tabs } from "@chakra-ui/react"
import { LuFolder, LuSquareCheck, LuUser } from "react-icons/lu"

const Demo = () => {
  return (
    <Tabs.Root defaultValue="members">
      <Tabs.List>
        <Tabs.Trigger value="members">
          <LuUser />
          Members
        </Tabs.Trigger>
        <Tabs.Trigger value="projects">
          <LuFolder />
          Projects
        </Tabs.Trigger>
        <Tabs.Trigger value="tasks">
          <LuSquareCheck />
          Settings
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="members">Manage your team members</Tabs.Content>
      <Tabs.Content value="projects">Manage your projects</Tabs.Content>
      <Tabs.Content value="tasks">
        Manage your tasks for freelancers
      </Tabs.Content>
    </Tabs.Root>
  )
}

用法

import { Tabs } from "@chakra-ui/react"

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

选项卡内容 1

Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing. Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit.

"use client"

import { Button, CloseButton, Heading, Tabs, Text } from "@chakra-ui/react"
import { useState } from "react"
import { LuPlus } from "react-icons/lu"

interface Item {
  id: string
  title: string
  content: React.ReactNode
}

const items: Item[] = [
  { id: "1", title: "Tab", content: "Tab Content" },
  { id: "2", title: "Tab", content: "Tab Content" },
  { id: "3", title: "Tab", content: "Tab Content" },
  { id: "4", title: "Tab", content: "Tab Content" },
]

const uuid = () => {
  return Math.random().toString(36).substring(2, 15)
}

const Demo = () => {
  const [tabs, setTabs] = useState<Item[]>(items)
  const [selectedTab, setSelectedTab] = useState<string | null>(items[0].id)

  const addTab = () => {
    const newTabs = [...tabs]

    const uid = uuid()

    newTabs.push({
      id: uid,
      title: `Tab`,
      content: `Tab Body`,
    })

    setTabs(newTabs)
    setSelectedTab(newTabs[newTabs.length - 1].id)
  }

  const removeTab = (id: string) => {
    if (tabs.length > 1) {
      const newTabs = [...tabs].filter((tab) => tab.id !== id)
      setTabs(newTabs)
    }
  }

  return (
    <Tabs.Root
      value={selectedTab}
      variant="outline"
      size="sm"
      onValueChange={(e) => setSelectedTab(e.value)}
    >
      <Tabs.List flex="1 1 auto">
        {tabs.map((item) => (
          <Tabs.Trigger value={item.id} key={item.id}>
            {item.title}{" "}
            <CloseButton
              as="span"
              role="button"
              size="2xs"
              me="-2"
              onClick={(e) => {
                e.stopPropagation()
                removeTab(item.id)
              }}
            />
          </Tabs.Trigger>
        ))}
        <Button
          alignSelf="center"
          ms="2"
          size="2xs"
          variant="ghost"
          onClick={addTab}
        >
          <LuPlus /> Add Tab
        </Button>
      </Tabs.List>

      <Tabs.ContentGroup>
        {tabs.map((item) => (
          <Tabs.Content value={item.id} key={item.id}>
            <Heading size="xl" my="6">
              {item.content} {item.id}
            </Heading>
            <Text>
              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam
              Lorem est occaecat do magna nisi mollit ipsum sit adipisicing
              fugiat ex. Pariatur ullamco exercitation ea qui adipisicing. Id
              cupidatat aute id ut excepteur exercitation magna pariatur. Mollit
              irure irure reprehenderit pariatur eiusmod proident Lorem deserunt
              duis cillum mollit.
            </Text>
          </Tabs.Content>
        ))}
      </Tabs.ContentGroup>
    </Tabs.Root>
  )
}

动画

使用 _open 和 _close 条件属性来为选项卡添加动画。

Dolore ex esse laboris elit magna esse sunt

import { Box, Flex, Tabs } from "@chakra-ui/react"

const items = [
  {
    title: "1",
    content: "Dolore ex esse laboris elit magna esse sunt",
  },
  {
    title: "2",
    content:
      "Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex.",
  },
]

const Demo = () => {
  return (
    <Flex minH="dvh">
      <Tabs.Root defaultValue="1" width="full">
        <Tabs.List>
          {items.map((item, index) => (
            <Tabs.Trigger key={index} value={item.title}>
              Tab {item.title}
            </Tabs.Trigger>
          ))}
        </Tabs.List>
        <Box pos="relative" minH="200px" width="full">
          {items.map((item, index) => (
            <Tabs.Content
              key={index}
              value={item.title}
              position="absolute"
              inset="0"
              _open={{
                animationName: "fade-in, scale-in",
                animationDuration: "300ms",
              }}
              _closed={{
                animationName: "fade-out, scale-out",
                animationDuration: "120ms",
              }}
            >
              {item.content}
            </Tabs.Content>
          ))}
        </Box>
      </Tabs.Root>
    </Flex>
  )
}

属性

根

属性	默认值	类型
`activationMode`	`'\'automatic\''`	`'manual' \| 'automatic'` 选项卡的激活模式。可以是 `manual` 或 `automatic` - `manual`：点击或按下 `enter` 键时激活选项卡。 - `automatic`：获得焦点时激活选项卡。
`lazyMount`	`false`	`布尔值` 是否启用懒加载
`loopFocus`	`true`	`布尔值` 键盘导航是否会在最后一个选项卡和第一个选项卡之间循环。
`orientation`	`'\'horizontal\''`	`'horizontal' \| 'vertical'` 选项卡的排列方向。可以是 `horizontal` 或 `vertical` - `horizontal`：仅支持左右方向键导航。 - `vertical`：仅支持上下方向键导航。
`unmountOnExit`	`false`	`布尔值` 退出时是否卸载。
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的调色板
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` 组件的大小
`variant`	`'line'`	`'line' \| 'subtle' \| 'enclosed' \| 'outline' \| 'plain'` 组件的变体
`asChild`		`布尔值` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。欲了解更多详情，请阅读我们的组合指南。
`composite`		`布尔值` 选项卡是否是组合的
`defaultValue`		`字符串` 选项卡首次渲染时的初始值。在您不需要控制选项卡状态时使用。
`deselectable`		`布尔值` 点击时是否可以取消选中活动选项卡。
`id`		`字符串` 机器的唯一标识符。
`ids`		`Partial<{ root: string trigger: string list: string content: string indicator: string }>` 选项卡中元素的 ID。对于组合很有用。
`navigate`		`(details: NavigateDetails) => void` 点击时导航到选中选项卡的函数。如果选项卡触发器是锚点元素，则很有用。
`onFocusChange`		`(details: FocusChangeDetails) => void` 当焦点选项卡改变时调用的回调函数
`onValueChange`		`(details: ValueChangeDetails) => void` 当选中/活动选项卡改变时调用的回调函数
`translations`		`IntlTranslations` 指定用于标识可访问性元素及其状态的本地化字符串
`value`		`字符串` 选中的选项卡 ID
`fitted`		`'true' \| 'false'` 组件的自适应模式
`justify`		`'start' \| 'center' \| 'end'` 组件的对齐方式

触发器

属性	默认值	类型
`value` *		`字符串` 选项卡的值
`asChild`		`布尔值` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。欲了解更多详情，请阅读我们的组合指南。
`disabled`		`布尔值` 选项卡是否被禁用

内容

属性	默认值	类型
`value` *		`字符串` 选项卡的值
`asChild`		`布尔值` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。欲了解更多详情，请阅读我们的组合指南。

开关

表格

选项卡

用法

示例

变体

懒加载

指示器

链接

自适应

受控

存储

禁用选项卡

手动激活

动态

选项卡内容 1

选项卡内容 2

选项卡内容 3

选项卡内容 4

动画

属性

根

触发器

内容

选项卡

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

选项卡内容 1

选项卡内容 2

选项卡内容 3

选项卡内容 4

用法