react-material-layout

Angular Material's "layout" attributes prefixed with data-

Usage no npm install needed!

<script type="module">
  import reactMaterialLayout from 'https://cdn.skypack.dev/react-material-layout';
</script>

README

React Material Layout

Angular Material flex layout attributes without all the other stuff. Prefixed with data- for react.

npm install react-material-layout

bower install react-material-layout

Data Attribute Example

// You can either build css with webpack, or simply link in the HTML

// HTML link:
// <link rel="stylesheet" href="https://raw.githubusercontent.com/billjohnston/react-material-layout/master/dist/react-material-layout.min.css">

// Webpack:
// import 'react-material-layout/dist/react-material-layout.min.css'

class FlexboxTest extends React.Component{
    render() {
        return (
            <div data-flex data-layout="column" data-layout-align="space-between">
                <div data-flex data-layout="row" data-layout-align="space-between">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
                <div data-flex data-layout="row" data-layout-align="space-around center">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
                <div data-flex data-layout="row" data-layout-align="start center">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
                <div data-flex data-layout="row" data-layout-align="end center">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
            </div>
        )
    }
}

React.render(<FlexboxTest />, document.getElementById('container'))

Fiddle

Docs (remember to prefix all attributes with data-)

Class based Example

// HTML link:
// <link rel="stylesheet" href="https://raw.githubusercontent.com/billjohnston/react-material-layout/master/dist/react-material-class-layout.min.css">

// Webpack:
// import 'react-material-layout/dist/react-material-class-layout.min.css'

class FlexboxTest extends React.Component{
    render() {
        return (
            <div className="flex layout-column layout-align-space-between">
                <div className="flex layout-row layout-align-space-between">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
                <div className="flex layout-row layout-align-space-around-center">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
                <div className="flex layout-row layout-align-start-center">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
                <div className="flex layout-row layout-align-end-center">
                    <div className="blue-box">1</div>
                    <div className="blue-box">2</div>
                    <div className="blue-box">3</div>
                </div>
            </div>
        )
    }
}

React.render(<FlexboxTest />, document.getElementById('container'))

Fiddle

Docs (use classes instead of attributes)

Build

npm run build

You will be prompted for a release version (currently 1.1.7)