Card

带标题栏、扩展区与折叠能力的内容容器。

最后更新 2026-10-25 19:27:08

说明

Card 是页面分块的基础容器，Flush 去掉内边距便于承载表格等通栏内容。

常见能力：

标题 + 图标
Extra 右上操作区
Footer 底部区域
Collapsible 折叠

用法

<Card Title="订单概览" Icon="chart-pie">
    <Extra>
        <Button Kind="text" Icon="refresh" Text="刷新" />
    </Extra>
    <Footer>更新于 10:24</Footer>
    卡片内容
</Card>

API 参数

参数	类型	默认值	说明
`ChildContent`	`RenderFragment`	`null`
`Collapsible`	`bool`	`false`	可折叠，点击头部切换展开状态。
`DefaultExpanded`	`bool`	`true`	默认展开（配合 Collapsible）。
`Extra`	`RenderFragment`	`null`	标题栏右侧附加内容。
`Flush`	`bool`	`false`	去掉内边距（表格卡片常用）。
`Footer`	`RenderFragment`	`null`	卡片底部内容。
`HeaderContent`	`RenderFragment`	`null`	标题栏追加内容。
`HeaderHidden`	`bool`	`false`	隐藏卡片头部。
`Icon`	`string`	`null`	标题前置图标。
`Title`	`string`	`null`	卡片标题。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。