CardHeader — это компонент в WordPress, который отображает опциональную верхнюю часть карточки (Card). Он позволяет добавить заголовок или другой важный элемент в верхнюю часть карточки, улучшая структуру и восприятие контента. CardHeader часто используется для обозначения названия карточки или отображения других важных меток.
Основные возможности компонента CardHeader
CardHeader может быть использован для добавления заголовков, меток или других информационных блоков в верхнюю часть карточки. Он также поддерживает гибкие настройки, позволяя изменять внешний вид, размер и оформление в зависимости от нужд проекта.
Базовый пример использования
Простой пример использования CardHeader заключается в том, чтобы добавить заголовок в карточку. Его можно разместить перед содержимым карточки, например:
import { Card, CardHeader, CardBody } from '@wordpress/components';
const BasicCardExample = () => (
<Card>
<CardHeader>Заголовок карточки</CardHeader>
<CardBody>
Это основной контент карточки.
</CardBody>
</Card>
);
Свойства компонента CardHeader
CardHeader поддерживает несколько полезных свойств, которые позволяют гибко настроить его внешний вид и поведение.
Свойство isBorderless
- Описание: Убирает границу вокруг CardHeader.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
import { Card, CardHeader, CardBody } from '@wordpress/components';
const BorderlessHeaderExample = () => (
<Card>
<CardHeader isBorderless={true}>
Заголовок без границы
</CardHeader>
<CardBody>
Контент карточки без границы в заголовке.
</CardBody>
</Card>
);
Свойство isShady
- Описание: Устанавливает светло-серый фон для CardHeader.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
import { Card, CardHeader, CardBody } from '@wordpress/components';
const ShadyHeaderExample = () => (
<Card>
<CardHeader isShady={true}>
Заголовок с серым фоном
</CardHeader>
<CardBody>
Основной контент карточки с серым фоном в заголовке.
</CardBody>
</Card>
);
Свойство size
- Описание: Определяет размер внутреннего отступа для CardHeader.
- Тип:
string - Обязательный: Нет
- Значение по умолчанию:
medium - Допустимые значения:
xSmall,small,medium,large
import { Card, CardHeader, CardBody } from '@wordpress/components';
const SizedHeaderExample = () => (
<Card>
<CardHeader size="large">
Заголовок с большим отступом
</CardHeader>
<CardBody>
Контент карточки с заголовком, имеющим большой отступ.
</CardBody>
</Card>
);
Использование с компонентами Flex
В некоторых случаях вам может понадобиться выравнивать элементы внутри заголовка карточки. CardHeader может быть использован в сочетании с компонентом Flex, что позволяет выравнивать элементы внутри заголовка.
import { Button, Card, CardHeader, CardBody, FlexItem, FlexBlock } from '@wordpress/components';
const FlexHeaderExample = () => (
<Card>
<CardHeader>
<FlexBlock>Заголовок карточки</FlexBlock>
<FlexItem>
<Button variant="primary">Действие</Button>
</FlexItem>
</CardHeader>
<CardBody>
Основной контент карточки с элементами в заголовке.
</CardBody>
</Card>
);
Расширенное использование
CardHeader можно использовать не только для заголовков, но и для отображения других важных элементов, таких как изображения, иконки, метки или другие интерактивные элементы. Например:
import { Card, CardHeader, CardBody, Button } from '@wordpress/components';
const AdvancedHeaderExample = () => (
<Card>
<CardHeader>
<h2>Заголовок карточки с кнопкой</h2>
<Button variant="tertiary">Дополнительное действие</Button>
</CardHeader>
<CardBody>
Это основной контент карточки с дополнительным действием в заголовке.
</CardBody>
</Card>
);
Заключение
CardHeader — это мощный компонент для добавления заголовков или других важных элементов в верхнюю часть карточки. Его использование позволяет легко структурировать контент и добавить визуальную иерархию, делая интерфейсы более удобными и понятными для пользователей. В комбинации с другими компонентами WordPress, такими как Flex, он позволяет создавать более сложные и отзывчивые интерфейсы.