SingleColumnLayout

Component for use as Layout to be filled with the rest of the Components.

Props

Name	Description	Type	Default
asideAnimation	The animation used for the Main Aside.	AnimationProp	() => animateTranslate('right')
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 used to insert content into the Header.	None
sub-header	Slot that can be used to insert content into the Sub Header.	None
toolbar	Slot that can be used to insert content into the Toolbar.	None
predictive	Slot that can be used to insert content into the Predictive Layer.	None
main	Slot that can be used to insert content into the Main.	None
floating	Slot that can be used to insert content into the Floating.	None
footer	Slot that can be used to insert content into the Footer.	None
aside	Slot that can be used to insert content into the Aside.	None
extra-aside		None

Layout

This component provides a single-column layout with fixed headers and collapsible fixed asides:

Layout Schema

header
sub-header
toolbar
predictive
main
floating
footer
aside
extra-aside

Design Tokens

The component exposes the following Design Tokens for configuration:

Token	Default Value	Description
--x-size-margin-left-layout-single-column	0	The left margin for the aside modal

Example

<template>
  <SingleColumnLayout>
    <template #header>Header content</template>
    <template #sub-header>Sub-header content</template>
    <template #toolbar>Toolbar content</template>
    <template #predictive>Predictive content</template>
    <template #main>Main content</template>
    <template #floating>Floating content</template>
    <template #footer>Footer content</template>
    <template #aside>Aside content</template>
    <template #extra-aside>Extra aside content</template>
  </SingleColumnLayout>
</template>
<script setup>
import SingleColumnLayout from '@empathyco/x-components/js/components/layouts/single-column-layout.vue'
</script>