fa-sequential-layout

This directive will create a Famo.us SequentialLayout containing the specified child elements. The provided options object will pass directly through to the Famo.us faSequentialLayout's constructor. See [https://famo.us/docs/views/SequentialLayout]

Usage

<fa-sequential-layout fa-options="scopeOptionsObject">
  <!-- zero or more render nodes -->
</fa-sequential-layout>

Example

Fa-sequential-layout is a Famous View that arranges a collection of renderables sequentially in a specified direction. Pass options (such as direction) by binding an object with the property to fa-options.

In the example below, an ng-repeat is used on an fa-view and the elements nested below it. The size of each fa-surface is [undefined, 100], specifying that the width will fill the parent container, and the height will be 100 pixels.

There are no positioning properties (such as fa-translate) specified on the fa-modifier, but these fa-surfaces will translate automatically in the specified direction as not to overlap each other.

<fa-sequential-layout fa-options="seqOptions">
 <fa-view ng-repeat="view in seq">
   <fa-modifier fa-size="[undefined, 100]">
     <fa-surface fa-background-color="view.bgColor"></fa-surface>
   </fa-modifier>
 </fa-view>
</fa-sequential-layout>
$scope.seqOptions = {
  direction: 1, // vertical = 1 (default), horizontal = 0
};
$scope.seq = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}];