Card — это гибкий и настраиваемый контейнер для контента в WordPress. Компонент может быть легко расширен и включает множество вспомогательных подкомпонентов, таких как CardBody, CardHeader, CardFooter, и другие, что позволяет создавать структурированные и эстетически привлекательные карточки для интерфейсов.
Основные параметры компонента Card
- elevation: Уровень тени, применяемый к карточке, помогает выделить её на фоне. Числовое значение, указывающее высоту тени.
- isBorderless: Определяет, отображается ли карточка без границы.
- isRounded: Указывает, имеет ли карточка закругленные углы.
- size: Управляет количеством отступов внутри карточки. Допустимые значения:
xSmall,small,medium,large.
Пример базового использования компонента Card
Компонент Card поддерживает несколько подкомпонентов, что делает его удобным для построения различных интерфейсов. Простой пример использования:
import {
Card,
CardHeader,
CardBody,
CardFooter,
__experimentalText as Text,
__experimentalHeading as Heading,
} from '@wordpress/components';
function BasicCardExample() {
return (
<Card>
<CardHeader>
<Heading level={ 4 }>Заголовок карточки</Heading>
</CardHeader>
<CardBody>
<Text>Контент карточки</Text>
</CardBody>
<CardFooter>
<Text>Подвал карточки</Text>
</CardFooter>
</Card>
);
}
Параметры компонента Card
elevation
- Описание: Устанавливает высоту тени карточки.
- Тип:
number - Обязателен: Нет
- По умолчанию:
0 - Пример использования:
<Card elevation={3}>
<CardBody>Контент с увеличенной тенью.</CardBody>
</Card>
isBorderless
- Описание: Определяет, будет ли карточка отображаться без границы.
- Тип:
boolean - Обязателен: Нет
- По умолчанию:
false - Пример использования:
<Card isBorderless>
<CardBody>Карточка без границы.</CardBody>
</Card>
isRounded
- Описание: Управляет закруглением углов карточки.
- Тип:
boolean - Обязателен: Нет
- По умолчанию:
true - Пример использования:
<Card isRounded={false}>
<CardBody>Карточка с прямыми углами.</CardBody>
</Card>
size
- Описание: Определяет внутренние отступы.
- Тип:
string - Обязателен: Нет
- По умолчанию:
medium - Допустимые значения:
xSmall,small,medium,large - Пример использования:
<Card size="large">
<CardBody>Карточка с увеличенными отступами.</CardBody>
</Card>
Вспомогательные подкомпоненты
Компонент Card предоставляет несколько подкомпонентов, которые можно использовать для создания сложных и привлекательных интерфейсов:
- CardHeader — для заголовков карточек.
- CardBody — основной блок контента.
- CardFooter — подвал карточки.
- CardDivider — разделитель между блоками.
- CardMedia — для отображения медиа-контента.
Пример с подкомпонентами
Пример карточки с подкомпонентами:
import {
Card,
CardHeader,
CardBody,
CardDivider,
CardMedia,
CardFooter,
} from '@wordpress/components';
const FullCardExample = () => (
<Card>
<CardHeader>Заголовок карточки</CardHeader>
<CardBody>Основной контент карточки.</CardBody>
<CardDivider />
<CardBody>Дополнительный блок контента.</CardBody>
<CardMedia>
<img src="https://example.com/image.jpg" alt="Пример изображения" />
</CardMedia>
<CardFooter>Подвал карточки</CardFooter>
</Card>
);
Контекст и передача свойств
Карточка Card использует контекст для передачи некоторых свойств подкомпонентам. Например, размер (size) и наличие границы (isBorderless) могут передаваться автоматически.
Пример, где размер передается в CardBody через контекст:
import { Card, CardBody } from '@wordpress/components';
const ContextSizeExample = () => (
<Card size="small">
<CardBody>Карточка с размером `small`.</CardBody>
</Card>
);
Подкомпоненты могут переопределять полученные через контекст параметры:
import { Card, CardBody } from '@wordpress/components';
const OverrideSizeExample = () => (
<Card size="small">
<CardBody>Размер small.</CardBody>
<CardBody>Еще один блок с размером small.</CardBody>
<CardBody size="large">Этот блок с размером large.</CardBody>
</Card>
);
Заключение
Компонент Card в WordPress позволяет создавать гибкие и настраиваемые карточки с различными уровнями детализации. Благодаря поддержке подкомпонентов и контекста, Card отлично подходит для построения сложных интерфейсов, где каждая деталь может быть индивидуально настроена.