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