Компонент Spacer в WordPress – это экспериментальная функция, используемая для создания пространства (поля или отступа) между элементами на странице. Она позволяет гибко настраивать внешний (margin) и внутренний (padding) отступы и применяется в компонентах HStack и VStack для адаптивного создания промежутков.
Примечание: Этот компонент является экспериментальным и может подвергаться изменениям.
Использование компонента
Spacer поддерживает множество свойств, позволяющих задавать отступы в различных направлениях. Значения этих свойств работают как множители для базовой сетки WordPress (шаг 4px). Таким образом, если указать marginBottom равным 2, отступ составит 8px (4px × 2).
Пример базового использования
import {
__experimentalSpacer as Spacer,
__experimentalHeading as Heading,
__experimentalView as View,
} from '@wordpress/components';
function Example() {
return (
<View>
<Spacer marginBottom={4}>
<Heading>Добро пожаловать на WordPress.org</Heading>
</Spacer>
<p>Код – это поэзия</p>
</View>
);
}
Свойства компонента (Props)
children: ReactNode
Дочерние элементы, которые будут обернуты компонентом Spacer.
- Обязательное: Нет
Пример:
<Spacer>
<p>Этот текст обернут Spacer-компонентом.</p>
</Spacer>
margin: number
Общий отступ вокруг компонента. Принимает числовое значение, которое умножается на базовую единицу (4px).
- Обязательное: Нет
Пример:
<Spacer margin={3}>
<p>Отступ вокруг этого текста составляет 12px.</p>
</Spacer>
marginBottom: number
Задает отступ снизу, может переопределить значения margin и marginY.
- Обязательное: Нет
- По умолчанию:
2
Пример:
<Spacer marginBottom={5}>
<p>Нижний отступ для этого текста составляет 20px.</p>
</Spacer>
marginLeft: number
Задает отступ слева, может переопределить значения margin и marginX.
- Обязательное: Нет
Пример:
<Spacer marginLeft={4}>
<p>Левый отступ для этого текста составляет 16px.</p>
</Spacer>
marginRight: number
Задает отступ справа, может переопределить значения margin и marginX.
- Обязательное: Нет
Пример:
<Spacer marginRight={2}>
<p>Правый отступ для этого текста составляет 8px.</p>
</Spacer>
marginTop: number
Задает отступ сверху, может переопределить значения margin и marginY.
- Обязательное: Нет
Пример:
<Spacer marginTop={6}>
<p>Верхний отступ для этого текста составляет 24px.</p>
</Spacer>
marginX: number
Задает отступы слева и справа одновременно, может переопределить значение margin.
- Обязательное: Нет
Пример:
<Spacer marginX={3}>
<p>Отступы справа и слева для этого текста составляют 12px.</p>
</Spacer>
marginY: number
Задает отступы сверху и снизу одновременно, может переопределить значение margin.
- Обязательное: Нет
Пример:
<Spacer marginY={4}>
<p>Отступы сверху и снизу для этого текста составляют 16px.</p>
</Spacer>
padding: number
Задает общий внутренний отступ вокруг компонента. Значение умножается на базовую единицу (4px).
- Обязательное: Нет
Пример:
<Spacer padding={5}>
<p>Внутренний отступ для этого текста составляет 20px.</p>
</Spacer>
paddingBottom: number
Задает внутренний отступ снизу, может переопределить значения padding и paddingY.
- Обязательное: Нет
Пример:
<Spacer paddingBottom={3}>
<p>Внутренний нижний отступ для этого текста составляет 12px.</p>
</Spacer>
paddingLeft: number
Задает внутренний отступ слева, может переопределить значения padding и paddingX.
- Обязательное: Нет
Пример:
<Spacer paddingLeft={2}>
<p>Внутренний левый отступ для этого текста составляет 8px.</p>
</Spacer>
paddingRight: number
Задает внутренний отступ справа, может переопределить значения padding и paddingX.
- Обязательное: Нет
Пример:
<Spacer paddingRight={4}>
<p>Внутренний правый отступ для этого текста составляет 16px.</p>
</Spacer>
paddingTop: number
Задает внутренний отступ сверху, может переопределить значения padding и paddingY.
- Обязательное: Нет
Пример:
<Spacer paddingTop={5}>
<p>Внутренний верхний отступ для этого текста составляет 20px.</p>
</Spacer>
paddingX: number
Задает внутренние отступы слева и справа, может переопределить значение padding.
- Обязательное: Нет
Пример:
<Spacer paddingX={3}>
<p>Внутренние отступы слева и справа составляют 12px.</p>
</Spacer>
paddingY: number
Задает внутренние отступы сверху и снизу, может переопределить значение padding.
- Обязательное: Нет
Пример:
<Spacer paddingY={2}>
<p>Внутренние отступы сверху и снизу составляют 8px.</p>
</Spacer>
Заключение
Компонент Spacer позволяет гибко управлять отступами между элементами, создавая аккуратные и визуально структурированные интерфейсы. Его широкие возможности по настройке отступов делают его удобным для использования в различных сценариях, помогая улучшить восприятие и внешний вид вашего проекта в WordPress.