stdf/docs/mds/components/card/guide.md

基础用法

Card 组件是一个通用的容器组件，用于将内容组织在一个具有圆角、阴影和边框的卡片容器中。将需要展示的内容作为默认 Snippet 传入即可。

背景类型

Card 组件提供了三种背景类型：

• surface：表面背景（默认），亮色模式为白色，暗黑模式为深灰色
• gray：灰色透明背景，与页面背景形成轻微区分
• theme：主题色透明背景，带有轻微的主题色

如果需要更多自定义背景，可以通过 injClass 属性注入自定义 CSS 类名。

预设区域

Card 组件提供了三个预设区域：

• header：头部区域，通常用于展示标题、操作按钮等
• children：主体内容区域，用于展示卡片的主要内容
• footer：底部区域，通常用于展示操作按钮、统计信息等

这三个区域都是可选的，可以根据实际需求灵活组合使用。

分隔线

默认情况下，头部与主体内容之间、主体内容与底部之间会显示分隔线。可以通过 headerLine 和 footerLine 属性来控制是否显示分隔线。

圆角配置

通过 radius 属性可以配置卡片的圆角大小，支持从 none（无圆角）到 full（完全圆角）的多种选项。

阴影配置

通过 shadow 属性可以配置卡片的阴影效果，支持从 none（无阴影）到 2xl（特大阴影）的多种选项。阴影在暗黑模式下会自动调整为适配的样式。

内边距配置

• 使用 p 属性可以统一设置主体内容区域四个方向的内边距
• 使用 px 和 py 属性可以分别设置水平和垂直方向的内边距
• 当设置了 px 或 py 时，p 属性将不生效

边框配置

• 使用 border 属性配置边框风格：solid（实线）、dashed（虚线）、dotted（点线）
• 使用 borderWidth 属性配置边框粗细
• 当 border 为 none 时，边框相关配置不生效

可点击卡片

当传入 onclick 事件处理函数时，卡片会渲染为 button 元素，具有可点击的交互效果。

CSS 注入

Card 组件提供了多个 CSS 注入属性，可以向不同区域注入自定义样式：

• injClass：注入卡片容器的样式
• headerClass：注入头部区域的样式
• bodyClass：注入主体内容区域的样式
• footerClass：注入底部区域的样式

若注入的 class 没生效，请在注入的 class 名称前添加 !，可参考 Tailwind Important modifier。