Компонент Panel в WordPress используется для создания панелей с раздвижными секциями контента, которые можно сворачивать и разворачивать. Эти панели помогают пользователю управлять объемом отображаемой информации, показывая только нужный контент.
Используйте Panel, если необходимо:
- Просмотреть обзор нескольких связанных разделов контента.
- Показать или скрыть разделы по мере необходимости.
- Скрыть второстепенную информацию, которую пользователи не обязаны видеть постоянно.
- Предоставить возможность просматривать более одного раздела одновременно.
Основные части и принципы использования
Компонент Panel
Компонент Panel служит контейнером, который может содержать заголовок и элементы PanelBody, которые можно раскрывать или сворачивать для управления состоянием и атрибутами интерфейса.
Компонент PanelBody
PanelBody создает контейнер, который можно открывать или закрывать. Он включает заголовок и иконку, а также может автоматически прокручивать контент при раскрытии.
Компонент PanelRow
PanelRow служит контейнером для строк внутри PanelBody, добавляя к элементам отступы и гибкость расположения.
Пример использования Panel
import { Panel, PanelBody, PanelRow } from '@wordpress/components';
import { more } from '@wordpress/icons';
const SettingsPanel = () => (
<Panel header="Настройки блока">
<PanelBody title="Основные параметры" icon={ more } initialOpen={ true }>
<PanelRow>
<label>Выберите опцию:</label>
<input type="text" placeholder="Введите значение" />
</PanelRow>
</PanelBody>
<PanelBody title="Дополнительные параметры" initialOpen={ false }>
<PanelRow>
<button>Сохранить настройки</button>
</PanelRow>
</PanelBody>
</Panel>
);
Подробное описание параметров Panel
1. header
- Описание: Текст, который будет отображаться в заголовке панели. Отображается внутри тега
<h2>. - Тип:
string - Обязательный: Нет
2. className
- Описание: CSS-класс, применяемый к обертке панели.
- Тип:
string - Обязательный: Нет
3. children
- Описание: Контент, который отображается внутри панели. Это может быть текст, другие компоненты или HTML-элементы.
- Тип:
React.ReactNode - Обязательный: Да
Подробное описание параметров PanelBody
1. title
- Описание: Текст, который отображается как заголовок секции и виден, даже если секция закрыта.
- Тип:
string - Обязательный: Нет
2. opened
- Описание: Если установлено в
true, секция остается открытой, несмотря на начальное состояниеinitialOpen, и ее нельзя закрыть. - Тип:
boolean - Обязательный: Нет
3. className
- Описание: CSS-класс, применяемый к обертке компонента
PanelBody. - Тип:
string - Обязательный: Нет
4. icon
- Описание: Иконка, отображаемая рядом с заголовком секции.
- Тип:
JSX.Element - Обязательный: Нет
5. onToggle
- Описание: Функция, вызываемая при каждом переключении компонента из закрытого состояния в открытое и наоборот.
- Тип:
(next: boolean) => void - Обязательный: Нет
- Значение по умолчанию:
noop(функция, которая ничего не делает)
6. initialOpen
- Описание: Указывает, должна ли секция быть открыта изначально.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
true
7. children
- Описание: Контент, отображаемый внутри
PanelBody. Если передана функция, она получит объект с параметромopened. - Тип:
React.ReactNode | (props: { opened: boolean }) => React.ReactNode - Обязательный: Нет
8. buttonProps
- Описание: Свойства, передаваемые кнопке в заголовке
PanelBody. - Тип:
WordPressComponentProps<Omit<ButtonAsButtonProps, 'icon'>, 'button', false> - Обязательный: Нет
- Значение по умолчанию:
{}
9. scrollAfterOpen
- Описание: Прокручивает содержимое до видимой области при его открытии.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
true
Подробное описание параметров PanelRow
1. className
- Описание: CSS-класс, применяемый к обертке компонента
PanelRow. - Тип:
string - Обязательный: Нет
2. children
- Описание: Контент, отображаемый внутри строки панели.
- Тип:
React.ReactNode - Обязательный: Нет
Пример с использованием иконки и прокруткой
import { Panel, PanelBody, PanelRow } from '@wordpress/components';
import { more, cog } from '@wordpress/icons';
const AdvancedPanel = () => (
<Panel header="Панель настроек">
<PanelBody title="Основные параметры" icon={more} initialOpen={true} scrollAfterOpen={true}>
<PanelRow>
<input type="checkbox" id="enable-option" />
<label htmlFor="enable-option">Включить опцию</label>
</PanelRow>
</PanelBody>
<PanelBody title="Расширенные параметры" icon={cog} initialOpen={false}>
<PanelRow>
<label>Настройка:</label>
<input type="number" defaultValue={10} />
</PanelRow>
</PanelBody>
</Panel>
);
Пример с onToggle и buttonProps
import { Panel, PanelBody, PanelRow } from '@wordpress/components';
import { edit } from '@wordpress/icons';
import { useState } from 'react';
const TogglablePanel = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<Panel header="Переключаемая панель">
<PanelBody
title="Параметры блока"
icon={edit}
initialOpen={false}
onToggle={(next) => setIsOpen(next)}
buttonProps={{ className: "panel-toggle-button" }}
>
<PanelRow>
<label>Имя блока:</label>
<input type="text" placeholder="Введите имя блока" />
</PanelRow>
{isOpen && (
<PanelRow>
<p>Дополнительные настройки активны.</p>
</PanelRow>
)}
</PanelBody>
</Panel>
);
};
Заключение
Компонент Panel в WordPress предоставляет удобный способ организации контента в виде секций, которые можно разворачивать и сворачивать. Компоненты PanelBody и PanelRow дополняют его, позволяя добавлять интерактивные элементы и создавать гибкие настройки для блоков и интерфейсов в WordPress.