SequentialLayout

SequentialLayout arranges its collection of renderables one after another based on their size.

To use a SequentialLayout instance, we must give a collection of renderables to the layout’s .sequenceFrom() method.

Basic use

By default, SequentialLayout arranges its collection of renderables vertically. (Note the .sequenceFrom() method, which can be passed an array of renderables even before the array elements are assigned.)

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var SequentialLayout = famous.views.SequentialLayout;

var mainContext = Engine.createContext();

var sequentialLayout = new SequentialLayout();

var surfaces = [];

sequentialLayout.sequenceFrom(surfaces);

for (var i = 0; i < 10; i++) {
    surfaces.push(new Surface({
        size: [undefined, 50],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
        }
    }));
}

mainContext.add(sequentialLayout);

Horizontal layout

SequentialLayout can also lay out its renderables horizontally. This is done by setting the direction option. (A direction of 1 is vertical, and a direction of 0 is horizontal.)

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var SequentialLayout = famous.views.SequentialLayout;

var mainContext = Engine.createContext();

var sequentialLayout = new SequentialLayout({
    direction: 0
});

var surfaces = [];

sequentialLayout.sequenceFrom(surfaces);

for (var i = 0; i < 10; i++) {
    surfaces.push(new Surface({
        size: [50, undefined],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
        }
    }));
}

mainContext.add(sequentialLayout);

Next: FlexibleLayout »