rax-grid
TypeScript icon, indicating that this package has built-in type declarations

0.6.5 • Public • Published

Grid

npm

Simple layout of the label, providing external layout container label Row, column Col, multi row layout reference MultiRow

Long list of requirements do not use a large MultiRow components for a unified layout, without a complete large label wrap will be better.

Install

$ npm install rax-grid --save

Import

import { Row, Col } from 'rax-grid';

Example

Equal width layout

The 3 column:

<Row>
  <Col>列1</Col>
  <Col>列2</Col>
  <Col>列3</Col>
</Row>

The 2 column:

<Row>
  <Col>列1</Col>
  <Col>列2</Col>
</Row>

Custom column width

const styles = {
  col1: {
    flex: 1
  },
  col2: {
    flex: 2
  },
}
<Row>
  <Col style={styles.col1}>flex: 1</Col>
  <Col style={styles.col2}>flex: 2</Col>
</Row>
// demo
import { createElement, render, Component } from 'rax';
import { Row, Col } from 'rax-grid';
 
const styles = {
  container: {
    width: 750
  },
  row: {
    height: 400
  }
};
 
class App extends Component {
  render() {
    return (
      <Row style={[styles.container, styles.row]}>
        <Col style={{flex: 1, backgroundColor: 'red'}}>Col1</Col>
        <Col style={{flex: 1, backgroundColor: 'green'}}>Col2</Col>
        <Col style={{flex: 1, backgroundColor: 'blue'}}>Col3</Col>
      </Row>
    );
  }
}
 
render(<App />);

Dependencies (1)

Dev Dependencies (1)

Package Sidebar

Install

npm i rax-grid

Weekly Downloads

4

Version

0.6.5

License

BSD-3-Clause

Unpacked Size

145 kB

Total Files

19

Last publish

Collaborators

  • zeroling
  • wintercn
  • yuanyan
  • yacheng
  • liangzhi.llz