Компонент TabPanel в WordPress: Полное Руководство с Примерами

Главная - WordPress Codex - Компонент TabPanel в WordPress: Полное Руководство с Примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент TabPanel в WordPress — это React-компонент, предназначенный для организации контента по вкладкам. Он включает список вкладок и область отображения содержимого, соответствующего выбранной вкладке. Данный компонент соответствует требованиям ARIA, что делает его доступным для всех пользователей.

TabPanel

Использование компонента TabPanel

Компонент TabPanel полезен для организации и навигации между связанными наборами контента на одном уровне иерархии. В каждой вкладке должен отображаться уникальный контент, объединённый общей темой.

Пример базового использования

В следующем примере TabPanel создаёт две вкладки. При выборе вкладки, её название выводится в консоль, а также отображается соответствующее содержимое.

import { TabPanel } from '@wordpress/components';

const handleSelect = (tabName) => {
    console.log('Выбрана вкладка:', tabName);
};

const MyTabPanelExample = () => (
    <TabPanel
        className="my-custom-tab-panel"
        activeClass="active-tab"
        onSelect={handleSelect}
        tabs={[
            { name: 'info', title: 'Информация', className: 'info-tab' },
            { name: 'settings', title: 'Настройки', className: 'settings-tab' },
        ]}
    >
        {(tab) => <p>{tab.title} — это содержимое вкладки.</p>}
    </TabPanel>
);

Свойства компонента TabPanel

Рассмотрим все параметры, которые можно использовать для настройки TabPanel:

СвойствоТипПо умолчаниюОписание
classNamestring''CSS-класс для внешнего контейнера TabPanel.
orientationstringhorizontalОриентация списка вкладок. Допустимые значения: horizontal и vertical.
onSelectfunctionnoopФункция, вызываемая при выборе вкладки. Получает tabName в качестве аргумента.
tabsarrayобязательноМассив объектов, описывающих вкладки. Каждый объект должен содержать свойства name и title, а также может включать className, icon, disabled и другие.
activeClassstringis-activeCSS-класс для активной вкладки.
initialTabNamestringnullИмя вкладки, которая будет выбрана по умолчанию. Если не указано, выберется первая вкладка.
selectOnMovebooleantrueКогда true, вкладка будет выбрана при получении фокуса. Если false, активация произойдёт только по клику.
children(object) => ElementобязательноФункция, рендерящая контент для выбранной вкладки. Получает объект активной вкладки как аргумент.

Настройка начальной вкладки и ориентации

В этом примере TabPanel отображает три вкладки, одна из которых (по имени overview) выбрана по умолчанию. Кроме того, вкладки расположены вертикально.

import { TabPanel } from '@wordpress/components';

const MyVerticalTabPanel = () => (
    <TabPanel
        className="vertical-tab-panel"
        activeClass="current-tab"
        initialTabName="overview"
        orientation="vertical"
        tabs={[
            { name: 'overview', title: 'Обзор', className: 'overview-tab' },
            { name: 'details', title: 'Детали', className: 'details-tab' },
            { name: 'contact', title: 'Контакты', className: 'contact-tab' },
        ]}
    >
        {(tab) => <p>Содержимое вкладки: {tab.title}</p>}
    </TabPanel>
);

В этом примере:

  • initialTabName установлен на overview, что выбирает вкладку «Обзор» при первом рендере.
  • orientation имеет значение vertical, что делает список вкладок вертикальным.

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

Компонент TabPanel поддерживает иконки, которые могут отображаться вместо заголовков. В данном примере иконка добавляется к вкладке «Главная», а также отключена вкладка «Справка».

import { TabPanel } from '@wordpress/components';
import { home, help } from '@wordpress/icons';

const MyIconTabPanel = () => (
    <TabPanel
        className="icon-tab-panel"
        activeClass="selected-tab"
        tabs={[
            { name: 'home', title: 'Главная', icon: home, className: 'home-tab' },
            { name: 'settings', title: 'Настройки', className: 'settings-tab' },
            { name: 'help', title: 'Справка', icon: help, className: 'help-tab', disabled: true },
        ]}
    >
        {(tab) => <p>Текущий раздел: {tab.title}</p>}
    </TabPanel>
);

В данном примере:

  • icon задаёт иконку вкладке «Главная», отображая её вместо текста.
  • disabled делает вкладку «Справка» недоступной для выбора.

Пример с выбором вкладки по наведению

Если требуется выбор вкладки при наведении, можно задать свойство selectOnMove в false, чтобы активация происходила только по клику.

import { TabPanel } from '@wordpress/components';

const HoverTabPanelExample = () => (
    <TabPanel
        className="hover-tab-panel"
        selectOnMove={false}
        tabs={[
            { name: 'profile', title: 'Профиль', className: 'profile-tab' },
            { name: 'notifications', title: 'Уведомления', className: 'notifications-tab' },
            { name: 'settings', title: 'Настройки', className: 'settings-tab' },
        ]}
    >
        {(tab) => <p>Раздел: {tab.title}</p>}
    </TabPanel>
);

Заключение

Компонент TabPanel в WordPress предоставляет удобный и доступный способ для организации контента по вкладкам. С помощью параметров, таких как orientation, initialTabName, selectOnMove и icon, вы можете гибко настраивать его внешний вид и поведение в зависимости от потребностей интерфейса.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg