mcpField
S
syncfusion-maui-navigation-drawer

syncfusion-maui-navigation-drawer

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

关于 syncfusion-maui-navigation-drawer

面向 .NET MAUI 开发者的 SfNavigationDrawer 实现指南，用于构建可滑出的导航面板。内容涵盖抽屉位置、动画、手势、事件及多抽屉布局。

主要功能

  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/maui-ui-components-skills --skill syncfusion-maui-navigation-drawer

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

包含的文件

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

references/
advanced-features.md
animations-transitions.md
content-management.md
drawer-positioning.md
events.md
getting-started.md
swipe-gestures.md
toggling-drawer.md

详细介绍

实现导航抽屉

.NET MAUI 导航抽屉（SfNavigationDrawer）是一个用于创建带滑动抽屉功能的导航窗格的组件。它由主内容区域和一个从屏幕任意边缘滑出的窗格组成。抽屉可通过滑动手势或编程方式打开，并支持多种位置、动画和自定义选项。

何时使用此技能

在用户需要以下功能时使用此技能：

  • 导航菜单 - 用于应用导航、包含菜单项的侧边面板
  • 汉堡菜单 - 经典的移动端导航模式，通过滑出式抽屉实现
  • 基于抽屉的布局 - 需要从屏幕任意边缘滑出面板的应用
  • 多抽屉界面 - 在多个侧边（左侧和右侧）带有抽屉的应用
  • 滑动导航 - 支持手势的触控式抽屉交互
  • 动画过渡 - 流畅的抽屉动画（SlideOnTop、Push、Reveal）
  • 上下文面板 - 按需滑入或滑出的辅助内容区域

组件概览

SfNavigationDrawer 控件提供：

  • 四向定位（Left、Right、Top、Bottom）
  • 三种动画类型（SlideOnTop、Push、Reveal）
  • 内容区域：抽屉页眉、抽屉页脚、抽屉内容、主内容
  • 编程控制和手势控制
  • 由事件驱动的抽屉状态管理
  • 多抽屉支持（主抽屉 + 次抽屉）
  • 可自定义的尺寸和背景
  • 滑动手势配置
  • 液态玻璃效果（iOS 26+、macOS 26+、.NET 10+）

文档和导航指南

入门

📄 阅读： references/getting-started.md

阅读时机：用户首次设置 NavigationDrawer，或需要安装指南时。

  • NuGet 包安装（Syncfusion.Maui.NavigationDrawer）
  • 注册 Syncfusion 处理程序（.ConfigureSyncfusionCore()）
  • 使用 ContentView 实现基本抽屉
  • 创建汉堡菜单切换按钮
  • 首个可运行的抽屉内容示例
抽屉位置和尺寸

📄 阅读： references/drawer-positioning.md

阅读时机：用户需要将抽屉放置在特定侧边或调整抽屉尺寸时。

  • Position 属性（Left、Right、Top、Bottom）
  • 用于左侧/右侧定位的 DrawerWidth
  • 用于顶部/底部定位的 DrawerHeight
  • 特定侧边的配置示例
  • 尺寸设置最佳实践
内容管理

📄 阅读： references/content-management.md

阅读时机：用户需要设置抽屉内容区域、页眉、页脚或主内容时。

  • ContentView（主内容区域 - 必需）
  • DrawerHeaderView 配置
  • DrawerContentView（导航菜单内容）
  • DrawerFooterView 设置
  • 页眉/页脚高度自定义
  • ContentBackground 样式设置
  • 使用 CollectionView 作为抽屉内容
  • 动态内容切换模式
动画和过渡

📄 阅读： references/animations-transitions.md

阅读时机：用户希望自定义抽屉打开/关闭动画或效果时。

  • 过渡类型（SlideOnTop、Push、Reveal）
  • 动画差异和适用场景
  • 用于控制动画速度的 Duration 属性
  • AnimationEasing 自定义
  • 性能注意事项
  • 动画类型的视觉对比
切换和抽屉控制

📄 阅读： references/toggling-drawer.md

阅读时机：用户需要以编程方式打开/关闭抽屉或控制抽屉状态时。

  • ToggleDrawer() 方法
  • 用于状态管理的 IsOpen 属性
  • 以编程方式执行打开/关闭操作
  • 设置抽屉初始状态
  • 在选择菜单项时关闭抽屉
  • 与汉堡按钮集成
事件处理

📄 阅读： references/events.md

适用场景：用户需要响应抽屉状态变化或控制抽屉行为。

  • DrawerOpening 事件（可取消）
  • DrawerOpened 事件
  • DrawerClosing 事件（可取消）
  • DrawerClosed 事件
  • DrawerToggled 事件
  • 事件参数和使用模式
  • 使用 Cancel 属性阻止抽屉打开或关闭
滑动手势

📄 阅读： references/swipe-gestures.md

适用场景：用户想要启用/禁用滑动手势或调整触控灵敏度。

  • EnableSwipeGesture 属性
  • 用于滑动区域的 TouchThreshold
  • 滑动打开行为
  • 滑动关闭行为
  • 按需禁用手势
  • 调整不同设备的灵敏度
高级功能

📄 阅读： references/advanced-features.md

适用场景：用户需要多抽屉设置、液态玻璃效果或复杂的抽屉场景。

  • 多抽屉实现（DrawerSettings + SecondaryDrawerSettings）
  • ToggleSecondaryDrawer() 方法
  • 在不同侧打开多个抽屉
  • 液态玻璃效果（EnableLiquidGlassEffect）
  • 适用于 iOS 26+/macOS 26+ 的 LiquidGlassSettings
  • 复杂的导航模式
  • 性能优化技巧

评论

支持 Markdown