wix-style-react
Version:
wix-style-react
186 lines (184 loc) • 5.07 kB
JavaScript
import React from 'react';
import { Container, Row, Col } from 'wix-style-react/Grid';
import Card from 'wix-style-react/Card';
import styles from './ExampleGrid.scss';
export default (function () {
return React.createElement(
'div',
{ className: styles.exampleContainer },
React.createElement(
Container,
null,
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 8 },
React.createElement(
Card,
null,
React.createElement(Card.Header, { subtitle: 'Card Subtitle', title: 'Card Header' }),
React.createElement(
Card.Content,
null,
React.createElement(
Container,
{ fluid: true },
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 4 },
text('<Col span={4}/>')
),
React.createElement(
Col,
{ span: 4 },
text('<Col span={4}/>')
),
React.createElement(
Col,
{ span: 4 },
text('<Col span={4}/>')
)
),
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 6 },
text('<Col span={6}/>')
)
),
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 6 },
text('<Col span={6}/>')
),
React.createElement(
Col,
{ span: 3 },
text('<Col span={3}/>')
),
React.createElement(
Col,
{ span: 3 },
text('<Col span={3}/>')
)
)
)
)
)
),
React.createElement(
Col,
{ span: 4 },
React.createElement(
Card,
null,
React.createElement(Card.Header, { title: 'Side Card' }),
React.createElement(
Card.Content,
null,
React.createElement(
Container,
{ fluid: true },
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 12 },
text('<Col span={12}/>')
)
),
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 6 },
text('<Col span={6}/>')
),
React.createElement(
Col,
{ span: 6 },
text('<Col span={6}/>')
)
),
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 12 },
text('<Col span={12}/>')
)
)
)
)
)
)
),
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 12 },
React.createElement(
Card,
null,
React.createElement(Card.Header, { title: 'Full width Card' }),
React.createElement(
Card.Content,
null,
React.createElement(
Container,
{ fluid: true },
React.createElement(
Row,
null,
React.createElement(
Col,
{ span: 4 },
text('<Col span={4}/>')
),
React.createElement(
Col,
{ span: 4 },
text('<Col span={4}/>')
),
React.createElement(
Col,
{ span: 4 },
text('<Col span={4}/>')
)
)
)
)
)
)
)
)
);
});
function text(children) {
return React.createElement('div', {
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'rgba(0,0,0,.1)',
width: '100%',
height: '50px'
},
children: children
});
}