@crpt/react-page-layout

react-page-layout React component

Stats

StarsIssuesVersionUpdatedCreatedSize
@crpt/react-page-layout
001.0.123 years ago3 years agoMinified + gzip package size for @crpt/react-page-layout in KB

Readme

react-page-layout

Travis npm package Coveralls

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.