Card 卡片

组件

用于展示与单个主题相关的内容。

用法

首先从 @chakra-ui/react 导入组件。

import { Card } from "@chakra-ui/react"

Card 由 Root、Header、Body 和 Footer 组成：

<Card.Root>
  <Card.Header />
  <Card.Body />
  <Card.Footer />
</Card.Root>

Nue Camp

This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.

示例

变体（Variants）

使用 variant prop 来更改 Card 的视觉样式。

Nue Camp

This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nue Camp

This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nue Camp

This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

import { Avatar, Button, Card, For, Stack } from "@chakra-ui/react"

export const CardWithVariants = () => {
  return (
    <Stack gap="4" direction="row" wrap="wrap">
      <For each={["subtle", "outline", "elevated"]}>
        {(variant) => (
          <Card.Root width="320px" variant={variant} key={variant}>
            <Card.Body gap="2">
              <Avatar.Root size="lg" shape="rounded">
                <Avatar.Image src="https://picsum.photos/200/300" />
                <Avatar.Fallback name="Nue Camp" />
              </Avatar.Root>
              <Card.Title mb="2">Nue Camp</Card.Title>
              <Card.Description>
                This is the card body. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.
              </Card.Description>
            </Card.Body>
            <Card.Footer justifyContent="flex-end">
              <Button variant="outline">View</Button>
              <Button>Join</Button>
            </Card.Footer>
          </Card.Root>
        )}
      </For>
    </Stack>
  )
}

在表单中使用

在表单内使用 Card 组件，将相关的字段归组在一起。

First Name

Last Name

import { Button, Card, Field, Input, Stack } from "@chakra-ui/react"

export const CardWithForm = () => (
  <Card.Root maxW="sm">
    <Card.Header>
      <Card.Title>Sign up</Card.Title>
      <Card.Description>
        Fill in the form below to create an account
      </Card.Description>
    </Card.Header>
    <Card.Body>
      <Stack gap="4" w="full">
        <Field.Root>
          <Field.Label>First Name</Field.Label>
          <Input />
        </Field.Root>
        <Field.Root>
          <Field.Label>Last Name</Field.Label>
          <Input />
        </Field.Root>
      </Stack>
    </Card.Body>
    <Card.Footer justifyContent="flex-end">
      <Button variant="outline">Cancel</Button>
      <Button variant="solid">Sign in</Button>
    </Card.Footer>
  </Card.Root>
)

尺寸（Sizes）

使用 size prop 来更改 Card 的尺寸。

This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

import { Card, Heading, Stack } from "@chakra-ui/react"

export const CardWithSizes = () => {
  return (
    <Stack>
      <Card.Root size="sm">
        <Card.Header>
          <Heading size="md"> Card - sm</Heading>
        </Card.Header>
        <Card.Body color="fg.muted">
          This is the card body. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit.
        </Card.Body>
      </Card.Root>

      <Card.Root size="md">
        <Card.Header>
          <Heading size="md"> Card - md</Heading>
        </Card.Header>
        <Card.Body color="fg.muted">
          This is the card body. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit.
        </Card.Body>
      </Card.Root>

      <Card.Root size="lg">
        <Card.Header>
          <Heading size="md"> Card - lg</Heading>
        </Card.Header>
        <Card.Body color="fg.muted">
          This is the card body. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit.
        </Card.Body>
      </Card.Root>
    </Stack>
  )
}

带图片（With Image）

使用 Card 组件来展示一张图片。

Living room Sofa

This sofa is perfect for modern tropical spaces, baroque inspired spaces.

$450

import { Button, Card, Image, Text } from "@chakra-ui/react"

export const CardWithImage = () => {
  return (
    <Card.Root maxW="sm" overflow="hidden">
      <Image
        src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
        alt="Green double couch with wooden legs"
      />
      <Card.Body gap="2">
        <Card.Title>Living room Sofa</Card.Title>
        <Card.Description>
          This sofa is perfect for modern tropical spaces, baroque inspired
          spaces.
        </Card.Description>
        <Text textStyle="2xl" fontWeight="medium" letterSpacing="tight" mt="2">
          $450
        </Text>
      </Card.Body>
      <Card.Footer gap="2">
        <Button variant="solid">Buy now</Button>
        <Button variant="ghost">Add to cart</Button>
      </Card.Footer>
    </Card.Root>
  )
}

水平布局（Horizontal）

使用 Card 组件水平地展示内容。

The perfect latte

Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk.

HotCaffeine

import { Badge, Box, Button, Card, HStack, Image } from "@chakra-ui/react"

export const CardHorizontal = () => (
  <Card.Root flexDirection="row" overflow="hidden" maxW="xl">
    <Image
      objectFit="cover"
      maxW="200px"
      src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
      alt="Caffe Latte"
    />
    <Box>
      <Card.Body>
        <Card.Title mb="2">The perfect latte</Card.Title>
        <Card.Description>
          Caffè latte is a coffee beverage of Italian origin made with espresso
          and steamed milk.
        </Card.Description>
        <HStack mt="4">
          <Badge>Hot</Badge>
          <Badge>Caffeine</Badge>
        </HStack>
      </Card.Body>
      <Card.Footer>
        <Button>Buy Latte</Button>
      </Card.Footer>
    </Box>
  </Card.Root>
)

带头像（With Avatar）

使用 Card 组件来展示一个头像。

Nate Foss

@natefoss

Nate Foss has requested to join your team. You can approve or decline their request.

import {
  Avatar,
  Button,
  Card,
  HStack,
  Stack,
  Strong,
  Text,
} from "@chakra-ui/react"
import { LuCheck, LuX } from "react-icons/lu"

export const CardWithAvatar = () => {
  return (
    <Card.Root width="320px">
      <Card.Body>
        <HStack mb="6" gap="3">
          <Avatar.Root>
            <Avatar.Image src="https://images.unsplash.com/photo-1511806754518-53bada35f930" />
            <Avatar.Fallback name="Nate Foss" />
          </Avatar.Root>
          <Stack gap="0">
            <Text fontWeight="semibold" textStyle="sm">
              Nate Foss
            </Text>
            <Text color="fg.muted" textStyle="sm">
              @natefoss
            </Text>
          </Stack>
        </HStack>
        <Card.Description>
          <Strong color="fg">Nate Foss </Strong>
          has requested to join your team. You can approve or decline their
          request.
        </Card.Description>
      </Card.Body>
      <Card.Footer>
        <Button variant="subtle" colorPalette="red" flex="1">
          <LuX />
          Decline
        </Button>
        <Button variant="subtle" colorPalette="blue" flex="1">
          <LuCheck />
          Approve
        </Button>
      </Card.Footer>
    </Card.Root>
  )
}

自定义

添加新的变体

创建自定义 Card recipe 来添加新的样式变体：

import { defineSlotRecipe } from "@chakra-ui/react"
import { cardAnatomy } from "@chakra-ui/react/anatomy"

const customCardRecipe = defineSlotRecipe({
  className: "chakra-card",
  slots: cardAnatomy.keys(),
  variants: {
    // 添加新的 variant="ghost"
    variant: {
      gradient: {
        root: {
          bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
          color: "white",
        },
      },
    },
  },
})

添加新的尺寸

为 Card recipe 添加自定义尺寸变体：

const customCardRecipe = defineSlotRecipe({
  // ...
  variants: {
    size: {
      // ... 已有的尺寸（sm、md、lg）
      xl: {
        root: { "--card-padding": "spacing.10" },
        title: { textStyle: "2xl" },
      },
    },
  },
})

更改默认值

为 size 和 variant 设置新的默认值：

const customCardRecipe = defineSlotRecipe({
  // ...
  defaultVariants: {
    variant: "elevated", // 默认使用 elevated 而不是 outline
    size: "lg", // 默认使用 lg 而不是 md
  },
})

更新主题

将自定义 recipe 添加到你的主题中：

const config = defineConfig({
  theme: {
    slotRecipes: {
      card: customCardRecipe,
    },
  },
})

const system = createSystem(defaultConfig, config)

export function Provider(props: { children: React.ReactNode }) {
  return <ChakraProvider value={system}>{/* ... */}</ChakraProvider>
}

你可以查看默认 Card recipe 作为参考。

Props

Root

Prop	默认值	类型	说明
size	'md'	'sm' \| 'md' \| 'lg'	组件的尺寸。
variant	'outline'	'elevated' \| 'outline' \| 'subtle'	组件的变体。
as	—	React.ElementType	要渲染的底层元素。
asChild	—	boolean	使用提供的子元素作为默认渲染元素，合并它们的 props 与行为。更多详情参见我们的组合指南。
unstyled	—	boolean	是否移除组件的样式。

Input 输入框

Dialog 对话框