fluentui-react-grid

React components for Fluent UI layout styles

Usage no npm install needed!

<script type="module">
  import fluentuiReactGrid from 'https://cdn.skypack.dev/fluentui-react-grid';
</script>

README

fluentui-react-grid

NPM version NPM downloads NPM license Codecov Travis Bundle size

About

React components for Fluent UI layout styles

Alternatives

Contents

Demo

Playground – play with library in Storybook

How to Install

First, install the library in your project by npm:

$ npm install fluentui-react-grid

Or Yarn:

$ yarn add fluentui-react-grid

You also need to include CSS styles (in HTML head section e.g.: in index.html file):

<link
  rel="stylesheet"
  href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>

Components

Grid

Available options

HTML div element props

You need to add dir="ltr" – (order from left to right) or dir="rtl" – (right to left/reversed order) for correct grid positioning

Row

Available options

HTML div element props

Col

Available options

HTML div element props and dedicated params based on Fluent UI class names

Check corresponding Fulent UI class names here

Param Type
sizeSm number or string (between 1-12)
sizeMd number or string (between 1-12)
sizeLg number or string (between 1-12)
sizeXl number or string (between 1-12)
sizeXxl number or string (between 1-12)
sizeXxxl number or string (between 1-12)
smPush number or string (between 1-12)
mdPush number or string (between 1-12)
lgPush number or string (between 1-12)
xlPush number or string (between 1-12)
xxlPush number or string (between 1-12)
xxxlPush number or string (between 1-12)
smPull number or string (between 1-12)
mdPull number or string (between 1-12)
lgPull number or string (between 1-12)
xlPull number or string (between 1-12)
xxlPull number or string (between 1-12)
xxxlPull number or string (between 1-12)
hiddenSm boolean
hiddenMd boolean
hiddenMdDown boolean
hiddenMdUp boolean
hiddenLg boolean
hiddenLgDown boolean
hiddenLgUp boolean
hiddenXl boolean
hiddenXlDown boolean
hiddenXlUp boolean
hiddenXxl boolean
hiddenXxlDown boolean
hiddenXxlUp boolean
hiddenXxxl boolean

Example

Basics

<Grid dir="ltr">
  <Grid.Row>
    <Grid.Col sizeSm={6} sizeMd={4} sizeLg={2}>
      A
    </Grid.Col>

    <Grid.Col sizeSm={6} sizeMd={6} sizeLg={10}>
      B
    </Grid.Col>
  </Grid.Row>
</Grid>

Inheritance

<Grid dir="ltr">
  <Grid.Row>
    <Grid.Col sizeSm={12} sizeLg={4}>
      Example
    </Grid.Col>
  </Grid.Row>
</Grid>

Push and pull

<Grid dir="ltr">
  <Grid.Row>
    <Grid.Col sizeSm={4} smPush={8}>
      First in code
    </Grid.Col>

    <Grid.Col sizeSm={8} smPull={4}>
      Second in code
    </Grid.Col>
  </Grid.Row>
</Grid>

Visibility

<Grid dir="ltr">
  <Grid.Row>
    <Grid.Col sizeSm={12} hiddenXxlUp>
      Visible on smaller screens
    </Grid.Col>

    <Grid.Col sizeSm={12} hiddenXlDown>
      Visible on larger screens
    </Grid.Col>
  </Grid.Row>
</Grid>

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada