Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jb1905/fluentui-react-grid
🚧 React components for Fluent UI layout styles
https://github.com/jb1905/fluentui-react-grid
col components fluent grid layout library microsoft react row styles ui
Last synced: 4 months ago
JSON representation
🚧 React components for Fluent UI layout styles
- Host: GitHub
- URL: https://github.com/jb1905/fluentui-react-grid
- Owner: JB1905
- License: mit
- Created: 2020-10-01T17:44:02.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-04T01:38:04.000Z (about 2 years ago)
- Last Synced: 2024-04-23T21:37:25.767Z (10 months ago)
- Topics: col, components, fluent, grid, layout, library, microsoft, react, row, styles, ui
- Language: TypeScript
- Homepage: https://jb1905.github.io/fluentui-react-grid/
- Size: 2.73 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [fluentui-react-grid](https://github.com/JB1905/fluentui-react-grid)
[](https://www.npmjs.com/package/fluentui-react-grid)
[](https://www.npmjs.com/package/fluentui-react-grid)
[](https://www.npmjs.com/package/fluentui-react-grid)
[](https://codecov.io/gh/JB1905/fluentui-react-grid)
[](https://app.travis-ci.com/github/JB1905/fluentui-react-grid)
[](https://bundlephobia.com/result?p=fluentui-react-grid)
## About
React components for Fluent UI layout styles
### Demo
[**Playground – play with the library in Storybook**](https://jb1905.github.io/fluentui-react-grid/)
### Alternatives
- [Fluent UI styles](https://developer.microsoft.com/en-us/fluentui#/styles/web/layout)
## Contents
- [How to Install](#how-to-install)
- [Components](#components)
- [Grid](#grid)
- [Row](#row)
- [Col](#col)
- [Example](#example)
## How to Install
First, install the library in your project by npm:
```sh
$ npm install fluentui-react-grid
```
Or Yarn:
```sh
$ yarn add fluentui-react-grid
```
You also need to include CSS styles (in the HTML header section, e.g. in index.html):
```html
```
## Getting Started
**Import the default component and use it as Compound Component:**
```jsx
import Grid from 'fluentui-react-grid';
// ...
const App = () => {
return (
Col content here...
{/* ... */}
{/* ... */}
);
};
// ...
```
**Or import all components:**
```jsx
import { Grid, Row, Col } from 'fluentui-react-grid';
// ...
const App = () => {
return (
Col content here...
{/* ... */}
{/* ... */}
);
};
// ...
```
## Components
### Grid
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)
_By default grid order is `dir="ltr"` – (order from left to right). You can change it to `dir="rtl"` – (right to left/reversed order) or set `dir="auto"` to remove (it will break the layout)_
### Row
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)
### Col
#### Available options
[HTML div element props](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) and dedicated params based on Fluent UI class names
[Check corresponding Fluent UI class names here](https://developer.microsoft.com/en-us/fluentui#/styles/web/layout)
| Name | 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
```jsx
A
B
```
### Inheritance
```jsx
Example
```
### Push and pull
```jsx
First in code
Second in code
```
### Visibility
```jsx
Visible on smaller screens
Visible on larger screens
```
### Without Compound Components
```jsx
A
B
```
## License
This project is licensed under the MIT License © 2020-present Jakub Biesiada