Компонент BoxControl в WordPress с примерами

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

Компонент BoxControl в WordPress предназначен для управления значениями сторон элемента, таких как top, right, bottom и left. Его часто используют для настройки отступов (padding) или внешних отступов (margin), позволяя пользователю изменять размеры для каждой стороны элемента отдельно или для всех сторон одновременно.

BoxControl

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

import { useState } from 'react';
import { BoxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const MyBoxControlExample = () => {
    const [boxValues, setBoxValues] = useState({
        top: '20px',
        right: '15%',
        bottom: '20px',
        left: '15%',
    });

    const handleBoxChange = (newValues) => setBoxValues(newValues);

    return (
        <BoxControl
            values={boxValues}
            onChange={handleBoxChange}
            allowReset={true}
            splitOnAxis={false}
            inputProps={{ min: 0 }}
            label={__('Настройки отступов')}
            resetValues={{
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px'
            }}
            sides={['top', 'right', 'bottom', 'left']}
            units={[
                { value: 'px', label: 'px', default: true },
                { value: '%', label: '%' },
                { value: 'em', label: 'em' }
            ]}
            onMouseOver={() => console.log('Mouse over BoxControl')}
            onMouseOut={() => console.log('Mouse out of BoxControl')}
            __next40pxDefaultSize={true}
        />
    );
};

Описание параметров компонента BoxControl

allowReset

  • Описание: Включает кнопку для сброса значений в контроле. Если установлено значение true, отображается кнопка для сброса.
  • Тип: boolean
  • Значение по умолчанию: true

splitOnAxis

  • Описание: Опция для использования вертикальных и горизонтальных контролов при отключении связи сторон. Полезно для быстрого изменения вертикальных и горизонтальных отступов.
  • Тип: boolean
  • Значение по умолчанию: false

inputProps

  • Описание: Дополнительные параметры для внутреннего компонента UnitControl.
  • Тип: object
  • Значение по умолчанию: { min: 0 }
  • Пример:
inputProps={{ min: 5, max: 100 }}

label

  • Описание: Метка, отображаемая над контролом. Пользователь может задать собственный текст.
  • Тип: string
  • Значение по умолчанию: __('Box Control')
  • Пример: label={__('Настройки отступов')}

onChange

  • Описание: Функция-обработчик, вызываемая при изменении значений сторон. Получает обновленные значения как аргумент.
  • Тип: (nextValues: BoxControlValue) => void
  • Пример:
const onChange = (newValues) => setBoxValues(newValues);

resetValues

  • Описание: Объект значений для каждой стороны, используемый при сбросе. Значения по умолчанию можно установить для top, right, bottom и left.
  • Тип: object
  • Значение по умолчанию: { top: undefined, right: undefined, bottom: undefined, left: undefined }
  • Пример
resetValues={{
    top: '10px',
    right: '10px',
    bottom: '10px',
    left: '10px'
}}

sides

  • Описание: Массив сторон для управления. Если значение не указано, управление будет доступно для всех сторон. Допустимые значения: "top", "right", "bottom", "left", "vertical", и "horizontal".
  • Тип: string[]
  • Пример
sides={['top', 'right', 'bottom', 'left']}

units

  • Описание: Массив доступных единиц измерения, совместимых с UnitControl. Может включать px, %, em, и другие.
  • Тип: WPUnitControlUnit[]
  • Пример
units={[
    { value: 'px', label: 'px', default: true },
    { value: '%', label: '%' },
    { value: 'rem', label: 'rem' }
]}

values

  • Описание: Текущие значения для каждой стороны (top, right, bottom, left). Если значение отсутствует, оно считается undefined.
  • Тип: object
  • Пример
const values = { top: '10px', right: '5%', bottom: '10px', left: '5%' };

onMouseOver

  • Описание: Обработчик события onMouseOver для компонента BoxControl.
  • Тип: function
  • Пример
onMouseOver={() => console.log('Mouse over BoxControl')}

onMouseOut

  • Описание: Обработчик события onMouseOut для компонента BoxControl.
  • Тип: function
  • Пример
onMouseOut={() => console.log('Mouse out of BoxControl')}

__next40pxDefaultSize

  • Описание: Включает использование увеличенного размера, который будет применяться по умолчанию в будущих версиях.
  • Тип: boolean
  • Значение по умолчанию: false

Заключение

Компонент BoxControl предоставляет гибкость для настройки индивидуальных сторон элемента, что особенно полезно при работе с отступами и размерами элементов в кастомных интерфейсах WordPress. С помощью параметров allowReset, splitOnAxis, и units пользователь может гибко адаптировать компонент под различные задачи и сценарии.

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

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