Компонент ToolbarButton в WordPress используется для добавления кнопок с действиями в панели инструментов. Его можно использовать как для создания общих интерфейсов, так и для добавления управления в пользовательские блоки. Этот компонент похож на Button, но имеет стили и поведение, соответствующие кнопкам в панели инструментов.
Основное назначение ToolbarButton
Компонент ToolbarButton обеспечивает единый стиль и поддержку взаимодействия с клавиатурой для кнопок в панелях инструментов. Обычно он используется внутри компонентов Toolbar или ToolbarGroup для добавления действий в интерфейс панели инструментов.
Использование ToolbarButton для создания панели инструментов
Ниже приведен пример, показывающий, как использовать ToolbarButton для добавления кнопки в панель инструментов. В этом примере кнопка вызывает действие при нажатии.
import { Toolbar, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';
function MyToolbar() {
return (
<Toolbar label="Опции">
<ToolbarButton
icon={edit}
label="Редактировать"
onClick={() => alert('Редактирование начато')}
/>
</Toolbar>
);
}
Пояснение к примеру
В этом примере мы создаем панель инструментов с одной кнопкой. Кнопка отображает иконку редактирования и при нажатии вызывает всплывающее сообщение «Редактирование начато». Toolbar обеспечивает контейнер для кнопок, а ToolbarButton добавляет стандартные стили и поддержку клавиатуры.
Использование ToolbarButton в пользовательских блоках
Когда вы хотите добавить кнопку в панель инструментов конкретного блока, рекомендуется использовать BlockControls, что позволяет лучше управлять панелью инструментов блока.
Пример использования внутри BlockControls
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';
function CustomBlockEdit() {
return (
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon={edit}
label="Редактировать блок"
onClick={() => alert('Редактирование блока начато')}
/>
</ToolbarGroup>
</BlockControls>
);
}
Пояснение к примеру
В этом примере кнопка «Редактировать блок» добавляется в панель управления пользовательского блока. BlockControls создает панель инструментов для блока, а ToolbarGroup позволяет сгруппировать несколько кнопок.
Свойства (Props) компонента ToolbarButton
Компонент ToolbarButton поддерживает ряд параметров, аналогичных компоненту Button, а также некоторые дополнительные.
1. icon
Тип: Component
Описание: Иконка для отображения на кнопке. Чаще всего это один из значков из пакета @wordpress/icons, но можно использовать и кастомные SVG.
<ToolbarButton
icon={edit}
label="Изменить иконку"
onClick={() => alert('Иконка изменена')}
/>
2. label
Тип: string
Описание: Текст метки кнопки, который помогает пользователю понять назначение кнопки. Также используется для создания доступных подсказок.
<ToolbarButton
icon={edit}
label="Редактировать текст"
onClick={() => alert('Редактирование текста')}
/>
3. onClick
Тип: function
Описание: Функция, которая будет вызвана при нажатии на кнопку.
<ToolbarButton
icon={edit}
label="Печать"
onClick={() => console.log('Печать документа')}
/>
4. containerClassName
Тип: string
Описание: Дополнительный CSS-класс, который будет применен к контейнеру кнопки. Это позволяет добавить кастомные стили.
<ToolbarButton
icon={edit}
label="Пользовательская кнопка"
containerClassName="my-custom-toolbar-button"
onClick={() => alert('Кастомные стили применены')}
/>
5. subscript
Тип: string
Описание: Подстрочный текст, отображаемый рядом с иконкой кнопки. Может использоваться для дополнительной информации.
<ToolbarButton
icon={edit}
label="Сохранить"
subscript="Ctrl+S"
onClick={() => alert('Документ сохранен')}
/>
Полный пример использования ToolbarButton с кастомными параметрами
Ниже приведен более сложный пример использования компонента ToolbarButton с различными параметрами. В данном примере создается панель инструментов с несколькими кнопками для различных действий.
import { Toolbar, ToolbarButton } from '@wordpress/components';
import { edit, save, undo } from '@wordpress/icons';
function CustomToolbar() {
return (
<Toolbar label="Панель инструментов">
<ToolbarButton
icon={edit}
label="Редактировать"
onClick={() => alert('Начато редактирование')}
/>
<ToolbarButton
icon={save}
label="Сохранить"
containerClassName="custom-save-button"
subscript="Ctrl+S"
onClick={() => alert('Сохранено')}
/>
<ToolbarButton
icon={undo}
label="Отменить"
onClick={() => alert('Отмена последнего действия')}
/>
</Toolbar>
);
}
В этом примере панель инструментов содержит три кнопки: для редактирования, сохранения и отмены последнего действия. Кнопка сохранения имеет кастомный класс и подстрочный текст для обозначения горячей клавиши.
Заключение
Компонент ToolbarButton упрощает создание доступных и удобных интерфейсов панелей инструментов в WordPress.