fluentui-react-grid

fluentui-react-grid

About

React components for Fluent UI layout styles

Alternatives

• Fluent UI styles

Contents

• Demo
• How to Install
• Components
  • Grid
  • Row
  • Col
• Example

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