--- layout: "docs_api" version: "unstable" versionHref: "/docs/unstable" path: "api/directive/faHeaderFooterLayout/" title: "fa-header-footer-layout" header_sub_title: "Directive in module famous.angular" doc: "faHeaderFooterLayout" docType: "directive" ---
Improve this doc

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

```html ```

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.

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

  Edit in Plunker 
{% raw %}<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>{% endraw %}
{% raw %}angular.module('faHeaderFooterExampleApp', ['famous.angular']){% endraw %}
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}

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

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

  Edit in Plunker 
{% raw %}<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>{% endraw %}
{% raw %}angular.module('faHeaderFooterExampleAppA', ['famous.angular']){% endraw %}
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}

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

{% assign lvl = page.url | append:'X' | split:'/' | size %} {% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

  Edit in Plunker 
{% raw %}<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>{% endraw %}
{% raw %}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]}
    ];
}]);{% endraw %}
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}

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: