关于 syncfusion-maui-toolkit-bottom-sheet
面向 .NET MAUI 开发者的 SfBottomSheet 技能,指导实现可展开的底部面板。涵盖内容绑定、手势、状态管理和外观定制。
主要功能
- 01四种展开与隐藏状态
- 02内容配置与数据绑定
- 03滑动展开和收起
- 04模态与非模态显示
- 05状态事件及程序控制
- 06尺寸、颜色和抓手定制
适用场景
- 01在当前页面展示补充信息
- 02根据列表选择显示详情
- 03创建确认面板或模态对话框
- 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.mdcontent-configuration.mdcustomization-styling.mdgestures-events-methods.mdgetting-started.mdstates-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