1 min read
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 | false |
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 |