-+{{ stringify(dateRange.value) }}-
{{ stringify(dateRange.value) }}
}
-- } -{{dateRange.value | json}}-
{{ dateRange.value | json }}
+ }
+
- This example demonstrates a collapsible side panel with
- mobile support enabled. The panel can be collapsed to a minimal width while maintaining
- visibility of key navigation elements.
+ This example demonstrates a collapsible side panel with mobile support enabled.
+ The panel can be collapsed to a minimal width while maintaining visibility of key navigation
+ elements.
- Over: Panel overlays content for temporary interactions.
- Scroll: Panel pushes content aside for persistent
- workflows. Regular (390px): Standard width for navigation
- and settings. Wide (500px): Expanded width for complex
- forms and content. Extended (Responsive): Adaptive width
- scaling from mobile full-width to desktop 912px max.
+ Over: Panel overlays content for temporary interactions.
+ Scroll: Panel pushes content aside for persistent workflows.
+ Regular (390px): Standard width for navigation and settings.
+ Wide (500px): Expanded width for complex forms and content.
+ Extended (Responsive): Adaptive width scaling from mobile full-width to desktop
+ 912px max.
- This example demonstrates a collapsible side panel with
- mobile support enabled. The panel can be collapsed to a minimal width while maintaining
- visibility of key navigation elements.
+ This example demonstrates a collapsible side panel with mobile support enabled.
+ The panel can be collapsed to a minimal width while maintaining visibility of key navigation
+ elements.
- Over: Panel overlays content for temporary interactions.
- Scroll: Panel pushes content aside for persistent
- workflows. Regular (390px): Standard width for navigation
- and settings. Wide (500px): Expanded width for complex
- forms and content. Extended (Responsive): Adaptive width
- scaling from mobile full-width to desktop 912px max.
+ Over: Panel overlays content for temporary interactions.
+ Scroll: Panel pushes content aside for persistent workflows.
+ Regular (390px): Standard width for navigation and settings.
+ Wide (500px): Expanded width for complex forms and content.
+ Extended (Responsive): Adaptive width scaling from mobile full-width to desktop
+ 912px max.
- This example demonstrates dynamic content loading using
- Angular CDK Portal. Content can be switched between different templates at runtime without
- rebuilding the entire panel.
+ This example demonstrates dynamic content loading using Angular CDK Portal.
+ Content can be switched between different templates at runtime without rebuilding the entire
+ panel.
- Over: Panel overlays content for temporary interactions.
- Scroll: Panel pushes content aside for persistent
- workflows. Regular (390px): Standard width for navigation
- and settings. Wide (500px): Expanded width for complex
- forms and content. Extended (Responsive): Adaptive width
- scaling from mobile full-width to desktop 912px max.
+ Over: Panel overlays content for temporary interactions.
+ Scroll: Panel pushes content aside for persistent workflows.
+ Regular (390px): Standard width for navigation and settings.
+ Wide (500px): Expanded width for complex forms and content.
+ Extended (Responsive): Adaptive width scaling from mobile full-width to desktop
+ 912px max.
- Over: The side panel overlays on top of the main content,
- which remains in its original position. Ideal for temporary interactions without losing
- context. Scroll: The side panel pushes the main content to
- the left, resizing the available space. Best for persistent side-by-side workflows.
+ Over: The side panel overlays on top of the main content, which remains in its
+ original position. Ideal for temporary interactions without losing context.
+ Scroll: The side panel pushes the main content to the left, resizing the
+ available space. Best for persistent side-by-side workflows.
- Regular (390px): Standard width suitable for most content
- like navigation, settings, or simple forms.
- Wide (500px): Expanded width for more complex content,
- detailed forms, or when more reading space is needed.
- Extended (Responsive): Adaptive width that scales with
- screen size - full width on mobile/tablet, progressively larger on desktop (480px → 912px
- max) for optimal space utilization.
+ Regular (390px): Standard width suitable for most content like navigation,
+ settings, or simple forms. Wide (500px): Expanded width for more complex
+ content, detailed forms, or when more reading space is needed.
+ Extended (Responsive): Adaptive width that scales with screen size - full width
+ on mobile/tablet, progressively larger on desktop (480px → 912px max) for optimal space
+ utilization.
- Navigate: Shows export icon in panel header. Click to
- navigate to a dedicated page. Overlay: Shows zoom icon in
- panel header. Click to toggle fullscreen overlay mode with URL state persistence.
+ Navigate: Shows export icon in panel header. Click to navigate to a dedicated
+ page. Overlay: Shows zoom icon in panel header. Click to toggle fullscreen
+ overlay mode with URL state persistence.
- Backdrop: Displays a semi-transparent overlay that blocks
- interactions with the main content while keeping it visible for context. Only active in
- over-mode (or when scroll mode is forced to over-mode on smaller screens). The backdrop can
- be clicked to close the side panel and can be disabled with the
- disableBackdrop input.
+ Backdrop: Displays a semi-transparent overlay that blocks interactions with the
+ main content while keeping it visible for context. Only active in over-mode (or when scroll
+ mode is forced to over-mode on smaller screens). The backdrop can be clicked to close the
+ side panel and can be disabled with the disableBackdrop input.