react-flex-material
v1.1.0
Published
Flex component built for React based on Angular Material Flex Layout
Downloads
24
Maintainers
Readme
react-flex-material
Flex component built for React based on Angular Material Flex Layout which's features provide sugar to enable developers to more easily create modern, responsive layouts on top of CSS3 flexbox.
Installation
react-flex-material is distributed via npm:
$ npm i -S react
$ npm i -S react-flex-material
Configuration
There are several ways to load react-flex-material. Preferable way is using webpack
Webpack with css-loader
import React from 'react';
import {Flex} from 'react-flex-material';
...
Webpack configuration
...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
...
In this case required styles will be loaded automatically.
Webpack with css-modules
import React from 'react';
import {Flex} from 'react-flex-material/modules';
...
And webpack configuration
...
module: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]!postcss-loader!sass-loader')
}],
postcss: () => [autoprefixer()]
...
You will need a couple of loaders for webpack:
npm install node-sass sass-loader postcss postcss-loader
Including postcss for autoprefixer to make more browser compatible CSS.
Using library without webpack
In this case you load library without styles
import React from 'react';
import {Flex} from 'react-flex-material/lib/flex';
...
And then load them separately
<link rel="stylesheet" href="node_modules/react-flex-material/lib/flex.css">
Documentation
The library is based on Angular Material Flex Layout. So you can use their documentation as a main source.
Only one change. Since this library is for React, we are using camelCased
style instead of snake-cased
.
Base attributes are 'layout', 'flex', 'order', 'offset', 'align', 'hide', 'show'
Responsive modifiers '', 'Xs', 'GtXs', 'Sm', 'GtSm', 'Md', 'GtMd', 'Lg', 'GtLg'
Some other attributes 'layoutWrap', 'layoutNoWrap', 'layoutFill', 'layoutMargin', 'layoutPadding'
So you'll get 'layoutXs', 'layoutGtSm', 'flexGtXs', 'flexGtMd', 'orderSm'
etc
The value for attributes is the same to Angular Material Flex Layout
<Flex flex flexGtSm="75"> ... </Flex>
<Flex layoutGtXs="row"> ... </Flex>
<Flex layout align="space-between center"> ... </Flex>
Examples
Library has only one Main component called Flex
.
By default Flex
is just a div
. But you can change it via tag
attribute
<Flex tag="span"> ... </Flex>
Basic row:
<Flex layout="row">
<Flex flex>Col 1</Flex>
<Flex flex>Col 2</Flex>
</Flex>
For row layout, attribute value could be omitted:
<Flex layout>
<Flex flex>Col 1</Flex>
<Flex flex>Col 2</Flex>
</Flex>
Row layout with equal columns:
<Flex layout>
<Flex flex>Col 1</Flex>
<Flex flex>Col 2</Flex>
</Flex>
Row layout with a specific columns width
<Flex layout>
<Flex flex="20">
Col 1
</Flex>
<Flex flex="80">
Col 2
</Flex>
</Flex>
Row layout with a specific alignment
<Flex layout align="space-between center">
<div>Col 1</div>
<div>Col 2</div>
</Flex>
Column layout with a specific alignment
Important: use it only if you need a specific alignment. <Flex layout="column" />
is the same to <Flex />
by default.
<Flex layout="column" align="center center">
<div>
Row 1
</div>
<div>
Row 2
</div>
</Flex>
Special attribute for Flex
called divider
.
If you want to add some space between components.
<Flex layout align="space-between center">
<Flex flex>Col 1</Flex>
<Flex divider />
<Flex flex>Col 2</Flex>
</Flex>