Card 卡片

Card 卡片

何时使用

  • 需要将内容组织为卡片容器时。

基础用法

卡片标题

卡片描述文字,用于补充说明。

这里是卡片内容区域,可以放置任意内容。

<template>
  <Card class="max-w-sm">
    <CardHeader>
      <CardTitle>卡片标题</CardTitle>
      <CardDescription>卡片描述文字,用于补充说明。</CardDescription>
    </CardHeader>
    <CardContent>
      <p>这里是卡片内容区域。</p>
    </CardContent>
    <CardFooter class="gap-2">
      <Button size="sm">确认</Button>
      <Button size="sm" variant="outline">取消</Button>
    </CardFooter>
  </Card>
</template>

导入

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardMeta,
  CardGroup,
} from "@reglow/reui";

组成

组件说明
Card容器
CardHeader / CardTitle / CardDescription头部结构
CardContent内容区
CardFooter底部操作区
CardMeta / CardGroup元信息卡片 / 卡片组