Series

series

Renders selected draw-objs in specified direction. The total width of series is a sum of selected draw-objs width and padding between objects.

Properties

property display: x-series | y-series | z-series;
Required YES
Type x-series

series on X (width) axis

Type y-series

series on Y (depth) axis

Type z-series

series on Z (height) axis

../../../_images/v-direction.png

x-series
../../../_images/d-direction.png

y-series
../../../_images/h-direction.png

z-series
property body: SELECTOR-TO-DRAW-OBJ, SELECTOR-TO-DRAW-OBJ, …;
Default null

Link to draw-objs.

property padding: INTEGER;
Default 0

Minimal padding between objects.

property align: start | end | center | stretch;
Default start

Align of objects in specified axis.

For this property is neccessary to set width/depth/height (depends on type).

../../../_images/align-start.png

align: start
../../../_images/align-end.png

align: end
../../../_images/align-center.png

align: center
../../../_images/align-stretch.png

align: stretch
property (x-series) justify: start | end | center | random;
property (y-series) justify: start | end | center | random;
property (z-series) justify: JUSTIFY-X, JUSTIFY-Y | center | random;
Default start

align of objects for the rest axis.

  • for x-series: align of Y (depth) axis

  • for y-series: align of X (width) axis

  • for z-series: align of Y and X axis (with two arguments)

../../../_images/series-justify-start.png

justify: start
../../../_images/series-justify-end.png

justify: end
../../../_images/series-justify-center.png

justify: center
../../../_images/series-justify-random.png

justify: random
../../../_images/series-justify-start-center.png

justify: start, center
../../../_images/series-justify-end-center.png

justify: end, center

Example

row {
    display: x-series;
    depth: 100;
    align: center;

    body: house.red, house.white, house.red;
}

You can try on https://pixelopolis.herokuapp.com/examples/Containers/Series