/ Layout

Angular Material flex layout attributes without all the other stuff

Angular Material flex layout attributes without all the other stuff

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)

GitHub