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>
ng-repeat inside a fa-header-footer
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 Modifier
s 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.