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 [https://famo.us/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-header-footer-layout>
  <!-- header -->
  <fa-modifier fa-size="[undefined, 75]">
    <fa-surface fa-background-color="'red'">Header</fa-surface>
  </fa-modifier>

  <!-- content -->
  <fa-surface fa-background-color="'blue'">Content</fa-surface>

  <!-- footer -->
  <fa-modifier fa-size="[undefined, 75]">
    <fa-surface fa-background-color="'green'">Footer</fa-surface>
  </fa-modifier>
</fa-header-footer-layout>

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

<fa-header-footer-layout>
  <fa-modifier ng-repeat="view in views" fa-size="view.size" >
    <fa-surface fa-background-color="view.bgColor">
      
    </fa-surface>
  </fa-modifier>
</fa-header-footer-layout>
$scope.views = [
{bgColor: "red", text: "header", size: [undefined, 100]},
{bgColor: "green", text: "content", size: [undefined, undefined]},
{bgColor: "blue", text: "footer", size: [undefined, 100]}
];

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.