fa-grid-layout

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

Usage

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

Example

A Famous Grid Layout divides a context into evenly-sized grid cells. Pass an option such as dimension by binding an object with the property to fa-options.

In the example below, fa-options references myGridLayoutOptions on the scope. The dimensions property has a value of [2,2] which specifies the columns and rows. fa-size is specified as [100, 100] on the fa-modifier, so each fa-surface will have these dimensions.

Edit in Plunker

<fa-app ng-controller="GridCtrl">
<fa-grid-layout fa-options="myGridLayoutOptions">
   <fa-modifier ng-repeat="grid in grids"
                fa-size="[100, 100]">
     <fa-surface fa-background-color="grid.bgColor"></fa-surface>
   </fa-modifier>
</fa-grid-layout>
</fa-app>

angular.module('faGridExampleApp', ['famous.angular'])
  .controller('GridCtrl', ['$scope', function($scope) {

    $scope.myGridLayoutOptions = {
       dimensions: [2,2], // specifies number of columns and rows
    };

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

}]);

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

If fa-size is not specified, as in this example below, the fa-surface's will collectively fill the height and width of its parent modifier/context.

Edit in Plunker

<fa-app ng-controller="GridCtrlA">
  <fa-grid-layout fa-options="myGridLayoutOptions">
     <fa-surface ng-repeat="grid in grids" fa-background-color="grid.bgColor"></fa-surface>
  </fa-grid-layout>
</fa-app>

angular.module('faGridExampleAppA', ['famous.angular'])
  .controller('GridCtrlA', ['$scope', function($scope) {

    $scope.myGridLayoutOptions = {
       dimensions: [2,2], // specifies number of columns and rows
    };

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

}]);

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