# Card 使用文档本文档介绍 AtomUI Card 控件的各种使用方式，示例代码摘自 Gallery 演示程序。 > 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` --- ## 前置准备在 AXAML 中使用 Card，需要引入以下命名空间： ```xml xmlns:atom="https://atomui.net" xmlns:antdicons="https://atomui.net/icons/antdesign" ``` 在 C# 代码中引入： ```csharp using AtomUI.Desktop.Controls; // Card, CardMetaContent, CardTabsContent 等 using AtomUI.Controls; // SizeType 等共享类型 ``` --- ## 1. 基本卡片最基本的卡片，包含标题、内容和额外区域。支持三种尺寸。 ```xml More Card content Card content Card content More Card content Card content Card content More Card content Card content Card content ``` **使用场景指引**： - 默认使用 `Middle` 尺寸 - 页面级概览卡片使用 `Large` - 紧凑布局或辅助信息使用 `Small` --- ## 2. 简洁卡片（无标题）不设置 `Header` 和 `Extra`，卡片将不显示头部区域（`:headerless` 伪类激活）： ```xml Card content Card content Card content ``` --- ## 3. 无边框卡片在灰色或有色背景上使用无边框风格，通过阴影划定卡片边界： ```xml More Card content Card content Card content ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "No border" 示例。 --- ## 4. 卡片列布局多张卡片在网格中排列，常用于概览页面： ```xml Card content Card content Card content Card content Card content Card content Card content Card content Card content ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "Card in column" 示例。 --- ## 5. 悬浮阴影卡片通过 `IsHoverable` 启用鼠标悬浮效果，卡片在悬浮时「升起」： ```xml ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "Customized content" 示例。 --- ## 6. 带封面和 Meta 内容使用 `Cover` 属性设置封面图片，`CardMetaContent` 展示结构化信息： ```xml ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "Support more content configuration" 示例。 --- ## 7. 加载状态通过 `IsLoading` 控制骨架屏加载占位，适用于异步数据加载场景： ### 静态加载状态 ```xml This is the description This is the description ``` ### 动态加载状态（数据绑定） ```xml This is the description ``` ```csharp // ViewModel public class CardViewModel : ReactiveObject { [Reactive] public bool IsLoading { get; set; } = true; } ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "Loading card" 示例。 --- ## 8. Grid 网格卡片使用 `CardGridContent` 和 `CardGridItem` 创建网格布局： ```xml Content Content Content Content Content Content Content ``` **特点**： - `ColumnDefinitions` 和 `RowDefinitions` 的语法与 Avalonia `Grid` 一致 - 每个 `CardGridItem` 通过 `Row` 和 `Column` 定位 - 可通过 `IsHoverable="False"` 禁用单个格子的悬浮效果 - 网格内容模式下头部底部边框自动隐藏 > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "Grid card" 示例。 --- ## 9. 内嵌卡片通过 `IsInnerMode` 实现卡片嵌套，内层卡片头部自动变色以区分层级： ```xml More Card content Card content Card content More Card content Card content Card content ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "Inner card" 示例。 --- ## 10. 内嵌标签页使用 `CardTabsContent` 在卡片中嵌入标签页： ### 标题 + Tabs ```xml More content1 content2 ``` ### Tabs + 标签栏额外内容（无标题） ```xml More article content app content project content ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CardShowCase.axaml` 中 "With tabs" 示例。 --- ## 11. 操作区按钮通过 `Card.Actions` 添加操作按钮，操作区自动等分布局： ```xml ``` **特点**： - 操作区使用 `UniformGrid` 等分布局 - 操作按钮之间自动绘制分割线 - 操作区与内容区之间自动绘制顶部分割线 - 图标悬浮时变为主色（`ColorPrimary`） --- ## 12. 控制动画行为 ```xml No animation transition ``` --- ## 常见组合模式 ### 信息展示卡片 ```xml 编辑 ``` ### 产品卡片 ```xml ``` ### 功能入口网格 ```xml 操作一操作二操作三 ``` ### 多维度信息展示 ```xml 更多概览内容详情内容日志内容 ```