Fillers

fillers

Renders many draw-objs in specified direction. Unline series, filler try to fill specified space with draw-objs.

Properties

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

filler on X (width) axis

Type y-filler

filler on Y (depth) axis

Type z-filler

filler 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;

Link to draw-obj to fill the specified space.

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-filler) justify: start | end | center | random;
property (y-filler) justify: start | end | center | random;
property (z-filler) justify: JUSTIFY-X, JUSTIFY-Y | center | random;
Default start

Align of objects for the rest axis.

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

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

  • for z-filler: 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-filler;
    width: 300;
    depth: 100;
    align: stretch;

    body: house.red;
}

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