joyent-portal/ui/src/components/column
Sérgio Ramos f1917acae1 no in embeds
2016-10-26 17:33:40 +01:00
..
index.js use some common joyent lint rules 2016-10-26 10:51:40 +01:00
readme.md no in embeds 2016-10-26 17:33:40 +01:00
style.css Grid - using varibale in for loop when creating grid classes 2016-10-25 17:24:43 +01:00

<Column>

demo

const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('./index');

const styles = {
  base: {
    backgroundColor: '#FFEBEE'
  },
  row: {
    backgroundColor: '#EF5350'
  },
  column: {
    backgroundColor: '#B71C1C',
    textAlign: 'center',
    color: 'white'
  }
};

nmodule.exports = ReactDOM.renderToString(
  <Base style={styles.base}>
    <Row style={styles.row} around>
      <Column style={styles.column} xs={2}>1</Column>
      <Column style={styles.column} xs={2}>2</Column>
      <Column style={styles.column} xs={2}>3</Column>
    </Row>
  </Base>
);

usage

const React = require('react');
const Container = require('ui/container');
const Row = require('ui/row');
const Column = require('ui/column');

module.exports = () => {
  return (
    <Row around>
      <Column xs={2}>1</Column>
      <Column xs={2}>2</Column>
      <Column xs={2}>3</Column>
    </Row>
  );
};