mcpField
S
syncfusion-aspnetcore-cards

syncfusion-aspnetcore-cards

github.com/syncfusion设计与 UI098 次安装3 周前更新
代码仓库

关于 syncfusion-aspnetcore-cards

syncfusion-aspnetcore-cards 是指导在 ASP.NET Core 项目中实现 Syncfusion Card 组件的技能，适用于构建内容卡片和仪表板组件。它介绍多种布局、图像、操作按钮及样式定制。

主要功能

  1. 01组合标题、内容与图像
  2. 02使用横向或堆叠布局
  3. 03添加操作按钮与分隔线
  4. 04适配不同屏幕和容器
  5. 05定制样式并集成其他组件

适用场景

  1. 01制作产品展示卡片
  2. 02构建仪表板小部件
  3. 03呈现个人资料或文章摘要
  4. 04创建带图像的横向列表项

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-cards

安装后在 Claude Code 中输入/syncfusion-aspnetcore-cards确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
action-buttons.md
advanced-customization.md
getting-started.md
header-and-content.md
horizontal-layout.md
images-and-dividers.md

详细介绍

实现 Syncfusion ASP.NET Core Card 组件

Card 组件是一种灵活的布局容器，可用于展示包含标题、图片、操作等内容。它非常适合用于创建产品展示、内容摘要、用户档案和仪表板小组件，外观简洁现代。

何时使用此技能

在以下情况下使用 Card 组件：

  • 展示有组织的内容 — 将相关信息（标题、图片、文本、操作）组合到视觉上统一的容器中
  • 创建仪表板小组件 — 为仪表板面板和内容卡片构建可复用的卡片布局
  • 展示产品或条目 — 以结构化的格式呈现产品图片、描述和操作按钮
  • 构建响应式布局 — 通过响应式设计实现水平或垂直堆叠
  • 添加交互元素 — 在卡片中包含按钮、链接、图片和其他组件
  • 实现现代 UI 模式 — 遵循 Material Design 和现代卡片式界面的设计

组件概览

Syncfusion ASP.NET Core Card（e-card 类）提供：

  • 灵活的结构 — 可任意组合标题、内容、图片和操作按钮
  • 布局选项 — 垂直（默认）、水平或堆叠布局
  • 丰富的内容支持 — 文本、图片、带标题/副标题的标题栏、分隔线
  • 操作按钮 — 支持水平或垂直排列按钮，以便用户进行交互
  • 响应式设计 — 可适应不同屏幕尺寸和容器
  • 易于自定义 — 使用 CSS 类设置样式和位置

文档和导航指南

入门

📄 阅读： references/getting-started.md

  • ASP.NET Core 项目设置和先决条件
  • 添加 Syncfusion 样式表和脚本
  • 创建第一个基础卡片
  • 运行应用并查看结果
标题栏和内容

📄 阅读： references/header-and-content.md

  • 包含标题和副标题的标题栏结构
  • 添加带有对齐选项的标题栏图片
  • 用于文本和 HTML 元素的内容区域
  • 包含正确元素结构的完整示例
图片和分隔线

📄 阅读： references/images-and-dividers.md

  • 在卡片中添加全宽图片
  • 使用叠加层添加图片标题和说明文字
  • 使用分隔线分隔内容区域
  • 多张图片和高级图片布局
操作按钮

📄 阅读： references/action-buttons.md

  • 创建操作按钮容器
  • 水平和垂直按钮对齐方式
  • 使用 e-card-btn 类设置按钮样式
  • 使用按钮和锚点标签作为操作项
水平和堆叠布局

📄 阅读： references/horizontal-layout.md

  • 使用 e-card-horizontal 创建水平卡片布局
  • 使用 e-card-stacked 混合水平和垂直布局
  • 在多列设计中定位内容
  • 水平布局的响应式注意事项
高级自定义

📄 阅读： references/advanced-customization.md

  • 使用 CSS 自定义图片标题的位置
  • 在卡片中集成其他 Syncfusion 组件
  • 样式和主题选项
  • 实际集成示例（ListViews、表单等）

快速入门示例

带有标题栏和内容的基础卡片：

<div class="e-card">
    <div class="e-card-header">
        <p><strong>Card Title</strong></p>
        <p>Subtitle or description</p>
    </div>
    <div class="e-card-content">
        Your content goes here
    </div>
</div>

常见模式

模式 1：带图片和标题栏的卡片
Header (title/subtitle) + Image + Content + Actions

适用于产品卡片、个人档案卡片和博客文章预览。

模式 2：水平排列的图片和内容
Image (left) | Header + Content + Actions (right)

适用于水平布局、列表项和媒体卡片。

模式 3：带标题叠加层的图片
Image + Title (overlay at bottom) + Actions

适用于图库卡片、精选内容和视觉展示。

模式 4：纯内容卡片
Header + Content + Divider + Actions

适用于简单的信息卡片、摘要卡片和操作项。

主要 CSS 类

类用途
e-card卡片根容器
e-card-header标题栏包装元素

| e-card-content | 内容区域 | | e-card-image | 全宽卡片图片 | | e-card-title | 图片叠加标题 | | e-card-actions | 操作按钮容器 | | e-card-btn | 操作按钮样式 | | e-card-separator | 区块间的分隔线 | | e-card-horizontal | 水平布局 | | e-card-stacked | 水平布局中的垂直区块 | | e-card-vertical | 操作按钮垂直对齐 | | e-card-corner | 图片圆角 |

开始之前

确保你的 ASP.NET Core 项目已：

  • 安装 Syncfusion NuGet 包
  • 在 _ViewImports.cshtml 中注册 TagHelpers
  • 在 _Layout.cshtml 中引用 Syncfusion CSS 样式表
  • 包含所需的 JavaScript 文件

如需完整的设置指南，请参阅入门。

评论

支持 Markdown