README
fluentui-react-grid
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