NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

LayoutGrid

import { LayoutGrid } from '@concur/nui-widgets';

The LayoutGrid component is used in conjunction with Row, Col and Clearfix components for page layout using the React Bootstrap grid system. It defines the responsive container for the rows and columns.

When working with NUI applications, this component is likely not needed as it is being provided through NUI Shell. Any pages or components can start with rows and columns.

Example

NOTE: The gray background and border colors used in the example are for demonstration purposes only.

<LayoutGrid fluid fullyResponsive>
    <Row className='show-grid'>
        <Col md={8} xs={12}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
        <Col md={4} xs={6}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
    </Row>

    <Row className='show-grid'>
        <Col md={4} xs={6}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        <Col md={4} xs={6}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        <Col md={4} xsHidden><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
    </Row>

    <Row className='show-grid'>
        <Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
    </Row>

    <Row className='show-grid'>
        <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
        <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
    </Row>
</LayoutGrid>

Usage

Properties

Property Type Default Description
className String   Custom classes to add to the grid layout container’s <div> tag.
fluid Boolean false When true, turn a fixed-width grid layout into a full-width layout.
fullyResponsive Boolean false When true, the grid container will be responsive for all viewport sizes. The default for SAP Concur’s applications is to not be responsive below the medium viewport size.