Tabs 标签页组件 #

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

function Example() {
  return (
    <Tabs>
      <TabList>
        <Tab>标签一</Tab>
        <Tab>标签二</Tab>
        <Tab>标签三</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <p>标签一内容</p>
        </TabPanel>
        <TabPanel>
          <p>标签二内容</p>
        </TabPanel>
        <TabPanel>
          <p>标签三内容</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  )
}

<Tabs variant="line">线条变体</Tabs>
<Tabs variant="enclosed">封闭变体</Tabs>
<Tabs variant="enclosed-colored">彩色封闭变体</Tabs>
<Tabs variant="soft-rounded">圆角柔和变体</Tabs>
<Tabs variant="solid-rounded">圆角实心变体</Tabs>
<Tabs variant="unstyled">无样式变体</Tabs>

<Tabs colorScheme="green">
  {/* 内容 */}
</Tabs>

<Tabs colorScheme="red">
  {/* 内容 */}
</Tabs>

<Tabs orientation="vertical">
  {/* 垂直标签页 */}
</Tabs>

<Tabs isFitted>
  {/* 自适应宽度 */}
</Tabs>

function ControlledTabs() {
  const [tabIndex, setTabIndex] = useState(0)

  return (
    <Tabs index={tabIndex} onChange={setTabIndex}>
      <TabList>
        <Tab>标签一</Tab>
        <Tab>标签二</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>内容一</TabPanel>
        <TabPanel>内容二</TabPanel>
      </TabPanels>
    </Tabs>
  )
}

function SettingsTabs() {
  return (
    <Tabs variant="enclosed" colorScheme="blue">
      <TabList>
        <Tab>个人信息</Tab>
        <Tab>安全设置</Tab>
        <Tab>通知设置</Tab>
        <Tab>隐私设置</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <VStack spacing={4}>
            <FormControl>
              <FormLabel>用户名</FormLabel>
              <Input />
            </FormControl>
            <FormControl>
              <FormLabel>邮箱</FormLabel>
              <Input type="email" />
            </FormControl>
          </VStack>
        </TabPanel>
        <TabPanel>
          <VStack spacing={4}>
            <FormControl>
              <FormLabel>当前密码</FormLabel>
              <Input type="password" />
            </FormControl>
            <FormControl>
              <FormLabel>新密码</FormLabel>
              <Input type="password" />
            </FormControl>
          </VStack>
        </TabPanel>
        <TabPanel>通知设置内容</TabPanel>
        <TabPanel>隐私设置内容</TabPanel>
      </TabPanels>
    </Tabs>
  )
}