Package Exports

@feizheng/react-layout-trbla

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@feizheng/react-layout-trbla) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-layout-trbla

Simply trbla layout for react.

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

import css

@import "~@feizheng/react-layout-trbla/dist/style.scss";

// customize your styles:
$react-layout-trbla-options: ()

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

https://afeiship.github.io/react-layout-trbla/

license

Code released under the MIT license.