shadcn-vue Card 组件完全指南：从安装到源码级结构解析

shadcn-vue Card 组件完全指南从安装到源码级结构解析【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue导读Card卡片是 shadcn-vue 中最常用的布局容器组件之一用于将标题、描述、内容与操作区组织成一个结构清晰、视觉层次分明的信息面板。本指南以 Card 官方文档 为骨架完整覆盖 CLI 安装、手动接入、组合式使用方式并结合仓库内 new-york-v4 风格的 Card 源码逐文件剖析七个子组件的类名与结构职责帮助你既能快速上手也能按需定制。组件能力一览Card 组件整体由一个容器与六个可选子组件构成全部位于仓库apps/v4/registry/new-york-v4/ui/card/目录下并通过 index.ts 统一导出组件默认渲染标签主要职责Carddiv卡片外层容器提供背景、边框、圆角与布局CardHeaderdiv头部区域承载标题、描述与右上角操作CardTitleh3卡片标题CardDescriptionp卡片描述文字次要文本CardActiondiv头部右侧操作区与标题、描述并排布局CardContentdiv卡片主体内容区CardFooterdiv底部操作区如按钮组除容器Card外所有子组件均可独立使用也可按需省略比如只使用CardContent承载纯内容。安装方式一CLI 一键安装推荐在项目根目录执行以下命令即可将 Card 组件及其全部子组件写入src/components/ui/cardnpx shadcn-vuelatest add cardCLI 会自动完成依赖解析、路径配置与组件文件生成适用于绝大多数使用 shadcn-vue CLI 的项目。安装完成后可从/components/ui/card直接导入指向你的src或app目录以项目 tsconfig 配置为准。方式二手动复制源码如果不使用 CLI也可以直接从仓库复制源码将 apps/v4/registry/new-york-v4/ui/card/ 目录下的 7 个文件Card.vue、CardHeader.vue、CardTitle.vue、CardDescription.vue、CardAction.vue、CardContent.vue、CardFooter.vue、index.ts复制到你项目的src/components/ui/card/下。检查并更新文件内的导入路径所有组件都依赖/lib/utils中的cn工具函数用于合并 Tailwind 类名请确保你的项目中存在 lib/utils.ts 或等价实现且别名解析正确。如果你的项目没有使用 new-york 风格仓库 apps/v4/registry/bases/ 下还提供了 reka 等基础风格变体可对比选择。提示Card 组件本体不依赖任何第三方运行时库无 Radix/reka-ui 依赖仅依赖 Tailwind CSS 与cn工具函数因此手动接入成本很低。基础用法在 Vue SFC 中组合使用全部子组件script setup langts import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from /components/ui/card /script template Card CardHeader CardTitleCard Title/CardTitle CardDescriptionCard Description/CardDescription /CardHeader CardContent pCard Content/p /CardContent CardFooter pCard Footer/p /CardFooter /Card /template结构语义非常直观CardHeader内放标题与描述CardContent放正文CardFooter放底部操作。你也可以自由调整嵌套顺序与层级组件之间没有强制的依赖关系。官方示例登录表单卡片仓库中的 CardDemo.vue 演示了一个完整的「带表单的卡片」展示了 Card 与 Button、Input、Label 组合的典型用法Card classw-full max-w-sm CardHeader CardTitleLogin to your account/CardTitle CardDescription Enter your email below to login to your account /CardDescription CardAction Button variantlinkSign Up/Button /CardAction /CardHeader CardContent form !-- Email / Password 输入项 -- /form /CardContent CardFooter classflex flex-col gap-2 Button classw-fullLogin/Button Button variantoutline classw-fullLogin with Google/Button /CardFooter /Card关键点通过classprop 叠加自定义样式如max-w-sm控制宽度、flex-col gap-2控制页脚布局所有子组件都支持class透传CardAction放置在头部时会自动排布在标题/描述的右侧适合放置「Sign Up」「更多」之类的辅助操作页脚通常放置主次按钮配合Button的variant属性即可快速构建操作入口。源码级结构解析以下逐文件解析 ui/card 的类名设计便于你理解布局原理并按需覆盖样式。Card外层容器Card.vue 渲染为div携带data-slotcard默认类名为bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-smbg-card/text-card-foreground使用 Tailwind 主题色 token跟随你的主题变量支持暗色模式自动切换flex flex-col gap-6垂直布局子元素间 24px 间距gap-6rounded-xl border py-6 shadow-sm圆角、描边、内边距与轻阴影构成卡片基础视觉。CardHeader头部区域CardHeader.vue 渲染div使用 CSS Grid 布局标题、描述与操作区container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slotcard-action]:grid-cols-[1fr_auto] [.border-b]:pb-6container/card-header声明容器查询container query单位支持以头部宽度为基准的响应式布局当内部存在CardAction通过has-data-[slotcard-action]检测data-slot属性时网格变为两列1fr auto标题/描述占主列操作占右侧列。CardTitle 与 CardDescription标题与描述CardTitle.vue 渲染为h3 contenteditable="false">【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考