卡片

import { Button } from "@/components/ui/button"
import {
  Card,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add card
Copy

用法

🌐 Usage

Copyimport {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

Copy<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

示例

🌐 Examples

大小

🌐 Size

使用 size="sm" 属性将卡片的大小设置为小。小尺寸版本使用更小的间距。

🌐 Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

import { Button } from "@/components/ui/button"
import {
  Card,

图片

🌐 Image

在卡片标题前添加一张图片以创建带图片的卡片。

🌐 Add an image before the card header to create a card with an image.

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

View Event

Copy

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {

View Code

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

卡片

🌐 Card

Card 组件是卡片内容的根容器。

🌐 The Card component is the root container for card content.

CardHeader

CardHeader 组件用于显示标题、描述和可选操作。

🌐 The CardHeader component is used for a title, description, and optional action.

CardTitle

CardTitle 组件用于卡片标题。

🌐 The CardTitle component is used for the card title.

CardDescription

CardDescription 组件用于标题下的辅助文本。

🌐 The CardDescription component is used for helper text under the title.

CardAction

CardAction 组件将内容放置在头部的右上角（例如，一个按钮或徽章）。

🌐 The CardAction component places content in the top-right of the header (for example, a button or a badge).

CardContent

CardContent 组件用于主卡片主体。

🌐 The CardContent component is used for the main card body.

CardFooter

CardFooter 组件用于卡片底部的操作和次要内容。

🌐 The CardFooter component is used for actions and secondary content at the bottom of the card.