fa-header-footer-layout

This directive will create a Famo.us HeaderFooterLayout containing a Header, Content, and Footer based on the order of its child elements. See [/docs/views/HeaderFooterLayout]

Usage

<fa-header-footer-layout>
  <!-- header rendernode -->
  <!-- content rendernode -->
  <!-- footer rendernode -->
</fa-header-footer-layout>

Example

fa-header-footer is a View that arranges three renderables into a header and footer area with defined sizes, and a content area that fills up the remaining space.

To use it, declare it in the html and nest 3 renderables inside. In the example below, there are three direct children elements: a Modifier (with an fa-surface nested inside), a Surface, and another Modifier (with an fa-surface nested inside). The order that they are declared in the html determines whether each corresponds to a header, content, and footer.

Since the header and footer Modifiers have fixed heights of [undefined, 75] (fill the parent container horizontally, 75 pixels vertically), the content will fill the remaining height of the parent modifier or context.

<fa-app>

  <fa-header-footer-layout fa-options="{headerSize: 75, footerSize: 75}">

    <!-- header -->
    <fa-surface fa-background-color="'red'">Header</fa-surface>
  
    <!-- content -->
    <fa-surface fa-background-color="'blue'">Content</fa-surface>
  
    <!-- footer -->
    <fa-surface fa-background-color="'green'">Footer</fa-surface>

  </fa-header-footer-layout>

</fa-app>

angular.module('faHeaderFooterExampleApp', ['famous.angular'])

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

Famo.us' HeaderFooterLayout defaults to a vertical orientation. Specify a direction in the fa-options object to obtain a horizontal orientation.

<fa-app>

  <fa-header-footer-layout fa-options="{direction: 0, headerSize: 75, footerSize: 75}">

    <!-- header -->
    <fa-surface fa-background-color="'red'">Header</fa-surface>
  
    <!-- content -->
    <fa-surface fa-background-color="'blue'">Content</fa-surface>
  
    <!-- footer -->
    <fa-surface fa-background-color="'green'">Footer</fa-surface>

  </fa-header-footer-layout>

</fa-app>

angular.module('faHeaderFooterExampleAppA', ['famous.angular'])

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

ng-repeat inside a fa-header-footer

Fa-header-footer works with ng-repeat'ed renderables:

<fa-app ng-controller="HeaderFooterCtrlB">
  <fa-header-footer-layout>
    <fa-modifier ng-repeat="view in views" fa-size="view.size">
      <fa-surface fa-background-color="view.bgColor">
        {{view.text}}
      </fa-surface>
    </fa-modifier>
  </fa-header-footer-layout>
</fa-app>

angular.module('faHeaderFooterExampleAppB', ['famous.angular'])
  .controller('HeaderFooterCtrlB', ['$scope', function($scope) {
    $scope.views = [
      {bgColor: "red", text: "header", size: [undefined, 100]},
      {bgColor: "green", text: "content", size: [undefined, undefined]},
      {bgColor: "blue", text: "footer", size: [undefined, 100]}
    ];
}]);

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

In the example above, 3 renderables are generated through an ng-repeat. The header and footer Modifiers generated by the ng-repeat have defined sizes of [undefined, 100] (they will fill their parent container horizontally, and be 100 pixels vertically). The content has a size of [undefined, undefined], and it will fill the remaining heght and width of its container.

Note:

• If more than 3 renderables are nested inside an fa-header-footer-layout, it will throw an error: fa-header-footer-layout can accept no more than 3 children.
• Furthermore, in the basic example we used the fa-options attribute to specify the size of the header and footer. Here we do not use modifiers on the surfaces within the header fotter layout to achieve a similar effect. Note that this approach does not work as well with vertical orientations.