daisyUI 5 Card 组件完全指南：类名体系、源码原理与实战用法

daisyUI 5 Card 组件完全指南类名体系、源码原理与实战用法【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuidaisyUI 5 是面向 Tailwind CSS 4 的组件库其中 Card卡片是最常用的内容容器组件用于把图片、标题、正文与操作按钮分组展示。本文以仓库内 Card 组件速查文档 为主体结合 组件源码 与 daisyUI 5 使用规则完整讲解 Card 的类名体系、语法结构、修饰器与尺寸、图片布局原理及组件级 CSS 变量定制方法读完即可在项目中直接组合出可复用的卡片。Card 是什么在 daisyUI 中Card 是一个将内容分组并呈现为独立容器的 UI 组件典型场景包括商品展示、文章摘要、用户资料、操作面板等。它不需要任何 JavaScript完全由 CSS 类名驱动遵循 daisyUI 5 统一的component part modifier size类名组织方式参见 daisyUI 5 使用规则 中的类名分类说明。从源码看.card的基础样式见 card.css只做了三件核心事rounded-box圆角、relative定位和纵向弹性布局flex flex-col其余视觉均由子结构类和修饰器完成。类名体系全览速查文档将 Card 的类名划分为五类完整继承如下类别类名作用componentcard组件基础类必须添加在卡片根元素上partcard-title卡片标题位于.card-body内partcard-body卡片正文内容区partcard-actions卡片底部操作区stylecard-border给卡片添加实线边框stylecard-dash给卡片添加虚线边框modifiercard-side水平布局图片与内容左右并排modifierimage-full图片铺满整卡作为背景sizecard-xs/card-sm/card-md/card-lg/card-xl五种预设尺寸这些类名并非随意命名其样式全部定义在 card.css 中且按 daisyUI 的 CSS 分层layer daisyui.l1.l2...组织保证组件样式可以被 Tailwind 工具类按需覆盖。基础语法与结构规则速查文档给出的标准语法模板如下div classcard {MODIFIER} figureimg src{image-url} alt{alt-text} //figure div classcard-body h2 classcard-title{title}/h2 p{CONTENT}/p div classcard-actions{actions}/div /div /div速查文档对使用规则有明确约束逐条展开如下{MODIFIER}是可选占位可包含一个修饰器类名和一个尺寸类名例如card image-full、card card-side card-lg但不能同时混用多个修饰器。figure与div classcard-body均可选只放.card-body或只放图片都能正常工作省略.card-body时.card-title、.card-actions等 part 类也随之不适用。响应式布局使用sm:card-side即只在sm断点及以上启用水平布局小屏保持默认的纵向堆叠这是 Tailwind 变体前缀variant:utility-class在组件上的标准用法规则见 daisyUI 5 使用规则。图片位置规则若图片放在.card-body之后则图片显示在卡片底部此时源码会让figure:last-child继承卡片底部圆角见下文图片与圆角。一个完整的纵向卡片示例默认尺寸div classcard bg-base-100 w-96 shadow-xl figure img srchttps://picsum.photos/200/300 alt示例图片 / /figure div classcard-body h2 classcard-title卡片标题/h2 p这里是卡片正文内容用于承载描述性文字。/p div classcard-actions justify-end button classbtn btn-primary购买/button button classbtn收藏/button /div /div /div说明示例图片地址沿用了 daisyUI 5 使用规则 中推荐的占位图约定https://picsum.photos/200/300bg-base-100、w-96、shadow-xl、justify-end均为 Tailwind 工具类daisyUI 允许在组件类之上叠加工具类做微调。三个 part 的职责与源码细节card-body内容区.card-body定义在 card.css内部使用flex flex-auto flex-col gap-2保证正文在纵向铺满剩余空间子元素间距统一为gap-20.5rem默认内边距padding: var(--card-p, 1.5rem)默认字号font-size: var(--card-fs, 0.875rem)。其中p段落被设为grow即正文会自动扩展以撑满高度把.card-actions推向底部——这是卡片底部操作区总能贴底排列的实现基础。card-title标题.card-title定义在 card.cssflex items-center gap-2让标题可以与徽章、图标等内联元素水平对齐默认字号var(--cardtitle-fs, 1.125rem)、字重 600。三个 CSS 变量的默认值总结如下CSS 变量默认值作用--card-p1.5rem.card-body内边距--card-fs0.875rem.card-body正文字号--cardtitle-fs1.125rem.card-title标题字号card-actions操作区.card-actions定义在 card.cssflex flex-wrap items-start gap-2操作按钮会自动换行且间距统一配合上文的p { grow }实现内容占满、操作贴底的经典卡片布局。图片与圆角继承figure的圆角由源码自动处理card.css当图片是第一个子元素时继承卡片左上、右上圆角当图片是最后一个子元素时继承左下、右下圆角图片位于中间时不继承圆角。figure本身是flex items-center justify-center的居中容器。这意味着无论图片放在顶部还是底部都不会戳出卡片的圆角边界你无需手动为图片加rounded-t-*之类的类名。修饰器深入border、dash 与 image-fullcard-border 与 card-dash两者均定义在 card.csscard-borderborder: var(--border) solid var(--color-base-200)实线边框card-dashborder: var(--border) dashed var(--color-base-200)虚线边框。其中边框宽度--border由主题变量提供——仓库内全部主题如 light.css、dark.css 等均定义--border绝大多数主题为1px个别主题如 caramellatte.css 为2px。边框颜色则取当前主题的base-200语义色因此边框会自动跟随主题切换。image-full图片铺满整卡image-full定义在 card.css实现方式是经典的网格叠放.card变为grid所有直接子元素都放进同一格col-start-1 row-start-1图片和.card-body上下堆叠图片设置h-full object-cover铺满并裁剪同时施加filter: brightness(28%)压暗.card-body则置于顶层并套用text-neutral-content文字色。最终效果是背景图铺满整卡、文字清晰可读地浮在压暗图层上。div classcard image-full w-96 shadow-xl figure img srchttps://picsum.photos/200/300 alt背景图 / /figure div classcard-body h2 classcard-title大标题/h2 p文字显示在压暗后的图片背景之上。/p div classcard-actions justify-end button classbtn btn-primary行动按钮/button /div /div /div尺寸体系从 card-xs 到 card-xl速查文档列出五种尺寸类。从源码card.css可精确还原每种尺寸对应的三个变量取值尺寸类--card-p正文内边距--card-fs正文字号--cardtitle-fs标题字号card-xs0.5rem0.6875rem0.875remcard-sm1rem0.75rem1remcard-md1.5rem默认0.875rem默认1.125rem默认card-lg2rem1rem1.25remcard-xl2.5rem1.125rem1.375remcard-md即默认尺寸其取值与 CSS 变量默认值完全一致所以显式写card-md与不写尺寸类效果相同。按速查规则一个卡片最多只能叠加一个尺寸类例如card card-sm。card-side水平布局与响应式card-side定义在 card.css将卡片改为flex-direction: row水平排列图片子元素拉伸为width: 100%; height: 100%; object-fit: cover并按左右位置继承对应圆角图片在左继承左上、左下圆角在右继承右上、右下圆角。div classcard card-side bg-base-100 shadow-xl figure classw-1/2 img srchttps://picsum.photos/200/300 alt左侧图 / /figure div classcard-body h2 classcard-title水平卡片/h2 p图片在左内容在右。/p div classcard-actions justify-end button classbtn btn-primary查看/button /div /div /div移动端优先的推荐做法是默认纵向、sm:断点起转水平div classcard card-side sm:card-side的写法在速查文档中明确不推荐——正确写法是默认不带card-side仅在需要时写sm:card-side让卡片在小屏纵向堆叠、大屏左右并排。可交互卡片源码推断能力从 card.css 的源码结构可以推断.card内置了对可选中checkbox/radio与键盘聚焦的支持:focus-visible、[aria-checkedtrue]、包含被选中 checkbox/radio 的卡片会显示currentColor轮廓outline: 2px solid #0000配合outline-offset: 2px聚焦态下轮廓加粗到 4px卡片内含 checkbox/radio 时自动变为cursor-pointer并隐藏原生控件appearance-none。因此把 checkbox 或 radio 放入卡片内即可实现点卡片即选中的交互效果无需额外脚本。这是文档未明写、但从源码可以确认的能力使用时请以当前版本行为为准。组件级定制与 Tailwind 结合用 CSS 变量调整密度前面表格中的--card-p、--card-fs、--cardtitle-fs是组件暴露的定制入口无需修改源码可在自己的 CSS 中按需覆盖例如.card-compact { --card-p: 1rem; }用 Tailwind 工具类微调按 daisyUI 5 使用规则在组件类之外可直接叠加工具类如card w-96 shadow-xl若因 CSS 优先级无法覆盖 daisyUI 样式可在工具类末尾加!如card bg-red-500!强制覆盖仅在其他手段无效时使用。尺寸与圆角变量卡片圆角来自主题的rounded-box即var(--radius-box)见 variables.js随主题整体变化无需单独设置。小结Card 组件的完整用法可以归纳为根元素加card内容放入.card-body内部用.card-title、.card-actions组织标题与操作按需叠加一个修饰器card-side/image-full与一个尺寸类card-xs~card-xl需要边框时再加card-border或card-dash。所有类名的行为都有 card.css 源码与 速查文档 对应组合规则清晰、可预测是构建内容型界面的可靠基础。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考