@crpt/react-page-layout

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>