Null Pointer Micromanagement
    Wondering what’s next for npm?Check out our public roadmap! »

    @feizheng/react-layout-trbla

    1.0.1 • Public • Published

    react-layout-trbla

    Simply trbla layout for react.

    version license size download

    installation

    npm install -S @feizheng/react-layout-trbla

    update

    npm update @feizheng/react-layout-trbla

    properties

    Name Type Required Default Description
    className string false - The extended className for component.
    nodeName any false 'div' The container tag name.
    value enum false - The layout type.

    layouts

    value description
    la left -> auto
    lar left -> auto -> right
    ar auto -> right
    lr left -> right or justify
    ta top -> auto
    tab top -> auto -> bottom
    ab auto -> bottom
    tb top -> bottom or justify

    usage

    1. import css
    @import "~@feizheng/react-layout-trbla/dist/style.scss";
     
    // customize your styles: 
    $react-layout-trbla-options: ()
    1. import js
    import ReactDemokit from '@feizheng/react-demokit';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import ReactLayoutTrbla from '@feizheng/react-layout-trbla';
    import './assets/style.scss';
     
    const LAYOUT_MAPPING = {
      'la': 'left -> auto',
      'lar': 'left -> auto -> right',
      'ar': 'auto -> right',
      'lr': 'left -> right or justify',
      'ta': 'top -> auto',
      'tab': 'top -> auto -> bottom',
      'ab': 'auto -> bottom',
      'tb': 'top -> bottom or justify'
    };
     
    class App extends React.Component {
      state = {
        layouts: ReactLayoutTrbla.layouts,
        value: 'la'
      };
     
      get valueCount() {
        return this.state.value.length;
      }
     
      render() {
        const { value } = this.state;
        return (
          <ReactDemokit
            className="p-3 app-container"
            url="https://github.com/afeiship/react-layout-trbla">
            <div className="text-center ">
              <label htmlFor="sel" className="mr-10 text-white">
                Select a value:
              </label>
              <select
                id="sel"
                className="p-3"
                onChange={(e) => {
                  this.setState({ value: e.target.value });
                }}>
                {this.state.layouts.map((item) => (
                  <option key={item}>{item}</option>
                ))}
              </select>
            </div>
            <h1
              className="text-center text-white"
              style={{ fontSize: 100 }}>
              {LAYOUT_MAPPING[value]}
            </h1>
            <ReactLayoutTrbla value={value} className="mb-3">
              <div>start</div>
              <div>auto</div>
              {(this.valueCount === 3 || value === 'lr' || value === 'tb') && (
                <div>end</div>
              )}
            </ReactLayoutTrbla>
          </ReactDemokit>
        );
      }
    }
     
    ReactDOM.render(<App />, document.getElementById('app'));
     

    documentation

    license

    Code released under the MIT license.

    Install

    npm i @feizheng/react-layout-trbla

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    21.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar