wix-style-react
Version:
wix-style-react
203 lines (192 loc) • 6.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Grid = require('wix-style-react/Grid');
var _Card = require('wix-style-react/Card');
var _Card2 = _interopRequireDefault(_Card);
var _ExampleGrid = require('./ExampleGrid.scss');
var _ExampleGrid2 = _interopRequireDefault(_ExampleGrid);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function () {
return _react2.default.createElement(
'div',
{ className: _ExampleGrid2.default.exampleContainer },
_react2.default.createElement(
_Grid.Container,
null,
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 8 },
_react2.default.createElement(
_Card2.default,
null,
_react2.default.createElement(_Card2.default.Header, { subtitle: 'Card Subtitle', title: 'Card Header' }),
_react2.default.createElement(
_Card2.default.Content,
null,
_react2.default.createElement(
_Grid.Container,
{ fluid: true },
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 4 },
text('<Col span={4}/>')
),
_react2.default.createElement(
_Grid.Col,
{ span: 4 },
text('<Col span={4}/>')
),
_react2.default.createElement(
_Grid.Col,
{ span: 4 },
text('<Col span={4}/>')
)
),
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 6 },
text('<Col span={6}/>')
)
),
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 6 },
text('<Col span={6}/>')
),
_react2.default.createElement(
_Grid.Col,
{ span: 3 },
text('<Col span={3}/>')
),
_react2.default.createElement(
_Grid.Col,
{ span: 3 },
text('<Col span={3}/>')
)
)
)
)
)
),
_react2.default.createElement(
_Grid.Col,
{ span: 4 },
_react2.default.createElement(
_Card2.default,
null,
_react2.default.createElement(_Card2.default.Header, { title: 'Side Card' }),
_react2.default.createElement(
_Card2.default.Content,
null,
_react2.default.createElement(
_Grid.Container,
{ fluid: true },
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 12 },
text('<Col span={12}/>')
)
),
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 6 },
text('<Col span={6}/>')
),
_react2.default.createElement(
_Grid.Col,
{ span: 6 },
text('<Col span={6}/>')
)
),
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 12 },
text('<Col span={12}/>')
)
)
)
)
)
)
),
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 12 },
_react2.default.createElement(
_Card2.default,
null,
_react2.default.createElement(_Card2.default.Header, { title: 'Full width Card' }),
_react2.default.createElement(
_Card2.default.Content,
null,
_react2.default.createElement(
_Grid.Container,
{ fluid: true },
_react2.default.createElement(
_Grid.Row,
null,
_react2.default.createElement(
_Grid.Col,
{ span: 4 },
text('<Col span={4}/>')
),
_react2.default.createElement(
_Grid.Col,
{ span: 4 },
text('<Col span={4}/>')
),
_react2.default.createElement(
_Grid.Col,
{ span: 4 },
text('<Col span={4}/>')
)
)
)
)
)
)
)
)
);
};
function text(children) {
return _react2.default.createElement('div', {
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'rgba(0,0,0,.1)',
width: '100%',
height: '50px'
},
children: children
});
}