api.md 3.6 KB

Card Props

名称 类型 默认值 必传 说明
bg 'surface'\|'gray'\|'theme' 'surface' N 背景类型:纯色/灰色透明/主题色透明。
radius 'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'4xl'\|'' '' N 圆角大小,默认使用 CSS 变量 --radius-box
shadow 'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl' 'sm' N 阴影大小。
border 'none'\|'solid'\|'dashed'\|'dotted' 'none' N 边框风格。
borderWidth '0'\|'1'\|'2'\|'4' '1' N 边框粗细(border 不为 none 时生效)。
mx '0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8' '2' N 左右外边距。
my '0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8' '2' N 上下外边距。
p '0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8' '4' N 内容区内边距(px 和 py 都未设置时生效)。
px '0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8' - N 内容区左右内边距(设置后 p 失效)。
py '0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8' - N 内容区上下内边距(设置后 p 失效)。
overflow boolean true N 是否溢出隐藏(保持圆角裁剪效果)。
headerLine boolean true N 头部与内容之间是否显示分隔线。
footerLine boolean true N 内容与底部之间是否显示分隔线。
injClass string '' N 注入卡片容器的 CSS 名称,可自定义背景等。
headerClass string '' N 注入头部区域的 CSS 名称。
bodyClass string '' N 注入内容区域的 CSS 名称。
footerClass string '' N 注入底部区域的 CSS 名称。

Card Events

名称 类型 参数 描述
onclick () => void - 点击卡片时触发。

Card Snippets

名称 类型 参数 说明
header Snippet - 卡片头部内容。
children Snippet - 卡片主体内容。
footer Snippet - 卡片底部内容。