Note

This documentation describes the v-neos-layout Vue directive for native UI views. For Xml templates see layout.

Applies layout constraints (size, spacing, alignment, visibility) to any element via CSS custom properties or inline styles.

Import

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

Syntax

<div v-neos-layout:[arg]="value" />

Arguments & Values

Argument	Value type	Description
`width`	`string`	CSS width value (e.g. `'200px'`, `'50%'`, `'auto'`)
`height`	`string`	CSS height value
`min-width`	`string`	CSS min-width value
`max-width`	`string`	CSS max-width value
`min-height`	`string`	CSS min-height value
`max-height`	`string`	CSS max-height value
`margin`	`string`	CSS margin value
`padding`	`string`	CSS padding value
`align-self-horizontal`	`Align`	`left`, `center`, `right`, `stretch`
`align-self-vertical`	`VerticalAlign`	`top`, `middle`, `bottom`, `stretch`
`visibility`	`boolean`	`false` = `visibility: hidden` (element still takes space)

Usage Examples

Fixed width element

<Textbox property-name="zip" v-neos-layout:width="'120px'" />

Constrained height container

<Datagrid v-neos-layout:max-height="'400px'" />

Center self in layout

<image
  :source="logoUrl"
  v-neos-layout:align-self-horizontal="'center'"
  v-neos-layout:width="'200px'"
/>

Conditionally hidden (keep space)

<HorizontalLayout>
  <button label="Cancel" v-neos-layout:visibility="!isSubmitting" />
  <button label="Submit" />
</HorizontalLayout>

Combined constraints

<div v-neos-layout:width="'100%'" v-neos-layout:max-width="'600px'" v-neos-layout:margin="'0 auto'">
  <VerticalLayout space="medium">
    <!-- form content centered at max 600px -->
  </VerticalLayout>
</div>

Table of Contents