Tabs

Компонент Tabs в Chakra UI предоставляет удобный способ организации контента на вкладках, позволяя переключаться между различными панелями без перезагрузки страницы. Основная структура Tabs включает три ключевых элемента: Tabs, TabList и TabPanels.

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

<Tabs>
  <TabList>
    <Tab>Первая вкладка</Tab>
    <Tab>Вторая вкладка</Tab>
    <Tab>Третья вкладка</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>Содержимое первой вкладки</TabPanel>
    <TabPanel>Содержимое второй вкладки</TabPanel>
    <TabPanel>Содержимое третьей вкладки</TabPanel>
  </TabPanels>
</Tabs>

Свойства Tabs

  • variant – задаёт стиль вкладок. Доступны значения line, enclosed, enclosed-colored, soft-rounded, solid-rounded.
  • size – регулирует размер вкладок: sm, md, lg.
  • colorScheme – задаёт цветовую схему выбранной вкладки, например blue, teal, pink.
  • index – позволяет программно управлять активной вкладкой.
  • defaultIndex – определяет вкладку, которая будет активной при первом рендере.
  • isFitted – растягивает все вкладки равномерно по ширине контейнера.
  • isLazy – загружает содержимое вкладок только при их активации, что экономит ресурсы.
  • isManual – отключает автоматическое переключение на вкладку при фокусе, управление остаётся за пользователем.

Программное управление вкладками

С помощью свойства index и функции обратного вызова onChange можно полностью контролировать активную вкладку через состояние React:

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

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

  return (
    <Tabs index={tabIndex} onCha nge={(index) => setTabIndex(index)}>
      <TabList>
        <Tab>Первая</Tab>
        <Tab>Вторая</Tab>
        <Tab>Третья</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Контент первой</TabPanel>
        <TabPanel>Контент второй</TabPanel>
        <TabPanel>Контент третьей</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Горизонтальное и вертикальное расположение

По умолчанию вкладки располагаются горизонтально. Для вертикальной ориентации используется свойство orientation="vertical" в компоненте Tabs:

<Tabs orientation="vertical">
  <TabList>
    <Tab>Вкладка 1</Tab>
    <Tab>Вкладка 2</Tab>
    <Tab>Вкладка 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Контент 1</TabPanel>
    <TabPanel>Контент 2</TabPanel>
    <TabPanel>Контент 3</TabPanel>
  </TabPanels>
</Tabs>

Для вертикальных вкладок рекомендуется использовать сочетание с flex контейнером для корректного отображения:

<Tabs orientation="vertical" variant="enclosed" size="lg">
  <TabList flexDirection="column" w="200px">
    <Tab>Home</Tab>
    <Tab>Profile</Tab>
    <Tab>Settings</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Домашняя страница</TabPanel>
    <TabPanel>Профиль пользователя</TabPanel>
    <TabPanel>Настройки приложения</TabPanel>
  </TabPanels>
</Tabs>

Вкладки с иконками

Можно комбинировать текст и иконки в Tab для более наглядного интерфейса. Chakra UI поддерживает использование компонентов из библиотеки @chakra-ui/icons:

import { AtSignIcon, SettingsIcon } from "@chakra-ui/icons";

<Tabs>
  <TabList>
    <Tab><AtSignIcon mr={2}/>Профиль</Tab>
    <Tab><SettingsIcon mr={2}/>Настройки</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Информация о пользователе</TabPanel>
    <TabPanel>Параметры приложения</TabPanel>
  </TabPanels>
</Tabs>

Lazy Loading вкладок

Для оптимизации производительности можно использовать isLazy, который загружает контент вкладки только при первом переходе к ней:

<Tabs isLazy>
  <TabList>
    <Tab>Вкладка A</Tab>
    <Tab>Вкладка B</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Контент A (загружается при активации)</TabPanel>
    <TabPanel>Контент B (загружается при активации)</TabPanel>
  </TabPanels>
</Tabs>

Стилизация вкладок

Chakra UI позволяет гибко настраивать стили вкладок через sx, style или useStyleConfig. Например, изменение цвета активной вкладки:

<Tabs variant="enclosed" colorScheme="teal">
  <TabList>
    <Tab>Вкладка 1</Tab>
    <Tab>Вкладка 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Контент 1</TabPanel>
    <TabPanel>Контент 2</TabPanel>
  </TabPanels>
</Tabs>

С помощью Tab._selected в sx можно задавать кастомный стиль для выбранной вкладки:

<Tab
  sx={{
    _selected: {
      color: "white",
      bg: "blue.500",
    },
  }}
>
  Кастомная вкладка
</Tab>

Вкладки с панелью прокрутки

Если вкладок много, Tabs поддерживает горизонтальный скролл с помощью свойства overflowX="auto" на контейнере TabList:

<Tabs>
  <TabList overflowX="auto">
    {Array.from({ length: 20 }, (_, i) => (
      <Tab key={i}>Вкладка {i + 1}</Tab>
    ))}
  </TabList>
  <TabPanels>
    {Array.from({ length: 20 }, (_, i) => (
      <TabPanel key={i}>Контент {i + 1}</TabPanel>
    ))}
  </TabPanels>
</Tabs>

Комбинация с другими компонентами Chakra UI

Tabs легко интегрируются с Flex, Box, Grid и другими компонентами Chakra, что позволяет создавать сложные интерфейсы с вложенными вкладками, карточками и панелями с динамическим содержимым.

Например, вкладки внутри модального окна:

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody } from "@chakra-ui/react";

<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Настройки</ModalHeader>
    <ModalBody>
      <Tabs variant="soft-rounded" colorScheme="purple">
        <TabList>
          <Tab>Профиль</Tab>
          <Tab>Безопасность</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>Информация профиля</TabPanel>
          <TabPanel>Настройки безопасности</TabPanel>
        </TabPanels>
      </Tabs>
    </ModalBody>
  </ModalContent>
</Modal>

Поддержка клавиатурной навигации

Chakra UI автоматически реализует поддержку клавиш ArrowLeft/ArrowRight для горизонтальных вкладок и ArrowUp/ArrowDown для вертикальных, а также Home и End для быстрого перехода к первой и последней вкладке. Это повышает доступность и UX приложения.

Использование Tabs в Chakra UI обеспечивает не только удобную организацию интерфейса, но и гибкость в настройке внешнего вида, ориентации, управления состоянием и интеграции с другими компонентами. Правильная комбинация этих возможностей позволяет создавать сложные и динамичные интерфейсы без необходимости писать собственную логику переключения вкладок.

Оглавление