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 [/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-app ng-controller="SequentialCtrl">
  <fa-sequential-layout fa-options="sequentialOptions">
   <fa-view ng-repeat="view in sequence">
     <fa-modifier fa-size="[undefined, 100]">
       <fa-surface fa-background-color="view.bgColor"></fa-surface>
     </fa-modifier>
   </fa-view>
  </fa-sequential-layout>
</fa-app>

<script>
  angular.module('faSequentialExampleApp', ['famous.angular'])
      .controller('SequentialCtrl', ['$scope', '$famous', function($scope, $famous) {
        
        $scope.sequentialOptions = {
          direction: 1, // vertical = 1 (default), horizontal = 0
        };

        $scope.sequence = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}];

    }]);
</script>

fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}