Layout #
Component is used for building App layout. It is based on CSS Grid and provides a simple API for building complex layouts.
Component provides four slots called area (top, right, bottom, left) and content (or default). You can specify area config for each slot which changes its behavior. For example, you can make area fixed or absolute. You can also change order of areas. See examples bellow for more details.
Ready to use templates #
Here is a list of common app layouts. You can copy and use them as a starting point for your application. All templates are responsive and mobile friendly.
Notice that some templates use fixed area option. You need to use VaLayout as a root component for your application to make it work as expected. Otherwise remove fixed option.
Examples #
In examples bellow you can learn how to configure Layout component exactly for your needs if you don't like templates from above.
Default usage #
Default usage of Layout component.
Page 1
Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.
For example, you can place here your router view, add sidebar with navigation in #left slot.
If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.
All slots #
Layout component has 4 slots: top, right, bottom, left, content (or default). You can use them to place your content.
Rendering order #
You can use order area attribute to change order of slots.If order of one area is higher than another, it will be rendered on top of it. For example, if you set top order to 0 and left to 1, left will take area from top. It is easier to play with it in example bellow.
Page content
Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.
For example, you can place here your router view, add sidebar with navigation in #left slot.
If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.
Absolute #
You can use absolute area attribute to make area absolute. It will be rendered on top of other areas and overflow them. Absolute respect order prop.
Page content
Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.
For example, you can place here your router view, add sidebar with navigation in #left slot.
If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.
Fixed #
You can use fixed area attribute to make area fixed. Fixed will force area to stay on its place during scrolling. Fixed respect order prop.
Notice that if you're using fixed VaLayout must be used as a root component for your application. Otherwise, it will not work as expected. This is why example from above opens in fullscreen modal.
Mobile friendly #
It is recommended to make left and right areas absolute on mobile devices. You can use absolute prop to do it in pair with useBreakpoint composable.
Page content
Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.
For example, you can place here your router view, add sidebar with navigation in #left slot.
If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.
Accessibility #
Layout component is not handling accessibility by default.
You should always wrap content in slot with <div role="region" aria-label="..."> to make it accessible.
Make sure you have main role on your main content in content slot,
aside in left, right slots, header in top slot and footer in bottom slot.
More about landmarks you can read here.
Notice that if you're using components like VaSidebar, VaHeader the correct role will be added automatically.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| allowBodyScrollOnOverlay |
|
| |
| bottom | AreaConfig for bottom slot |
| |
| left | AreaConfig for left slot |
| |
| right | AreaConfig for right slot |
| |
| top | AreaConfig for top slot |
| |
Events #
| Name | Description |
|---|---|
bottomOverlayClick | Emitted when bottom overlay is clicked. |
leftOverlayClick | Emitted when left overlay is clicked. Can be used to close sidebar on mobile devices. |
rightOverlayClick | Emitted when right overlay is clicked. Can be used to close sidebar on mobile devices. |
topOverlayClick | Emitted when top overlay is clicked |
Css Variables #
| Name | Default Value |
|---|---|
| --va-layout-overlay-color | rgba(0, 0, 0, 0.5) |
| --va-layout-scroll-padding | 1rem |