mcpField
S
syncfusion-maui-toolkit-bottom-sheet

syncfusion-maui-toolkit-bottom-sheet

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

关于 syncfusion-maui-toolkit-bottom-sheet

面向 .NET MAUI 开发者的 SfBottomSheet 技能,指导实现可展开的底部面板。涵盖内容绑定、手势、状态管理和外观定制。

主要功能

  1. 01四种展开与隐藏状态
  2. 02内容配置与数据绑定
  3. 03滑动展开和收起
  4. 04模态与非模态显示
  5. 05状态事件及程序控制
  6. 06尺寸、颜色和抓手定制

适用场景

  1. 01在当前页面展示补充信息
  2. 02根据列表选择显示详情
  3. 03创建确认面板或模态对话框
  4. 04实现手势驱动的渐进式内容展示

安装

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

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

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

包含的文件

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

references/
common-patterns.md
content-configuration.md
customization-styling.md
gestures-events-methods.md
getting-started.md
states-management.md

详细介绍

.NET MAUI 底部工作表(SfBottomSheet)

概述

底部工作表是一种用户界面组件,可从屏幕底部滑出,让用户无需离开主屏幕即可与其他信息或操作进行交互。Syncfusion SfBottomSheet 控件为 .NET MAUI 应用提供全面的状态管理、内容配置、手势支持和丰富的自定义选项。

主要功能:

  • 多种状态:FullExpanded、HalfExpanded、Collapsed、Hidden
  • 灵活的内容配置,支持数据绑定
  • 触控手势:滑动以展开或折叠
  • 丰富的自定义选项:颜色、尺寸、圆角半径、内边距、抓手样式
  • 事件处理和状态变更通知
  • 模态和非模态显示模式
  • 通过 IsOpen 属性以及 Show/Close 方法进行编程控制

何时使用此技能

在以下情况下使用此技能:

  • 显示补充内容,无需进行完整的页面导航(产品详情、信息面板、设置)
  • 创建数据驱动的交互,将列表选择绑定到详细内容视图
  • 实现模态对话框或确认工作表,使其覆盖在主内容上
  • 提供部分显示模式,让用户逐步展开内容( peek-a-boo 效果)
  • 启用基于手势的 UI,让用户通过滑动显示更多信息
  • 自定义外观以匹配应用主题(颜色、尺寸、圆角、动画)
  • 通过编程方式或用户交互处理状态转换
  • 在移动优先的应用中管理焦点和叠加层行为

文档和导航指南

入门

📄 阅读: references/getting-started.md

  • 项目设置和模板创建
  • NuGet 包安装(Syncfusion.Maui.Toolkit)
  • 在 MauiProgram.cs 中注册处理程序
  • 基本控件初始化
  • 与 ListView 集成的首个可运行示例
内容配置

📄 阅读: references/content-configuration.md

  • 设置主内容和底部工作表内容
  • 使用 ViewModel 进行数据绑定
  • 布局模式(VerticalStackLayout、Grid、ListView)
  • 动态内容更新
  • 绑定上下文管理
状态和状态管理

📄 阅读: references/states-management.md

  • 状态属性值和转换
  • AllowedState 配置(FullExpanded、HalfExpanded、All)
  • 用于编程控制的 IsOpen 属性
  • 状态变更场景和用例
自定义和样式设置

📄 阅读: references/customization-styling.md

  • 弹出模式(IsModal)和叠加层行为
  • 背景颜色和圆角半径
  • 高度调整(FullExpandedRatio、HalfExpandedRatio、CollapsedHeight)
  • 宽度模式(Full、Custom)
  • 内容内边距和间距
  • 抓手元素自定义
  • 动画时长配置
手势、事件和方法

📄 阅读: references/gestures-events-methods.md

  • 滑动手势支持(EnableSwiping)
  • StateChanged 事件处理
  • 用于叠加层交互的 CollapseOnOverlayTap
  • 用于编程控制的 Show/Close 方法
  • 检查事件参数
常见模式和实际场景

📄 阅读: references/common-patterns.md

  • 列表选择驱动的底部工作表
  • 模态对话框和确认工作表
  • 部分显示和预览模式
  • 动态内容绑定
  • 错误处理和边缘情况
  • 最佳实践和反模式

评论

支持 Markdown