1.1.2 • Published 3 years ago
@jswork/react-layout-trbla v1.1.2
react-layout-trbla
Simply trbla layout for react.
installation
npm install -S @jswork/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. |
align | enum | false | 'initial' | The flex layout align-items. |
wrap | bool | false | false | The flex layout flex-wrap. |
usage
import css
// or use sass @import '~@jswork/wsui-layout-trbla/dist/index.scss'; @import "~@jswork/react-layout-trbla/dist/style.scss"; // customize your styles: $react-layout-trbla-options: ()
import js
import ReactDemokit from '@jswork/react-demokit'; import React from 'react'; import ReactDOM from 'react-dom'; import ReactLayoutTrbla from '@jswork/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: 60 }}> {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> <h1>Wrap: true</h1> <ReactLayoutTrbla value="lr" wrap className="is-list"> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> </ReactLayoutTrbla> <h1>Wrap: false</h1> <ReactLayoutTrbla value="lr" className="is-list"> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> <div className="is-item"> item </div> </ReactLayoutTrbla> </ReactDemokit> ); } } ReactDOM.render(<App />, document.getElementById('app'));
documentation
license
Code released under the MIT license.