卡片 Card
卡片组件用于将相关内容整合到一个容器中展示。
基础使用
Card 组件默认显示标题和头部区域，不展示底部区域。可以通过 title 属性设置标题文本。
Card Title
This is the card body content.
You can put any content here.
隐藏源代码
卡片形状与圆角
shape 属性控制卡片形状，默认 'round'（圆角），可选 'rect'（直角）。
borderRadius 可自定义圆角大小，优先级高于 shape。
Round Card (Default)
Default shape is round with pixelSize × 4 border radius.
Rect Card
Rect shape has no rounded corners.
Custom Radius
Custom border radius of 28px.
Custom Radius Array
Individual corner radii: top-left 12px, top-right 2px, bottom-right 12px, bottom-left 2px.
隐藏源代码
卡片边框
通过 bordered 属性可以控制是否显示边框。
With Border
This card has a border (default).
No Border
This card has no border.
隐藏源代码
关闭按钮
通过 closable 属性可以显示关闭按钮，点击后触发 close 事件。
Closable Card
Click the X icon in the header to close this card.
隐藏源代码
自定义头部和底部
使用 header 和 footer 插槽可以自定义内容。
With Header Only
Card with header visible (default).
Footer is hidden by default.
Custom Header
Card body content here.
No Header
This card does not show the header section.
隐藏源代码
API
CardProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| title | string | 是 | | 卡片标题文本。 | 0.2.0 |
| shape | CardShape | 是 | 'rect' | 卡片形状。 | 0.2.0 |
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | 是 | | 自定义圆角大小，可选单个值或四个值的数组。 | 0.2.0 |
| bordered | boolean | 是 | true | 是否显示卡片边框。 | 0.2.0 |
| headerProps | RestAttrs | 是 | | 头部区域的附加属性。 | 0.2.0 |
| bodyProps | RestAttrs | 是 | | 主体区域的附加属性。 | 0.2.0 |
| footerProps | RestAttrs | 是 | | 底部区域的附加属性。 | 0.2.0 |
| closable | boolean | 是 | false | 是否显示关闭按钮。 | 0.2.0 |
| pollSizeChange | boolean | 是 | false | 是否在容器大小变化时重新绘制。 | 0.2.0 |
CardEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| close | e: MouseEvent | 点击关闭按钮时触发的回调。 | 0.2.0 |
CardSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| header | | 头部区域自定义内容。 | 0.2.0 |
| default | | 卡片主体内容。 | 0.2.0 |
| footer | | 底部区域自定义内容。 | 0.2.0 |