react-material-responsive-grid
Advanced tools
Comparing version 1.0.0 to 1.1.0
@@ -58,6 +58,2 @@ 'use strict'; | ||
if (className) { | ||
classNames.push(className); | ||
} | ||
// size specific properties | ||
@@ -174,2 +170,7 @@ if (xs4) { | ||
// specified class is added last | ||
if (className) { | ||
classNames.push(className); | ||
} | ||
if (classNames.length) { | ||
@@ -176,0 +177,0 @@ newProps.className = classNames.filter(function (cssName) { |
@@ -26,7 +26,19 @@ 'use strict'; | ||
fixed = _ref.fixed, | ||
marginless = _ref.marginless, | ||
tagName = _ref.tagName, | ||
other = (0, _objectWithoutProperties3.default)(_ref, ['className', 'fixed', 'tagName']); | ||
other = (0, _objectWithoutProperties3.default)(_ref, ['className', 'fixed', 'marginless', 'tagName']); | ||
var classNames = [(0, _utils.getClass)('grid')]; | ||
if (fixed === 'left') { | ||
classNames.push((0, _utils.getClass)('fixed-left')); | ||
} else if (fixed === 'center') { | ||
classNames.push((0, _utils.getClass)('fixed-center')); | ||
} | ||
if (marginless) { | ||
classNames.push((0, _utils.getClass)('marginless')); | ||
} | ||
// specified class is added last | ||
if (className) { | ||
@@ -36,8 +48,2 @@ classNames.push(className); | ||
if (fixed === 'left') { | ||
classNames.push((0, _utils.getClass)('grid-fixed-left')); | ||
} else if (fixed === 'center') { | ||
classNames.push((0, _utils.getClass)('grid-fixed-center')); | ||
} | ||
return _react2.default.createElement(tagName, (0, _extends3.default)({ | ||
@@ -52,3 +58,4 @@ className: classNames.filter(function (cssName) { | ||
className: _react.PropTypes.string, | ||
fixed: _react.PropTypes.string, | ||
fixed: _react.PropTypes.oneOf(['left', 'center']), | ||
marginless: _react.PropTypes.bool, | ||
tagName: _react.PropTypes.string | ||
@@ -60,2 +67,3 @@ }; | ||
fixed: null, | ||
marginless: false, | ||
tagName: 'div' | ||
@@ -62,0 +70,0 @@ }; |
@@ -39,6 +39,2 @@ 'use strict'; | ||
if (className) { | ||
classNames.push(className); | ||
} | ||
if (reverse) { | ||
@@ -58,2 +54,7 @@ classNames.push((0, _utils.getClass)('reverse')); | ||
// specified class is added last | ||
if (className) { | ||
classNames.push(className); | ||
} | ||
return _react2.default.createElement(tagName || 'div', (0, _extends3.default)({ | ||
@@ -60,0 +61,0 @@ className: classNames.filter(function (cssName) { |
{ | ||
"name": "react-material-responsive-grid", | ||
"author": "Ken Gregory", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "A set of React components implementing the material-responsive-grid CSS framework.", | ||
@@ -22,3 +22,3 @@ "main": "./index.js", | ||
"babel-runtime": "^6.23.0", | ||
"material-responsive-grid": "^1.0.1", | ||
"material-responsive-grid": "^1.1.0", | ||
"react": "^15.4.2", | ||
@@ -25,0 +25,0 @@ "react-dom": "^15.4.2" |
@@ -5,2 +5,8 @@ # React Material Responsive Grid # | ||
## Installation ## | ||
``` | ||
npm i react-material-responsive-grid --save | ||
``` | ||
## Components ## | ||
@@ -15,12 +21,15 @@ | ||
- Adheres to [Material Design responsive UI](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints) standards for screens at or exceeding 1600 px | ||
- Fluid by default, allows the Grid to continue growing | ||
- Fluid by default, allows the Grid to continue | ||
- Margin by default, preserves the outer padding for outer columns, preventing a row of content from spanning edge to edge | ||
- Optionally fixed width for viewports larger than 1599 px, centered or left aligned | ||
- Optionally marginless, allow row content to span from edge to edge | ||
#### Properties #### | ||
Name | Default | Value | Description | ||
--------- | ------- | ---------------------- | ----------------------------------------------------------------------------- | ||
fixed | | { *left* or *center* } | Grid is fixed width and aligned as specified for viewports larger than 1599px | ||
tagName | *div* | | The type of tag to use when rendering this element | ||
className | | | The CSS class name of this element | ||
Name | Default | Value | Description | ||
---------- | ------- | ---------------------- | ----------------------------------------------------------------------------- | ||
fixed | | { *left* or *center* } | Grid is fixed width and aligned as specified for viewports larger than 1599px | ||
marginless | *false* | Boolean | Grid has no margin, row content can span edge to edge | ||
tagName | *div* | | The type of tag to use when rendering this element | ||
className | | | The CSS class name of this element | ||
@@ -27,0 +36,0 @@ |
23571
402
139