Компонент IconButton в WordPress предоставляет удобный интерфейс для создания кнопок с иконками. Он спроектирован для улучшения пользовательского интерфейса в админке или на фронтенде вашего сайта. IconButton можно использовать так же, как и стандартный компонент Button, добавляя дополнительные стили и функциональность с иконками.
Для создания базовой кнопки с иконкой, используйте IconButton с атрибутами icon и children, которые управляют отображением иконки и текста, соответственно.
import { IconButton } from '@wordpress/components';
import { starFilled } from '@wordpress/icons';
<IconButton
icon={starFilled}
label="Избранное"
isPrimary
>
Добавить в избранное
</IconButton>
Продвинутый пример использования IconButton
В этом примере мы демонстрируем, как интегрировать IconButton с обработчиком событий onClick. Это позволяет взаимодействовать с компонентом с помощью кликов для выполнения определенных действий.
import { IconButton } from '@wordpress/components';
import { trash } from '@wordpress/icons';
function handleDelete() {
alert('Элемент удален!');
}
<IconButton
icon={trash}
label="Удалить"
isDestructive
onClick={ handleDelete }
>
Удалить элемент
</IconButton>
Настройка размера и стиля IconButton
IconButton поддерживает различные стили и размеры для адаптации к вашему дизайну. Используйте такие атрибуты, как isLarge и isSmall для изменения размера кнопки.
import { IconButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';
<IconButton
icon={edit}
label="Редактировать"
isLarge
>
Редактировать запись
</IconButton>
<IconButton
icon={edit}
label="Редактировать маленький"
isSmall
>
Изменить
</IconButton>
Заключение
Компонент IconButton предлагает мощный и гибкий способ добавления иконок к кнопкам в WordPress. Он легко настраивается и интегрируется с другими элементами интерфейса, поддерживая расширенные функции, такие как управление событиями и определение стилей, что делает его незаменимым инструментом для разработчиков.