Tabs и TabPanel

Tabs и TabPanel — это ключевые компоненты библиотеки MUI для организации контента в виде вкладок. Они позволяют создавать интерфейсы с переключаемыми панелями, что особенно удобно для отображения больших объемов информации в компактной форме.

Импорт компонентов

Для работы с вкладками необходимо импортировать основные элементы из MUI:

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

Если планируется использовать кастомный компонент для панели содержимого, создается отдельный компонент TabPanel.

Создание TabPanel

Компонент TabPanel отвечает за отображение содержимого вкладки. Его базовая структура включает проверку активной вкладки:

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`tabpanel-${index}`}
      aria-labelledby={`tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          {children}
        </Box>
      )}
    </div>
  );
}

Ключевые моменты:

  • value — текущий индекс активной вкладки.
  • index — индекс панели.
  • Атрибут hidden скрывает панели, которые не активны, улучшая производительность.
  • aria-labelledby и role="tabpanel" обеспечивают доступность.

Настройка Tabs

Компонент Tabs служит контейнером для вкладок Tab. Основной атрибут — value, который контролирует активную вкладку.

function BasicTabs() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Tabs value={value} onCha nge={handleChange} aria-label="basic tabs example">
        <Tab label="Вкладка 1" />
        <Tab label="Вкладка 2" />
        <Tab label="Вкладка 3" />
      </Tabs>
      <TabPanel value={value} index={0}>
        Содержимое вкладки 1
      </TabPanel>
      <TabPanel value={value} index={1}>
        Содержимое вкладки 2
      </TabPanel>
      <TabPanel value={value} index={2}>
        Содержимое вкладки 3
      </TabPanel>
    </Box>
  );
}

Особенности:

  • Управление состоянием вкладки осуществляется через useState.
  • handleChange синхронизирует выбранную вкладку и отображаемую панель.
  • Атрибут aria-label повышает доступность интерфейса для скринридеров.

Применение ориентации и стилей

Вкладки могут располагаться горизонтально (по умолчанию) или вертикально. Для вертикальной ориентации используется свойство orientation:

<Tabs
  orientation="vertical"
  value={value}
  onCha nge={handleChange}
  aria-label="Vertical tabs example"
  sx={{ borderRight: 1, borderColor: 'divider' }}
>
  <Tab label="Вкладка 1" />
  <Tab label="Вкладка 2" />
  <Tab label="Вкладка 3" />
</Tabs>

Стилизация через sx:

  • borderRight и borderColor создают визуальное разделение.
  • Можно изменять фон, отступы и шрифты через объект sx.

Ленивая загрузка контента вкладок

MUI поддерживает ленивую загрузку, когда содержимое вкладки рендерится только при активации:

<TabPanel value={value} index={0} >
  {value === 0 && <HeavyComponent />}
</TabPanel>

Такой подход повышает производительность при большом количестве вкладок или тяжелых компонентах.

Использование индикатора и кастомизация Tab

Индикатор активной вкладки настраивается через Tabs:

<Tabs
  value={value}
  onCha nge={handleChange}
  TabIndicatorProps={{ style: { backgroundColor: 'red', height: 4 } }}
>
  <Tab label="Вкладка 1" />
  <Tab label="Вкладка 2" />
</Tabs>

Возможности кастомизации:

  • Цвет и толщина индикатора (TabIndicatorProps).
  • Стили активной вкладки через selected CSS-класс.
  • Добавление иконок через свойство icon в Tab.

Контроль доступности

Для корректного взаимодействия с ассистивными технологиями необходимо:

  • Назначать aria-controls и id на вкладки и панели.
  • Использовать role="tabpanel" для панели и role="tab" для вкладки.
  • Проверять, чтобы индексы value и index соответствовали друг другу.

Расширенные возможности

MUI Tabs поддерживают:

  • ScrollButtons — автоматическое добавление кнопок прокрутки при большом количестве вкладок.
  • Variant — варианты отображения вкладок: standard, scrollable, fullWidth.
  • Centered — выравнивание вкладок по центру контейнера.

Пример скроллируемых вкладок:

<Tabs
  value={value}
  onCha nge={handleChange}
  variant="scrollable"
  scrollButtons="auto"
>
  {Array.from({ length: 10 }, (_, i) => (
    <Tab key={i} label={`Вкладка ${i + 1}`} />
  ))}
</Tabs>

Такой подход полезен при создании интерфейсов с динамическим количеством вкладок.

Итоги структурирования

Комбинация Tabs и TabPanel позволяет создавать гибкие интерфейсы с хорошо структурированным контентом. Возможности кастомизации, управление состоянием и доступность делают их универсальным инструментом для проектов на React с MUI.

Оглавление