Nemo's Parental Misguidance

    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 />);

    Install

    npm i rax-grid

    DownloadsWeekly Downloads

    14

    Version

    0.6.5

    License

    BSD-3-Clause

    Unpacked Size

    145 kB

    Total Files

    19

    Last publish

    Collaborators

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