Note

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

CanvasLayout

A layout container that positions its children in depth: each child is placed independently of the others, by its distances to the edges of the canvas, and children can overlap.

Warning

Use CanvasLayout only when elements must overlap. Never use it to lay out a whole view or a whole area of a view with fixed positions: use VerticalLayout, HorizontalLayout and GridLayout, which adapt to the content, the window size and the translated texts.

Import

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

Props

CanvasLayout has no props. Each child positions itself with the template directives written on it:

• by its distances to the edges of the canvas, with the top, right, bottom and left CSS properties, such as style="top: 8px; right: 8px", and the neos-canvas-stretch-horizontal or neos-canvas-stretch-vertical class when both distances of an axis are written,
• or by its alignment in the canvas, with the neos-align-self-horizontal-* and neos-align-self-vertical-* classes, which win over a distance on the same axis.

A child with neither is placed in the top left corner of the canvas.

Note

The align-horizontal and align-vertical attributes of the Xml canvas-layout do not exist on the Vue component: the generator turns them into a layout:align-self-* directive on each child. In a native UI view, set the alignment on each child.

Slots

Slot	Description
default	Children to position over the canvas

Behavior

• The children never give the canvas a size: always give it one, for example class="neos-fixed-width neos-fixed-height" style="width: 320px; height: 160px".
• The children overflow the canvas by default. style="overflow: hidden" on the canvas cuts them at its edges.
• The children are drawn in the order of the template: a child is drawn over the children written before it.
• While the canvas is resized, the transitions of its children are suspended, so that they follow the new size at once.

Usage Examples

Badge in the corner of a picture

<CanvasLayout class="neos-fixed-width neos-fixed-height" style="width: 320px; height: 160px">
  <InputImage
    :value="item.photo"
    readonly
    fit="cover"
    class="neos-canvas-stretch-horizontal neos-canvas-stretch-vertical"
    style="top: 0px; right: 0px; bottom: 0px; left: 0px"
  />
  <Badge value="New" style="top: -10px; right: -12px" />
</CanvasLayout>

Centered button

<CanvasLayout class="neos-fixed-width neos-fixed-height" style="width: 320px; height: 160px">
  <InputImage
    :value="item.photo"
    readonly
    fit="cover"
    class="neos-canvas-stretch-horizontal neos-canvas-stretch-vertical"
    style="top: 0px; right: 0px; bottom: 0px; left: 0px"
  />
  <Button icon="Play" class="neos-align-self-horizontal-center neos-align-self-vertical-center" @click="play" />
</CanvasLayout>

See Also

• Template directives — the distances and the alignment of a child, and every other template directive
• Canvas directives — the values accepted by the distances
• Canvas layout — every use of the component, with schemas