Card

Компонент Card в Chakra UI представляет собой контейнер для отображения информации, объединяющий визуальные элементы, текст и действия. Он обеспечивает структурированное оформление и поддержку адаптивного дизайна без необходимости ручного написания CSS.

Структура Card

Базовая структура Card включает три основных блока:

  1. CardContainer – основной контейнер, который задаёт фон, тень и скругления.
  2. CardHeader – верхняя часть для заголовка или изображений.
  3. CardBody – основной контент, текст или списки.
  4. CardFooter – нижняя часть для действий, кнопок или ссылок.

Пример базового Card:

import { Card, CardHeader, CardBody, CardFooter, Button, Text } from "@chakra-ui/react";

function ExampleCard() {
  return (
    <Card maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
      <CardHeader>
        <Text fontSize="xl" fontWeight="bold">Заголовок карточки</Text>
      </CardHeader>
      <CardBody>
        <Text>Описание карточки с информацией о продукте или контенте.</Text>
      </CardBody>
      <CardFooter>
        <Button colorScheme="blue">Действие</Button>
      </CardFooter>
    </Card>
  );
}

Свойства Card

Card наследует свойства всех Box-компонентов Chakra UI, что позволяет гибко управлять стилями:

  • maxW – максимальная ширина.
  • borderRadius – скругление углов.
  • boxShadow – тень, например "md", "lg".
  • overflow – поведение содержимого при переполнении ("hidden", "scroll").
  • bg – фоновый цвет.

Пример с кастомизацией:

<Card
  maxW="400px"
  bg="gray.50"
  boxShadow="xl"
  borderRadius="2xl"
  p={4}
>
  <CardBody>
    <Text>Кастомизированная карточка с увеличенной тенью и скруглениями.</Text>
  </CardBody>
</Card>

Вложенные компоненты и композиция

Chakra UI позволяет комбинировать карточки с другими компонентами для создания сложных интерфейсов:

  • Image внутри CardHeader:
import { Image } from "@chakra-ui/react";

<Card maxW="sm" borderRadius="md" overflow="hidden">
  <CardHeader>
    <Image src="/example.jpg" alt="Пример изображения" />
  </CardHeader>
  <CardBody>
    <Text>Карточка с изображением в шапке.</Text>
  </CardBody>
</Card>
  • Использование Stack для выравнивания элементов:
import { Stack } from "@chakra-ui/react";

<Card maxW="sm" borderRadius="md" overflow="hidden">
  <CardBody>
    <Stack spacing={3}>
      <Text fontWeight="bold">Заголовок</Text>
      <Text>Подробное описание контента карточки.</Text>
    </Stack>
  </CardBody>
</Card>

Адаптивность

Карточки Chakra UI легко делают адаптивными с помощью пропсов responsive:

<Card maxW={["100%", "sm", "md"]} p={[2, 4, 6]}>
  <CardBody>
    <Text>Адаптивная карточка, ширина которой меняется в зависимости от экрана.</Text>
  </CardBody>
</Card>

Карточки с интерактивными элементами

Можно добавлять кнопки, ссылки и ховеры:

<Card
  maxW="sm"
  borderWidth="1px"
  borderRadius="lg"
  overflow="hidden"
  _hover={{ boxShadow: "lg" }}
>
  <CardBody>
    <Text>Наведение мыши меняет тень карточки.</Text>
  </CardBody>
  <CardFooter>
    <Button colorScheme="teal" size="sm">Подробнее</Button>
  </CardFooter>
</Card>

Использование темы для Card

Chakra UI позволяет управлять Card через extendTheme, задавая глобальные стили:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Card: {
      baseStyle: {
        borderRadius: "xl",
        boxShadow: "md",
        bg: "white",
      },
      sizes: {
        sm: { maxW: "sm" },
        md: { maxW: "md" },
      },
      variants: {
        outline: { borderWidth: "1px", borderColor: "gray.200" },
        solid: { bg: "blue.50" },
      },
    },
  },
});

Использование Card в списках и сетках

Карточки часто комбинируются с компонентами SimpleGrid или Grid:

import { SimpleGrid } from "@chakra-ui/react";

<SimpleGrid columns={[1, 2, 3]} spacing={6}>
  <Card>Карточка 1</Card>
  <Card>Карточка 2</Card>
  <Card>Карточка 3</Card>
</SimpleGrid>

Резюме возможностей Card

  • Встроенные компоненты: Header, Body, Footer.
  • Полная кастомизация через пропсы и тему.
  • Адаптивность с массивными значениями пропсов.
  • Простое добавление интерактивности и стилей при наведении.
  • Возможность вложения изображений, стэков и других компонентов.
  • Лёгкая интеграция в сетки и списки.

Карточки в Chakra UI создают структурированный, визуально аккуратный интерфейс с минимальными усилиями и полностью соответствуют принципам модульного и адаптивного дизайна.

Оглавление