I've also added a simple example to show how you can use the
HeaderFooterLayout to layout the basis of your SPA:Look at how simple it is to set content so that it takes advantage of the complete browser's height and width. Centering content is so easy as well. No funny tricks, just a simple code that works well on mobile, tablet and regular desktop browsers.
HeaderFooterLayout = require 'famous/views/HeaderFooterLayout'
layout = new HeaderFooterLayout
headerSize: 100
footerSize: 50
mainContext.add layout
layout.header.add new Surface
content: 'Header'
size: [undefined, 100]
classes: ['header-surface']
properties:
lineHeight: '100px'
textAlign: 'center'
layout.content.add new Surface
content: 'Content'
size: [undefined, undefined]
properties:
lineHeight: '300px'
textAlign: 'center'
layout.footer.add new Surface
content: 'Footer'
size: [undefined, 50]
classes: ['footer-surface']
properties:
lineHeight: '50px'
textAlign: 'center'

Aucun commentaire:
Enregistrer un commentaire