mcpField
S
syncfusion-maui-cards

syncfusion-maui-cards

github.com/syncfusion开发61210 次安装2 周前更新
代码仓库

关于 syncfusion-maui-cards

用于使用 Syncfusion .NET MAUI 的 SfCardView 和 SfCardLayout 构建卡片界面的技能。内容涵盖可滑动卡片与卡片堆叠、数据绑定、交互事件、样式定制及文档所述的液态玻璃效果。

主要功能

  1. 01可滑动移除的单张卡片
  2. 02可滑动浏览的卡片堆叠
  3. 03支持四个方向的滑动导航
  4. 04BindableLayout 数据绑定
  5. 05点击、移除和索引事件
  6. 06边框、渐变与玻璃效果

适用场景

  1. 01创建可滑动移除的卡片
  2. 02浏览堆叠的多张卡片
  3. 03根据数据集合动态生成卡片
  4. 04处理卡片点击与移除事件

安装

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

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

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

包含的文件

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

references/
card-layouts.md
card-views.md
customization.md
data-binding.md
events.md
getting-started.md
liquid-glass-effect.md

详细介绍

实现 .NET MAUI 卡片（SfCards）

Syncfusion .NET MAUI Cards 控件提供可关闭的单卡视图（SfCardView）和可滑动的卡片堆栈（SfCardLayout）。本技能涵盖安装、卡片创建、滑动手势、自定义、数据绑定、事件和现代视觉效果。

何时使用此技能

当用户需要以下功能时，请使用此技能：

  • 创建可关闭的卡片视图 - 可通过向左或向右滑动关闭的单张卡片
  • 构建卡片堆栈 - 可通过滑动导航的多张堆叠卡片
  • 实现滑动手势 - 可响应四个方向（左、右、上、下）滑动的卡片
  • 显示基于卡片的 UI - 用于组织内容的可视卡片容器
  • 添加交互式卡片 - 带点击事件、关闭事件和状态管理的卡片
  • 将数据绑定到卡片 - 使用 BindableLayout 从数据集合动态生成卡片
  • 自定义卡片外观 - 边框、圆角、指示器、颜色和玻璃效果
  • 处理卡片事件 - 点击、关闭中、已关闭、索引更改事件

此技能专用于 Syncfusion 的 .NET MAUI Cards 控件（SfCardView 和 SfCardLayout），不适用于通用卡片布局或其他卡片库。

组件概览

Syncfusion .NET MAUI Cards 控件提供两个主要组件：

  1. SfCardView - 可通过滑动关闭的单张卡片
  2. SfCardLayout - 用于堆叠多个 SfCardView 项并通过滑动导航的容器

主要功能：

  • 滑动关闭功能
  • 多方向滑动支持（左、右、上、下）
  • 视觉自定义（边框、圆角、指示器）
  • 以编程方式关闭卡片
  • 使用 BindableLayout 进行数据绑定
  • 全面的事件处理
  • 现代液态玻璃效果（.NET 10+）

文档和导航指南

入门

📄 阅读： references/getting-started.md

当用户需要以下内容时，请阅读此参考文档：

  • 安装 Syncfusion.Maui.Cards NuGet 包
  • 在 MauiProgram.cs 中注册 Syncfusion 处理程序
  • 创建第一个 SfCardView
  • 了解基本的 XAML 和 C# 实现模式
卡片视图功能

📄 阅读： references/card-views.md

当用户使用单张卡片并需要以下内容时，请阅读此参考文档：

  • SfCardView 组件概览和用法
  • 用于滑动关闭功能的 SwipeToDismiss 属性
  • 用于以编程方式关闭卡片的 IsDismissed 属性
  • FadeOutOnSwiping 视觉效果
  • 单卡实现模式
  • 独立卡片场景
卡片布局功能

📄 阅读： references/card-layouts.md

当用户需要以下卡片堆栈功能时，请阅读此参考文档：

  • SfCardLayout 组件（多张堆叠卡片）
  • 用于显示边缘卡片的 ShowSwipedCard 属性
  • 用于卡片导航的 VisibleIndex 属性
  • SwipeDirection 配置（Left、Right、Top、Bottom）
  • 多张卡片管理
  • 在卡片之间通过滑动手势导航
自定义和样式设置

📄 阅读： references/customization.md

当用户需要自定义以下内容时，请阅读此参考文档：

  • BorderColor、BorderWidth、CornerRadius 属性
  • 背景颜色和渐变
  • 指示器自定义（颜色、粗细、位置）
  • FadeOutOnSwiping 效果
  • 高级视觉样式设置
  • 自定义卡片设计和主题
使用 BindableLayout 进行数据绑定

📄 阅读： references/data-binding.md

当用户需要以下功能时，请阅读此参考文档：

  • 从数据集合动态生成卡片
  • 将 BindableLayout 与 SfCardLayout 配合使用
  • 设置 ViewModel 和数据源
  • 配置 ItemsSource 和 ItemTemplate
  • 创建数据驱动的卡片界面
  • 将卡片属性绑定到数据模型
事件和交互

📄 阅读： references/events.md

当用户需要处理以下内容时，请阅读此参考文档：

  • Tapped 事件（检测卡片点击）
  • VisibleIndexChanging 事件（卡片变化前触发，支持 Cancel）
  • VisibleIndexChanged 事件（卡片变化后触发）
  • Dismissing 事件（关闭前触发，支持 Cancel）
  • Dismissed 事件（关闭完成后触发）
  • 事件处理程序的实现和使用场景
Liquid Glass 效果

📄 阅读： references/liquid-glass-effect.md

当用户需要以下内容时，请阅读此参考文档：

  • 现代半透明玻璃效果
  • EnableLiquidGlassEffect 属性的用法
  • 平台要求（macOS 26+、iOS 26+、.NET 10）
  • 玻璃外观的背景配置
  • 简洁现代的卡片设计

评论

支持 Markdown