Layout

Layout is a 1-dimensional layout system with options to control the relative sizing of its children's elements. Layout spans the full width of the viewport area.

Usage

import { Layout } from 'nr1'

Examples

Basic

<Layout preview>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
</Layout>;

1
<Layout preview>
2
  <LayoutItem>
3
    <div className="nr1-Box">Main content</div>
4
  </LayoutItem>
5
</Layout>;

ReferenceError: Layout is not defined

Split left small

<Layout preview>
  <LayoutItem
    type={LayoutItem.TYPE.SPLIT_LEFT}
    sizeType={LayoutItem.SIZE_TYPE.SMALL}
  >
    <div className="nr1-Box">Navigation</div>
  </LayoutItem>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
</Layout>;

1
<Layout preview>
2
  <LayoutItem
3
    type={LayoutItem.TYPE.SPLIT_LEFT}
4
    sizeType={LayoutItem.SIZE_TYPE.SMALL}
5
  >
6
    <div className="nr1-Box">Navigation</div>
7
  </LayoutItem>
8
  <LayoutItem>
9
    <div className="nr1-Box">Main content</div>
10
  </LayoutItem>
11
</Layout>;

ReferenceError: Layout is not defined

Split right medium

<Layout preview>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
  <LayoutItem type={LayoutItem.TYPE.SPLIT_RIGHT}>
    <div className="nr1-Box">Activity stream</div>
  </LayoutItem>
</Layout>;

1
<Layout preview>
2
  <LayoutItem>
3
    <div className="nr1-Box">Main content</div>
4
  </LayoutItem>
5
  <LayoutItem type={LayoutItem.TYPE.SPLIT_RIGHT}>
6
    <div className="nr1-Box">Activity stream</div>
7
  </LayoutItem>
8
</Layout>;

ReferenceError: Layout is not defined

Split left small and split right medium

<Layout preview>
  <LayoutItem
    type={LayoutItem.TYPE.SPLIT_LEFT}
    sizeType={LayoutItem.SIZE_TYPE.SMALL}
  >
    <div className="nr1-Box">Navigation</div>
  </LayoutItem>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
  <LayoutItem type={LayoutItem.TYPE.SPLIT_RIGHT}>
    <div className="nr1-Box">Activity stream</div>
  </LayoutItem>
</Layout>;

1
<Layout preview>
2
  <LayoutItem
3
    type={LayoutItem.TYPE.SPLIT_LEFT}
4
    sizeType={LayoutItem.SIZE_TYPE.SMALL}
5
  >
6
    <div className="nr1-Box">Navigation</div>
7
  </LayoutItem>
8
  <LayoutItem>
9
    <div className="nr1-Box">Main content</div>
10
  </LayoutItem>
11
  <LayoutItem type={LayoutItem.TYPE.SPLIT_RIGHT}>
12
    <div className="nr1-Box">Activity stream</div>
13
  </LayoutItem>
14
</Layout>;

ReferenceError: Layout is not defined

Stacked layout

<>
  <Layout preview>
    <LayoutItem>
      <div className="nr1-Box">Chart</div>
    </LayoutItem>
  </Layout>
  <Layout preview>
    <LayoutItem
      type={LayoutItem.TYPE.SPLIT_LEFT}
      sizeType={LayoutItem.SIZE_TYPE.SMALL}
    >
      <div className="nr1-Box">Navigation</div>
    </LayoutItem>
    <LayoutItem>
      <div className="nr1-Box">Main Content</div>
    </LayoutItem>
  </Layout>
</>;

1
<>
2
  <Layout preview>
3
    <LayoutItem>
4
      <div className="nr1-Box">Chart</div>
5
    </LayoutItem>
6
  </Layout>
7
  <Layout preview>
8
    <LayoutItem
9
      type={LayoutItem.TYPE.SPLIT_LEFT}
10
      sizeType={LayoutItem.SIZE_TYPE.SMALL}
11
    >
12
      <div className="nr1-Box">Navigation</div>
13
    </LayoutItem>
14
    <LayoutItem>
15
      <div className="nr1-Box">Main Content</div>
16
    </LayoutItem>
17
  </Layout>
18
</>;

ReferenceError: Layout is not defined

Props

childrenrequirednode

Layout items to display.

classNamestring

Appends class names to the component.

fullHeightboolean

Expands the layout to occupy all available height.

previewboolean

Visually draws the boxes of the layout and its layout items.

styleobject

Inline style for custom styling.

Methods

`Layout.render`

function () => undefined