Tabs

Компонент Tabs в библиотеке Ant Design предназначен для организации интерфейса с несколькими вкладками, каждая из которых может содержать отдельный контент. Он позволяет создавать удобную навигацию внутри страницы без необходимости перезагрузки.

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function App() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Вкладка 1" key="1">
        Контент первой вкладки
      </TabPane>
      <TabPane tab="Вкладка 2" key="2">
        Контент второй вкладки
      </TabPane>
      <TabPane tab="Вкладка 3" key="3">
        Контент третьей вкладки
      </TabPane>
    </Tabs>
  );
}
  • defaultActiveKey — определяет вкладку, активную при первоначальной загрузке.
  • TabPane — отдельная вкладка с пропсами tab (заголовок) и key (уникальный идентификатор).

Управляемые и неуправляемые вкладки

Неуправляемые вкладки используют defaultActiveKey, их состояние контролируется внутренне.

Управляемые вкладки применяют проп activeKey и обработчик onChange для синхронизации с внешним состоянием:

import { useState } from 'react';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

function ControlledTabs() {
  const [activeKey, setActiveKey] = useState("1");

  const handleChange = (key) => {
    setActiveKey(key);
  };

  return (
    <Tabs activeKey={activeKey} onCha nge={handleChange}>
      <TabPane tab="Вкладка A" key="1">Контент A</TabPane>
      <TabPane tab="Вкладка B" key="2">Контент B</TabPane>
    </Tabs>
  );
}

Типы вкладок

Ant Design предоставляет несколько вариантов отображения вкладок:

  • line (по умолчанию) — горизонтальные вкладки с линией под активной вкладкой.
  • card — вкладки, стилизованные под карточки.
  • editable-card — вкладки с возможностью динамического добавления и удаления.
<Tabs type="card">
  <TabPane tab="Вкладка 1" key="1">Контент 1</TabPane>
  <TabPane tab="Вкладка 2" key="2">Контент 2</TabPane>
</Tabs>

editable-card требует обработчиков для добавления и удаления вкладок:

function EditableTabs() {
  const [panes, setPanes] = useState([
    { title: 'Tab 1', content: 'Контент 1', key: '1' },
    { title: 'Tab 2', content: 'Контент 2', key: '2' },
  ]);
  const [activeKey, setActiveKey] = useState(panes[0].key);

  const add = () => {
    const newKey = `${panes.length + 1}`;
    setPanes([...panes, { title: `Tab ${newKey}`, content: `Контент ${newKey}`, key: newKey }]);
    setActiveKey(newKey);
  };

  const remove = (targetKey) => {
    const newPanes = panes.filter(p => p.key !== targetKey);
    setPanes(newPanes);
    if (activeKey === targetKey && newPanes.length) {
      setActiveKey(newPanes[0].key);
    }
  };

  return (
    <Tabs
      type="editable-card"
      onE dit={(targetKey, action) => {
        if (action === 'add') add();
        if (action === 'remove') remove(targetKey);
      }}
      activeKey={activeKey}
      onCha nge={setActiveKey}
    >
      {panes.map(pane => (
        <TabPane tab={pane.title} key={pane.key}>{pane.content}</TabPane>
      ))}
    </Tabs>
  );
}

Расположение вкладок

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

  • top — по умолчанию, сверху.
  • bottom — внизу.
  • left — слева, вертикальные.
  • right — справа, вертикальные.
<Tabs tabPosition="left">
  <TabPane tab="Вкладка 1" key="1">Контент 1</TabPane>
  <TabPane tab="Вкладка 2" key="2">Контент 2</TabPane>
</Tabs>

Ленивый рендеринг контента

По умолчанию вкладки рендерят контент сразу. Для оптимизации можно использовать destroyInactiveTabPane, чтобы неактивные вкладки уничтожались и создавались заново при переключении:

<Tabs destroyInactiveTabPane>
  <TabPane tab="Вкладка 1" key="1">Контент 1</TabPane>
  <TabPane tab="Вкладка 2" key="2">Контент 2</TabPane>
</Tabs>

События Tabs

  • onChange(activeKey) — вызывается при переключении вкладки.
  • onTabClick(key, event) — срабатывает при клике на вкладку.
  • onEdit(targetKey, action) — используется для editable-card.
<Tabs onCha nge={(key) => console.log('Переключено на', key)}>
  <TabPane tab="Вкладка 1" key="1">Контент 1</TabPane>
  <TabPane tab="Вкладка 2" key="2">Контент 2</TabPane>
</Tabs>

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

Вкладки легко настраиваются через CSS и встроенные пропсы:

  • tabBarStyle — стиль для панели вкладок.
  • tabBarExtraContent — добавляет дополнительные элементы в панель, например кнопки.
  • animated — включает или отключает анимацию при переключении вкладок.
<Tabs
  tabBarExtraContent={<button>Кнопка</button>}
  tabBarStyle={{ backgroundColor: '#f0f2f5' }}
  animated={false}
>
  <TabPane tab="Вкладка 1" key="1">Контент 1</TabPane>
</Tabs>

Группировка и вложенные вкладки

Вкладки можно вкладывать друг в друга, создавая сложные интерфейсы:

<Tabs defaultActiveKey="1">
  <TabPane tab="Внешняя 1" key="1">
    <Tabs defaultActiveKey="1-1">
      <TabPane tab="Внутренняя A" key="1-1">Контент A</TabPane>
      <TabPane tab="Внутренняя B" key="1-2">Контент B</TabPane>
    </Tabs>
  </TabPane>
  <TabPane tab="Внешняя 2" key="2">Контент 2</TabPane>
</Tabs>

Использование вложенных вкладок позволяет создавать интерфейсы с несколькими уровнями навигации без перегрузки страницы.

Итог по функционалу

Компонент Tabs Ant Design предоставляет:

  • Управляемые и неуправляемые состояния.
  • Различные типы отображения: line, card, editable-card.
  • Вертикальные и горизонтальные позиции.
  • Ленивый рендеринг и контроль состояния вкладок.
  • Расширяемость через события, стили и вложенные структуры.

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

Оглавление