skills.rest
unoplatform
unoplatformOFFICIAL
Explore all skills by this author →
Website𝕏@unoplatformGitHub

uno-navigation-responsive-shell

Implement responsive navigation shells switching between TabBar and NavigationView.

9|1|Updated Dec 10, 2024
Search Tags:#navigation#shell#responsive#uno-platform#tabbar#navigationview#visualstatemanager
One-click install
npx skills add https://github.com/unoplatform/studio --skill uno-navigation-responsive-shell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uno-navigation-responsive-shell
Source: https://github.com/unoplatform/studio/tree/main/plugins/uno-platform-studio/skills/uno-navigation-responsive-shell
Command: npx skills add https://github.com/unoplatform/studio --skill uno-navigation-responsive-shell

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Implement adaptive navigation shells that switch between a bottom TabBar on narrow screens and a side NavigationView on larger screens, ensuring a single, consistent navigation surface across devices.

Core Features & Use Cases

  • VisualStateManager-based breakpoints with Narrow/Normal/Wide states.
  • Shared content region where runtime-injected views render; mirrored NavigationViewItem/TabBarItem pairs; route registration pattern.
  • Reference templates and substitution rules to accelerate building responsive shells for Uno Platform apps.

Quick Start

Replace placeholders in the template shell with your shell and page names and wire up the route registrations to enable responsive navigation.

Frequently Asked Questions about uno-navigation-responsive-shell

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

FAQPage Schema
How do I switch from a bottom TabBar to a side NavigationView in Uno Platform?▼

Use a responsive navigation shell to switch from a bottom TabBar to a side NavigationView. It enforces VisualStateManager breakpoints to adapt the UI automatically across narrow, normal, and wide screen widths.

How does VisualStateManager handle responsive navigation breakpoints in cross-platform apps?▼

VisualStateManager handles responsive navigation by defining Narrow, Normal, and Wide visual states. These breakpoints trigger UI changes that switch the navigation surface between a TabBar and a NavigationView dynamically.

What's the best way to share a content region between TabBar and NavigationView pages?▼

The best way to share a content region is using uen:Region for runtime view injection. This shared content region renders injected views while mirroring NavigationViewItem and TabBarItem pairs for consistent routing.

Can I use a single responsive shell for mobile-first apps across different screen sizes?▼

Yes, you can use a single responsive shell for mobile-first apps across different screen sizes. It adapts between a bottom TabBar and a side NavigationView, ensuring a consistent navigation surface across all devices.

How do I wire up route registrations for mirrored TabBar and NavigationView items?▼

Wire up route registrations by replacing template placeholders with your shell and page names. This synchronizes mirrored NavigationViewItem and TabBarItem pairs to enable consistent responsive navigation.

Why does my responsive shell need consistent route registration across platforms?▼

Your responsive shell needs consistent route registration to synchronize mirrored TabBar and NavigationView items. This ensures page routing remains unified when the UI adapts across different screen width breakpoints.

Related Skills

Explore More Software Engineering Skills→
mtmatteimtmattei
5

uno-navigation

Encode Uno Platform navigation patterns with ViewMaps, RouteMaps, and region-based routing.

Community
Advanced
heldercsousaheldercsousa

maui-dependency-injection

Register and resolve dependencies in .NET MAUI apps.

Community
Advanced
unoplatformunoplatform
9

uno-toolkit-visualstatemanager-extensions

Bind VisualStateManager states to view-model properties in XAML.

Official
Intermediate
unoplatformunoplatform
9

uno-navigation-tabbar

Generate region-based bottom TabBar navigation shells for Uno Platform apps.

Official
Intermediate