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 provides a multi-column 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 exposes the following Design Tokens for configuration:

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

Example

<template>
  <FixedHeaderAndAsidesLayout>
    <template #header>Header content</template>
    <template #sub-header>Sub-header content</template>
    <template #toolbar>Toolbar content</template>
    <template #main>Main content</template>
    <template #left-aside>Left aside content</template>
    <template #right-aside>Right aside content</template>
    <template #extra-aside>Extra aside content</template>
    <template #scroll-to-top>Scroll to top content</template>
  </FixedHeaderAndAsidesLayout>
</template>
<script setup>
import FixedHeaderAndAsidesLayout from '@empathyco/x-components/js/components/layouts/fixed-header-and-asides-layout.vue'
</script>