uno-toolkit-drawer

Implement gesture-enabled drawer navigation in Uno Platform apps with DrawerControl and DrawerFlyoutPresenter.

9|1|Updated Dec 10, 2024
One-click install
npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-drawer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: uno-toolkit-drawer
Source: https://github.com/unoplatform/studio/tree/main/plugins/uno-platform-studio/skills/uno-toolkit-drawer
Command: npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-drawer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables developers to implement gesture-enabled drawer navigation in Uno Platform apps using DrawerControl and DrawerFlyoutPresenter for consistent cross-platform UX.

Core Features & Use Cases

  • DrawerControl provides a main content area with a sliding drawer; DrawerFlyoutPresenter adds gesture-enabled flyouts for bottom/side sheets.
  • Use cases include swipe-to-open side drawers, bottom sheets, and modal panels integrated with the app navigation.

Quick Start

Add a DrawerControl-based drawer to your page and pair it with a DrawerFlyoutPresenter for gesture-enabled flyouts.

Frequently Asked Questions about uno-toolkit-drawer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add gesture-enabled drawer navigation to Uno Platform apps?

To add gesture-enabled drawer navigation to Uno Platform apps, integrate DrawerControl for sliding side drawers and DrawerFlyoutPresenter for gesture-enabled flyouts. Configure DrawerOpenDirection and IsOpen properties to wire the UI flow across web, desktop, and mobile targets.

How do I configure swipe-to-open bottom sheets in Uno Platform?

Configure swipe-to-open bottom sheets in Uno Platform using DrawerFlyoutPresenter. It adds gesture-enabled flyouts for bottom sheets and modal panels, requiring proper wiring within your app navigation flow alongside DrawerOpenDirection and IsOpen property configuration.

Does Uno Platform drawer navigation work across web, desktop, and mobile targets?

Uno Platform drawer navigation supports web, desktop, and mobile targets with consistent behavior. DrawerControl and DrawerFlyoutPresenter maintain uniform gesture interactions and sliding panel UX across all platforms without separate target-specific implementations.

How do I configure swipe-to-open bottom sheets in Uno Platform?

Configure swipe-to-open bottom sheets in Uno Platform using DrawerFlyoutPresenter. It adds gesture-enabled flyouts for bottom sheets and modal panels, requiring proper wiring within your app navigation flow alongside DrawerOpenDirection and IsOpen property configuration.

What is the difference between DrawerControl and DrawerFlyoutPresenter for Uno Platform UI?

DrawerFlyoutPresenter handles bottom sheet and side panel flyouts, while DrawerControl provides a main content area with a sliding drawer. Use DrawerFlyoutPresenter for modal panels and bottom sheets; use DrawerControl for persistent side drawer navigation integrated into the app layout.

Do I need to set DrawerOpenDirection and IsOpen manually for Uno Platform drawers?

Yes, configuring DrawerOpenDirection and IsOpen is required for proper wiring within a UI flow. These properties control the drawer's slide direction and visibility state, ensuring the gesture-enabled drawer navigation behaves correctly across web, desktop, and mobile targets.