Layout

Layouts create a top-level shell for your application.

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import { Layout, Header, Sidebar, Content } from 'furl-components';

ReactDOM.render(
  <Layout 
    sidebar='right' 
    header='top'
    contentSize={[1.0, 1.0, 0.8, 0.85]}
  >
    <Header outline='bottom'>Header</Header>
    <Sidebar outline='left'>Sidebar</Sidebar>
    <Content>Content</Content>
  </Layout>, 
  document.getElementById('root')
);

API

Notes

• A Layout component only accepts children of the Header, Sidebar or Content component types.
• Sidebar will automatically collapse for whatever screen size contentSize is 1.0, providing a menu button to open it up.
• header, sidebar and contentSize can either accept a single value or an array of 4 values, specifiying the different values for each screen size.
• The value(s) of header can be either 'top' or 'bottom'.
• The value(s) of sidebar can be either 'left' or 'right'.
• The value(s) of contentSize can be any decimcal value between 0.0 and 1.0.
• A header’s outline can be one of the following: 'none', 'top' or 'bottom'.
• A sidebar’s outline can be one of the following: 'none', 'left' or 'right'.