1 min read
FixedHeaderAndAsidesLayout
title: FixedHeaderAndAsidesLayout
FixedHeaderAndAsidesLayout
Component for use as Layout to be filled with the rest of the components.
Props
| Name | Description | Type | Default |
|---|---|---|---|
devMode | Enables the devMode, which shows the available slots to use with its names. | boolean | |
Slots
| Name | Description | Bindings (name - type - description) |
|---|---|---|
header | Slot that is be used for insert content into the Header. | None |
sub-header | Slot that can be used to insert content into below the header. | None |
toolbar | None | |
main | Slot that is be used for insert content into the Main. | None |
left-aside | Slot that is be used for insert content into the left aside. | None |
right-aside | Slot that is be used for insert content into the right aside. | None |
extra-aside | None | |
scroll-to-top | None |
Layout
This component has the following layout with fixed headers and collapsible fixed asides:
| header | ||
|---|---|---|
| left-aside | sub-header | right-aside |
| toolbar | ||
| main | ||
| scroll-to-top |
Additionally it provides an empty slot extra-aside to be customized by the user.
Design Tokens
The component has also the following Design Tokens to configure it:
| token | default value |
|---|---|
| --x-size-height-layout-backdrop | 40vh |
| --x-size-width-layout-aside | 300px |
| --x-size-min-margin-layout | 20px |
| --x-size-max-height-layout-header | auto |
| --x-size-max-width-layout | 1440px |
| --x-color-background-layout-header-backdrop | white |
| --x-color-background-layout-header | transparent |
| --x-size-border-color-layout-header | transparent |
| --x-size-border-width-layout-header | 0px |
| --x-color-background-layout-sub-header | transparent |
| --x-size-border-color-layout-sub-header | transparent |
| --x-size-border-width-layout-sub-header | 0px |
| token | use |
|---|---|
| --x-size-height-layout-backdrop | The height for header gradient backdrop |
| --x-size-width-layout-aside | The width of the asides |
| --x-size-min-margin-layout | The min horizontal margin for the Layout |
| --x-size-max-height-layout-header | The max height for the Layout Header |
| --x-size-max-width-layout | The max width for the Layout |
| --x-color-background-layout-header-backdrop | The background color of the head backdrop |
| --x-color-background-layout-header | The background color of the header |
| --x-size-border-color-layout-header | The border color of the header |
| --x-size-border-width-layout-header | The border with of the header |
| --x-color-background-layout-sub-header | The background color of the sub header |
| --x-size-border-color-layout-sub-header | The border color of the sub header |
| --x-size-border-width-layout-sub-header | The border with of the sub header |