@procore/labs-centered-page-layout
Centered page layout, with available left and right rails to put content in normally blank areas
$ cnpm install @procore/labs-centered-page-layout 
SYNC missed versions from official npm registry.

Centered Page Layout

Centered page layout, with available left and right rails to put content in normally blank areas. Includes fixed side navigation.

Installation

yarn add @procore/labs-centered-page-layout

Usage

import * as CenteredPageLayout from '@procore/labs-centered-page-layout

const MyLayout = () => (
    <CenteredPageLayout.Container>
      <CenteredPageLayout.Left fixed>
        my left content
      </CenteredPageLayout.Left>
      <CenteredPageLayout.Body>
        My body content
      </CenteredPageLayout.Body>
      <CenteredPageLayout.Right>
        My right content
      </CenteredPageLayout.Right>
    </CenteredPageLayout.Container>
)

Usage with Left Navigation

const MyComponentWithNav = () => {
    const navigationItems = [
        {
            title: 'Procore',
            url: '/procore',
            active: false,
        },
        {
            title: 'Preconstruction',
            url: '/precon',
            active: true,
            subtabs: [
                {
                    title: 'Bidding',
                    url: '/precon/bidding',
                    active: true,
                },
                {
                    title: 'Planroom',
                    url: '/precon/bidding',
                    active: false,
                },
            ],
        },
    ];
    return (
        <CenteredPageLayout.Container>
            <CenteredPageLayout.Left fixed>
                <CenteredPageLayout.Navigation title="Welcome" url="/" active>
                    <CenteredPageLayout.NavigationTabs tabs={navigationItems} />
                </CenteredPageLayout.Navigation>
            </CenteredPageLayout.Left>
            <CenteredPageLayout.Body>
                Center
            </CenteredPageLayout.Body>
            <CenteredPageLayout.Right>
                Right
            </CenteredPageLayout.Right>
        </CenteredPageLayout.Container>
    )
}

Components


<Container />

props type
className? string
children ReactNode

<Body />

props type
children ReactNode

<Navigation />

props type
active boolean
url? string
className? string
title string
children ReactNode

<NavigationTab />

props type
url string
className? string
active boolean
title string
subtabs? arrayOf[NavigationSubTab]

<NavigationTabs />

props type
tabs arrayOf[NavigationSubTab]

<NavigationSubTab />

props type
subtabs?: arrayOf NavigationSubTab[] or undefined;
title string
url string
active boolean

Testing

yarn test

Examples

yarn storybook

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.

Current Tags

  • 0.1.1                                ...           latest (2 months ago)

3 Versions

  • 0.1.0-alpha.2                                ...           2 months ago
  • 0.1.0-alpha.1                                ...           2 months ago
  • 0.1.1                                ...           2 months ago

Copyright 2014 - 2017 © taobao.org |