FlexLayout example

FlexLayout example

by nodpekar

HTML

<script src="https://rawgit.com/caplin/FlexLayout/demos/demos/v0.30/flexlayout.js"></script>
<link rel="stylesheet" href="https://rawgit.com/caplin/FlexLayout/demos/demos/v0.30/style/dark.css">
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  height: 100%;
    width: 100%;
    position: fixed;
    margin: 0px;
}

#container {
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            position: absolute;
            overflow: hidden;
            font-size: 12px;
            font-family: Arial, sans-serif;

        }
       .panel {
          height:100%;
          display:flex;
          justify-content:center;
          align-items:center;
          background-color:black;
          border:1px solid #555;
          box-sizing: border-box;
        }

React

var json = {
    global: {tabEnableClose:false},
    borders:[
    		{
	        "type": "border",
          "location":"bottom",
          "size": 100,
          "children": [
              {
              "type": "tab",
              "name": "four",
              "component": "text"
              }
            ]
        },
    		{
          "type": "border",
          "location":"left",
          "size": 100,
          "children": []
         }
    ],
    layout: {
        "type": "row",
        "weight": 100,
        "children": [
            {
                "type": "tabset",
                "weight": 50,
                "selected": 0,
                "children": [
                    {
                        "type": "tab",
                        "name": "One",
                        "component": "text"
                    }
                ]
            },
            {
                "type": "tabset",
                "weight": 50,
                "selected": 0,
                "children": [
                    {
                        "type": "tab",
                        "name": "Two",
                        "component": "text"
                    },
                    {
                        "type": "tab",
                        "name": "Three",
                        "component": "text"
                    }
                ]
            }
        ]
    }
};

class Main extends React.Component {

    constructor(props) {
    	super(props);
      this.state = {model: FlexLayout.Model.fromJson(json)};
    }

    factory(node) {
        var component = node.getComponent();
        if (component === "text") {
            return (<div className="panel">Panel {node.getName()}</div>);
        }
    }

    render() {
        return (
            <FlexLayout.Layout
                model={this.state.model}
                factory={this.factory.bind(this)}/>
        );
    }
}

ReactDOM.render(<Main/>, document.getElementById("container"));