Компонент CardFooter в WordPress позволяет создавать нижнюю часть карточки (Card) и является отличным инструментом для отображения элементов управления, дополнительной информации или кнопок действия. Он поддерживает гибкую компоновку и легко интегрируется с другими компонентами, что позволяет разработчикам добавлять структурированные подвал карточки в своих интерфейсах.
Основные возможности и назначение
CardFooter является частью компонента Card и предназначен для добавления нижней части карточки. Он наследует свойства от компонента Flex, что позволяет легко выравнивать содержимое внутри него. CardFooter часто используется в сочетании с кнопками, ссылками и другими интерактивными элементами, создавая область действий для пользователя.
Базовый пример использования
Для того чтобы добавить CardFooter в карточку, его можно просто поместить после содержимого, как в примере ниже:
import { Card, CardBody, CardFooter } from '@wordpress/components';
const BasicCardExample = () => (
<Card>
<CardBody>
Это основной контент карточки.
</CardBody>
<CardFooter>
Это подвал карточки.
</CardFooter>
</Card>
);
Свойства компонента CardFooter
CardFooter поддерживает несколько полезных свойств, которые позволяют гибко настроить его внешний вид и поведение.
Свойство isBorderless
- Описание: Убирает границу вокруг CardFooter.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
import { Card, CardBody, CardFooter } from '@wordpress/components';
const BorderlessFooterExample = () => (
<Card>
<CardBody>
Пример карточки без границы у подвала.
</CardBody>
<CardFooter isBorderless={true}>
Подвал без границы.
</CardFooter>
</Card>
);
Свойство isShady
- Описание: Устанавливает светло-серый фон для CardFooter.
- Тип:
boolean - Обязательный: Нет
- Значение по умолчанию:
false
import { Card, CardBody, CardFooter } from '@wordpress/components';
const ShadyFooterExample = () => (
<Card>
<CardBody>
Пример карточки с затенённым подвалом.
</CardBody>
<CardFooter isShady={true}>
Подвал с серым фоном.
</CardFooter>
</Card>
);
Свойство justify
- Описание: Определяет выравнивание элементов внутри CardFooter. Используется так же, как свойство
justifyContentв CSS. - Тип:
CSSProperties[‘justifyContent’] - Обязательный: Нет
import { Card, CardBody, CardFooter, Button } from '@wordpress/components';
const JustifiedFooterExample = () => (
<Card>
<CardBody>
Основной контент карточки с выравниванием кнопок в подвале.
</CardBody>
<CardFooter justify="space-between">
<Button>Назад</Button>
<Button>Далее</Button>
</CardFooter>
</Card>
);
Свойство size
- Описание: Устанавливает размер внутреннего отступа для CardFooter.
- Тип:
string - Обязательный: Нет
- Значение по умолчанию:
medium - Допустимые значения:
xSmall,small,medium,large
import { Card, CardBody, CardFooter } from '@wordpress/components';
const PaddedFooterExample = () => (
<Card>
<CardBody>
Контент карточки с подвалом большого размера.
</CardBody>
<CardFooter size="large">
Подвал с увеличенными отступами.
</CardFooter>
</Card>
);
Расширенное использование с компоновкой Flex
Поскольку CardFooter использует Flex для выравнивания, его можно использовать с компонентами FlexItem и FlexBlock для более детальной компоновки содержимого. Это полезно, если в подвале необходимо разместить несколько элементов с разным выравниванием.
import { Button, Card, CardBody, CardFooter, FlexItem, FlexBlock } from '@wordpress/components';
const FooterWithButtonsExample = () => (
<Card>
<CardBody>
Основной контент карточки с дополнительными кнопками в подвале.
</CardBody>
<CardFooter>
<FlexBlock>Текст или метки в подвале</FlexBlock>
<FlexItem>
<Button variant="primary">Сохранить</Button>
</FlexItem>
<FlexItem>
<Button variant="secondary">Отмена</Button>
</FlexItem>
</CardFooter>
</Card>
);
Практическое применение CardFooter в интерфейсах
CardFooter позволяет легко добавлять интерактивные элементы в карточки и подходит для создания областей, содержащих действия или важные сообщения. Вот пример использования с несколькими кнопками и текстом для реализации простого интерфейса:
import { Card, CardBody, CardFooter, Button } from '@wordpress/components';
const InteractiveFooterExample = () => (
<Card>
<CardBody>
Контент карточки с различными действиями в подвале.
</CardBody>
<CardFooter justify="center">
<Button variant="tertiary">Подробнее</Button>
<Button variant="primary">Подтвердить</Button>
<Button variant="secondary">Отменить</Button>
</CardFooter>
</Card>
);
Заключение
Компонент CardFooter в WordPress предоставляет гибкий и удобный способ добавления нижней части карточек с поддержкой множества настроек, таких как размер, фон, выравнивание и граница. Его использование делает интерфейс более удобным и позволяет структурировать действия пользователя в одном месте.