Компонент CardBody — это область контента внутри компонента Card, которая позволяет структурировать содержимое в карточках интерфейса. Внутри одной карточки можно использовать несколько компонентов CardBody, что делает его гибким инструментом для оформления различных блоков контента.
Основные характеристики и возможности
Компонент CardBody позволяет задавать:
- Возможность прокрутки содержимого (с помощью свойства
isScrollable); - Отображение светлого фона для выделения области (
isShady); - Уровень внутреннего отступа (
size), задающий пространство вокруг содержимого.
Пример базового использования
Для использования CardBody потребуется обернуть его в компонент Card, чтобы задать контекст:
import { Card, CardBody } from '@wordpress/components';
const Example = () => (
<Card>
<CardBody>
Это пример базового контента внутри CardBody.
</CardBody>
</Card>
);
Свойства (Props)
1. isScrollable (логический тип)
Определяет, доступна ли прокрутка для содержимого внутри CardBody. Это полезно, если текст или контент превышает размер области, и необходимо предоставить возможность прокрутки.
- Обязательный: Нет
- Тип:
boolean - Значение по умолчанию:
false
Пример использования:
<Card>
<CardBody isScrollable={true}>
Очень длинный текст или контент, который при необходимости можно прокручивать.
</CardBody>
</Card>
2. isShady (логический тип)
Если включено, компонент отображает светло-серый фон, который помогает визуально выделить содержимое внутри карточки.
- Обязательный: Нет
- Тип:
boolean - Значение по умолчанию:
false
Пример использования:
<Card>
<CardBody isShady={true}>
Контент с светло-серым фоном для лучшего выделения.
</CardBody>
</Card>
3. size (строковый тип)
Устанавливает размер отступа вокруг содержимого. Это свойство можно использовать для контроля пространства внутри компонента, и оно поддерживает несколько значений: xSmall, small, medium, large.
- Обязательный: Нет
- Тип:
string - Значение по умолчанию:
medium
Пример использования:
<Card>
<CardBody size="large">
Контент с увеличенными внутренними отступами.
</CardBody>
</Card>
Расширенное использование с дочерними компонентами
Компонент Card может включать другие дочерние компоненты, такие как CardHeader, CardDivider, CardMedia, и CardFooter. Они помогают создать структурированный и последовательный интерфейс для отображения информации.
import { Card, CardHeader, CardBody, CardDivider, CardMedia, CardFooter } from '@wordpress/components';
const DetailedCardExample = () => (
<Card>
<CardHeader>Заголовок карточки</CardHeader>
<CardBody>
Это основной контент в первом блоке CardBody.
</CardBody>
<CardDivider />
<CardBody size="large" isShady={true}>
Это дополнительный контент во втором блоке CardBody с увеличенными отступами и фоном.
</CardBody>
<CardMedia>
<img src="https://example.com/sample-image.jpg" alt="Пример изображения" />
</CardMedia>
<CardFooter>Нижняя часть карточки</CardFooter>
</Card>
);
Примеры использования каждого свойства в компоненте
- Пример прокручиваемого контента: В случае большого объема данных в области CardBody можно активировать прокрутку с помощью свойства
isScrollable.
<Card>
<CardBody isScrollable={true}>
<p>Большой объем текста, который будет прокручиваться при превышении высоты компонента.</p>
<p>Дополнительный текст, доступный через прокрутку.</p>
</CardBody>
</Card>
- Пример компонента с серым фоном: Если нужно выделить область контента внутри CardBody, установите свойство
isShadyдля добавления светло-серого фона.
<Card>
<CardBody isShady={true}>
<p>Контент с светло-серым фоном, выделяющий его визуально среди других элементов.</p>
</CardBody>
</Card>
- Пример с различными размерами отступов: Настройка размера внутреннего отступа помогает управлять композицией и стилем.
<Card>
<CardBody size="small">
<p>Контент с маленьким отступом.</p>
</CardBody>
<CardDivider />
<CardBody size="large">
<p>Контент с увеличенным отступом для большего пространства.</p>
</CardBody>
</Card>
Заключение
Компонент CardBody предоставляет гибкость при создании карточек с уникальными стилями и структурой контента. С его помощью можно легко создавать прокручиваемые области, добавлять визуальные акценты с серым фоном и настраивать отступы в зависимости от потребностей дизайна.