Компонент Heading в WordPress используется для создания заголовков и заглавных текстов с использованием типографической системы библиотеки @wordpress/components. Этот компонент позволяет легко добавлять заголовки различных уровней (h1–h6) и настраивать их для отображения на страницах и в блоках WordPress.
Важно: Компонент
Headingявляется экспериментальным. Это означает, что его API может изменяться, и возможны существенные изменения в будущем.
Основы использования Heading
Компонент Heading поддерживает множество параметров для настройки внешнего вида и поведения заголовков. Он использует компонент Text в качестве базового элемента, что даёт доступ к большинству его параметров, кроме size и isBlock (по умолчанию установлен в true).
import { __experimentalHeading as Heading } from '@wordpress/components';
function ExampleHeading() {
return <Heading>Код — это поэзия</Heading>;
}
Основные параметры Heading
level
- Тип:
1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6' - Описание: Параметр
levelзадаёт уровень заголовка отh1доh6. В зависимости от переданного значенияHeadingбудет автоматически рендерить соответствующий HTML-элемент (<h1>,<h2>, и т.д.), а также подбирать соответствующий размер текста. - Обязательный: Нет
- Значение по умолчанию:
2
Пример использования:
function HeadingExampleWithLevel() {
return (
<div>
<Heading level={1}>Главный заголовок</Heading>
<Heading level={3}>Подзаголовок уровня 3</Heading>
<Heading level={5}>Заголовок уровня 5</Heading>
</div>
);
}
Параметры из компонента Text
Так как Heading наследует параметры от компонента Text, рассмотрим также параметры Text, которые применимы и к Heading. Эти параметры позволяют тонко настраивать текст внутри заголовка.
isBlock
- Тип:
boolean - Описание: Параметр
isBlockопределяет, должен ли компонентHeadingотображаться как блочный элемент (display: block). По умолчанию дляHeadingэто значениеtrue.
Пример:
function HeadingWithBlockExample() {
return (
<div>
<Heading level={2} isBlock={false}>Этот заголовок не блочный</Heading>
<Heading level={2}>А этот — блочный (по умолчанию)</Heading>
</div>
);
}
variant
- Тип:
TextVariant - Описание: Параметр
variantопределяет вариацию текста для заголовка, например, можно использовать разные стили текста в зависимости от дизайна.
Пример:
function HeadingWithVariantExample() {
return (
<div>
<Heading level={2} variant="muted">Заголовок с muted стилем</Heading>
<Heading level={3} variant="strong">Заголовок с сильным акцентом</Heading>
</div>
);
}
color
- Тип:
string - Описание: Параметр
colorпозволяет задать цвет текста. Можно использовать значения CSS, например, цветовые коды или наименования цветов.
Пример:
function HeadingWithColorExample() {
return (
<div>
<Heading level={1} color="#FF5733">Заголовок с пользовательским цветом</Heading>
<Heading level={3} color="blue">Синий заголовок</Heading>
</div>
);
}
lineHeight
- Тип:
string | number - Описание: Позволяет задать межстрочный интервал текста (line height), что может быть полезно для улучшения читабельности заголовков.
Пример:
function HeadingWithLineHeightExample() {
return (
<div>
<Heading level={2} lineHeight={1.5}>Заголовок с увеличенным межстрочным интервалом</Heading>
<Heading level={4} lineHeight="2">Другой заголовок с line-height 2</Heading>
</div>
);
}
truncate
- Тип:
boolean - Описание: Определяет, следует ли обрезать текст, если он не помещается в контейнер. Полезно для адаптивных заголовков на мобильных устройствах или для заголовков ограниченной ширины.
Пример:
function HeadingWithTruncateExample() {
return (
<div style={{ width: '150px' }}>
<Heading level={3} truncate>
Очень длинный заголовок, который не помещается в контейнер
</Heading>
</div>
);
}
textAlign
- Тип:
string - Описание: Задает выравнивание текста внутри заголовка:
left,center,right.
Пример:
function HeadingWithTextAlignExample() {
return (
<div>
<Heading level={2} textAlign="center">Центрированный заголовок</Heading>
<Heading level={3} textAlign="right">Заголовок, выровненный вправо</Heading>
</div>
);
}
Полный пример компонента Heading
Объединим все параметры в одном примере, чтобы продемонстрировать гибкость компонента Heading и возможность применения всех настроек одновременно.
function FullExampleHeading() {
return (
<div>
<Heading
level={1}
color="purple"
lineHeight={1.3}
truncate
textAlign="center"
isBlock={true}
>
Полностью настроенный заголовок
</Heading>
<Heading
level={2}
variant="muted"
color="#3A9D23"
lineHeight="1.8"
isBlock={false}
>
Ещё один заголовок с настройками
</Heading>
</div>
);
}
Заключение
Компонент Heading в WordPress позволяет легко добавлять заголовки различных уровней и настраивать их внешний вид с помощью множества параметров. Возможности настройки, такие как выбор уровня, цвета, выравнивания, межстрочного интервала и обрезки текста, делают Heading мощным инструментом для гибкой настройки типографики в WordPress, особенно при создании динамических блоков и интерфейсов для редактора.