AppShell
The AppShell component is a main layout component that serves as a container for other components in your application. It uses a grid layout to control the positioning and layout of child components.It is a responsive component that can be used to create a responsive layout for your application.
Breakpoints
Component
Css
Changes
header-left
@container app_shell (max-width: 768px)
display: none
header-right
@container app_shell (max-width: 768px)
display: none
header-center
@container app_shell (max-width: 768px)
display: none
header-left-burger-menu
@container app_shell (max-width: 768px)
display: visible if LeftBarBreakpoint is top-left
header-center-burger-menu
@container app_shell (max-width: 768px)
display: visible if LeftBarBreakpoint or RightBarBreakPoint is top-center
header-right-burger-menu
@container app_shell (max-width: 768px)
display: visible if LeftBarBreakpoint or RightBarBreakPoint is top-right
left-bar
@container app_shell (max-width: 768px)
display: none
right-bar
@container app_shell (max-width: 768px)
display: none
main-page-top
@container app_shell (max-width: 768px)
display: visible if LeftBarBreakpoint ore RightBarBreakPoint is center-top
main-page-bottom
@container app_shell (max-width: 768px)
display: visible if LeftBarBreakpoint or RightBarBreakPoint is center-bottom