react-page-layout

Layout components pack.

Usage

import { Header, Layout, Footer, Content, Container, Column, InlineWrap } from  "@crpt/react-page-layout";

Layout is allways a top level component.

     <Layout>
        <Header>Header Content</Header>
        <Content>Main Content</Content>
        <Footer>Footer Content</Footer>
     <Layout/>

Layout can be inset indefinitely.

     <Layout>
        <Header>Header Content</Header>
        <Content>

            <Layout>
                <Header>Header Content</Header>
                <Content>Main Content</Content>
                <Footer>Footer Content</Footer>
            <Layout/>

        </Content>
        <Footer>Footer Content</Footer>
     <Layout/>

Header, Layout, Footer and Content components have no special props.

Container

     <Container gutter={16} justify="stretch">
        <Column col={6}>Content</Column>
        <Column>Content</Column>
        <Column col={6}>Content</Column>
     <Container/>

| PropName | Описание | Пример | |---|---|---| | gutter: Number | Spacing between <Column/> in pixels. | <Container gutter={16}><Column></Column><Column></Column></Container> | | justify: String | align-items flex value. | <Container justify="stretch"><Column></Column><Column></Column></Container> |

Column

| PropName | Описание | Пример | |---|---|---| | col: Number | Width in units. Maximum value: 24. If not set, fills all remaining space. | <Container><Column></Column><Column col={6}></Column></Container> |