前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载FaCard 是 Fantastic Admin 基础组件库packages/components/src/basic/card中提供的基础卡片容器组件用于承载标题、描述、内容与页脚等区块是信息展示、表单容器、数据统计、列表项与对话框内容区的通用基础单元。本文围绕 FaCard 官方文档 展开结合组件源码与仓库内示例完整讲解其 Props、Slots、内部结构与样式定制方式帮助你在实际页面中快速落地可复用的卡片布局。使用场景FaCard 是页面中最常见的区块容器根据文档定位与源码结构它主要覆盖以下五类业务场景信息展示卡片展示用户资料、订单摘要、通知详情等只读信息表单容器将表单项包裹在卡片中形成分组清晰的录入区域数据统计卡片在仪表盘/工作台页面承载统计数字与趋势说明列表项容器作为列表条目的外层容器统一条目的间距与边框对话框内容区在弹窗中组织标题、正文与底部操作按钮。组件注册名为BuiltInCard并在组件库出口 packages/components/src/index.ts 中以export { Card as FaCard }的方式对外导出因此在实际页面中你既可以直接使用FaCard也可以使用Card名称框架的自动导入机制会处理注册无需手动引入见_examples中组件实际使用时无需手动导入框架会自动导入的注释说明。Props 完整说明FaCard 通过defineProps声明了 6 个属性见 index.vue下表来自文档并补充了源码层面的说明属性类型默认值说明titlestring-卡片标题渲染在头部区域descriptionstring-卡片描述渲染在标题下方classHTMLAttributes[class]-卡片容器 CSS 类headerClassHTMLAttributes[class]-卡片头部 CSS 类contentClassHTMLAttributes[class]-卡片内容 CSS 类footerClassHTMLAttributes[class]-卡片页脚 CSS 类需要说明的是class属性会透传给最外层Card容器headerClass、contentClass、footerClass则分别作用于对应区域它们都接收 Vue 的HTMLAttributes[class]类型既可以传字符串也可以传数组或对象形式的 class 绑定。四个 class 属性最终都会通过工具函数cn与内置样式合并cn(..., props.class)因此自定义类具有覆盖内置样式的合并能力。Props 的渲染行为从 index.vue 的实现可以看出各属性与区域的对应关系头部区域CardHeader在slots.header || title || description三者任一存在时渲染当只传title时渲染CardTitle只传description时渲染CardDescription内容区域CardContent仅在存在defaultslot 时渲染这意味着只有提供对应内容的区域才会显示页脚区域CardFooter仅在存在footerslot 时渲染。这种条件渲染保证了空卡片不会出现多余的空白区块是区域显示规则README 注意事项第 1 条的源码依据。Slots 与 slot 优先级FaCard 声明了三个 slot见 index.vue名称说明header卡片头部会覆盖title和descriptiondefault卡片内容footer卡片页脚slot 优先规则模板中头部区域的渲染逻辑为slot nameheader包裹CardTitle/CardDescription的默认内容。当提供了headerslot 时插槽内容会整体替换掉title与description的渲染结果二者不再显示只有未提供headerslot 时title/description属性才会被渲染为标题和描述文本README 注意事项第 2 条。仓库示例_slot.vue中的文案header slot 会覆盖 title 和 description即是对该规则的直接印证。内部结构三区段 可组合子组件README 注意事项第 3 条指出卡片由 CardHeader、CardContent、CardFooter 三部分组成对应的底层子组件位于 card/card 目录子组件文件渲染元素默认样式要点CardCard.vuedivbg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm即卡片底色、纵向 flex 布局、圆角边框与轻阴影CardHeaderCardHeader.vuediv使用 CSS 容器查询container/card-header实现自适应栅格头部CardTitleCardTitle.vueh3无衬线粗体标题font-semibold leading-noneCardDescriptionCardDescription.vuep次要文字色、小字号text-muted-foreground text-smCardContentCardContent.vuediv内容留白px-6CardFooterCardFooter.vuedivflex 布局、左右留白px-6CardActionCardAction.vuediv定位于头部右上角的操作区如更多按钮与 CardHeader 的栅格列配合使用这些子组件在 card/card/index.ts 中统一导出因此你可以在需要精细控制的场景下跳过 FaCard 聚合层直接用CardHeader/CardContent/CardFooter等原子组件自行组装。例如把CardAction放进CardHeader时头部会借助has-data-[slotcard-action]:grid-cols-[1fr_auto]自动切换为内容 右侧操作的双列栅格布局。完整代码示例仓库_examples目录提供了四个可直接运行的示例覆盖 FaCard 的主要用法。1. 基础用法标题 内容template FaCard title卡片标题 classw-80 卡片内容 /FaCard /template对应示例文件 _basic.vue。不传任何 header 内容时头部区域整体不渲染只显示内容区。2. 标题 描述template FaCard title卡片标题 description这是一段辅助描述用于补充说明卡片内容。 classw-80 卡片内容 /FaCard /template对应示例文件 _description.vue描述文本以CardDescription渲染在标题下方。3. 完全自定义头部与页脚slot 用法template FaCard classw-96 template #header div classflex gap-4 items-center justify-between div div classtext-base font-semibold 自定义头部 /div div classtext-sm text-muted-foreground header slot 会覆盖 title 和 description /div /div FaIcon namei-lucide:badge-check classtext-primary size-5 / /div /template 卡片内容区域 template #footer div classflex gap-2 w-full justify-end FaButton variantoutline 取消 /FaButton FaButton 确定 /FaButton /div /template /FaCard /template对应示例文件 _slot.vue演示了头部图标 文本组合以及页脚右对齐的操作按钮组常用于对话框确认区。4. 四类 class 全面定制样式template FaCard title自定义样式 description通过 class、headerClass、contentClass 和 footerClass 调整区域样式。 classpy-0 gap-0 w-96 overflow-hidden header-classbg-primary/8 py-4 content-classpy-6 text-sm leading-6 footer-classbg-muted text-sm text-muted-foreground py-3 这里是自定义内容区域可以根据业务场景调整间距、背景和边框。 template #footer 自定义页脚区域 /template /FaCard /template对应示例文件 _custom-style.vue。由于cn合并逻辑的存在自定义类与内置类按顺序拼接Tailwind CSS 类名可以通过覆盖同属性如py-0覆盖默认的py-6实现精细化调整示例还展示了结合bg-primary/8、bg-muted等语义色快速区分头部、内容与页脚背景的典型做法。响应式与宽度控制README 注意事项第 4 条说明卡片宽度自适应父容器可通过class设置固定宽度。源码层面Card.vue未声明任何 width 样式卡片作为块级 flex 容器默认撑满父容器宽度需要固定宽度时直接在class传入 Tailwind 尺寸类即可例如示例中的w-80、w-96也可以传max-w-md等最大宽度类实现响应式收缩。注意事项总结区域显示只有提供对应内容props 或 slots的区域才会显示——header依赖 title/description/header slotcontent依赖 default slotfooter依赖 footer slot对应 index.vue 的条件渲染slot 优先提供headerslot 后会覆盖title和descriptionprops结构组成卡片由 CardHeader、CardContent、CardFooter 三部分组成并可通过 card/card/index.ts 导出的原子组件自由组合CardAction提供头部右上角操作位响应式卡片宽度自适应父容器可通过class设置固定宽度如w-80或结合容器查询实现自适应头部布局。在项目中快速上手在 Fantastic Admin 任一应用如apps/core或apps/example的页面中直接书写FaCard标签即可使用组件由框架自动导入无需手动 import。推荐按以下步骤落地先用最简形式FaCard title...内容/FaCard搭建结构需要补充说明时加上description头部需要图标、按钮等复杂内容时改用#headerslot底部需要操作区时补充#footerslot并搭配FaButton形成操作按钮组最后通过class/headerClass/contentClass/footerClass做视觉微调示例可参考 _examples 目录。至此你可以用 FaCard 快速构建信息卡片、表单容器、统计卡片、列表项与对话框内容区并与组件库中的FaButton、FaIcon等基础组件组合形成风格统一、可维护的页面布局。赞分享前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载相关推荐如何使用NativeWind布局组件库构建高效React Native界面如何使用NativeWind布局组件库构建高效React Native界面 NativeWind是一个基于Tailwind CSS的React Native通用移动开发跨平台前端BootstrapVue Card 组件完全指南从基础布局到组合式卡片构建BootstrapVue Card 组件完全指南从基础布局到组合式卡片构建 Card 是 BootstrapVue 中最为灵活、可扩展的内容容器组件。它提供了前端UI组件Ant Design Vue Card 卡片组件完全指南从基础容器到页签与网格布局Ant Design Vue Card 卡片组件完全指南从基础容器到页签与网格布局 导读 Card卡片是 ant design vue 中最基础也最常用的前端UI组件设计系统上一篇彻底解决Dockur Windows容器安全删除指南3步避免数据残留与性能隐患下一篇MinIO前端图片加载的CORS问题解析与解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
