Note

This documentation describes the VerticalLayout Vue component for native UI views, for Xml templates see vertical-layout.

VerticalLayout

A flex-column layout container. Arranges children vertically using CSS custom properties from design-system tokens.

Import

import { VerticalLayout } from '@neos/design-system'

Props

Prop	Type	Default	Description
space	'none' \| 'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	'small'	Gap between children
align	'left' \| 'center' \| 'right' \| 'start' \| 'end' \| 'stretch' \| 'space-between'	'stretch'	Cross-axis alignment (align-items)
verticalAlign	'top' \| 'center' \| 'bottom' \| 'stretch'	undefined	Main-axis alignment (justify-content). Not applied when undefined

Slots

Slot	Description
default	Children to stack vertically

Usage Examples

Form field column

<VerticalLayout space="medium">
  <StringFormField property-name="firstName" />
  <StringFormField property-name="lastName" />
  <DateFormField property-name="birthDate" />
</VerticalLayout>

Centered content panel

<VerticalLayout align="center" vertical-align="center" space="large">
  <Heading :level="2">No data found</Heading>
  <Text>Try adjusting your filters.</Text>
  <button label="Clear filters" />
</VerticalLayout>

Full-height page layout

<VerticalLayout space="none" style="height: 100%">
  <Toolbar />
  <VerticalLayout space="medium" style="flex: 1; overflow: auto">
    <slot />
  </VerticalLayout>
  <PaginationBar />
</VerticalLayout>