FlexLayout example

FlexLayout example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://rawgit.com/caplin/FlexLayout/demos/demos/v0.25/flexlayout.js"></script>
<link rel="stylesheet" href="https://rawgit.com/caplin/FlexLayout/demos/demos/v0.25/light.css">
<script src="https://rawgit.com/caplin/FlexLayout/demos/demos/v0.25/images"></script>
<script src="https://rawgit.com/caplin/FlexLayout/demos/demos/v0.25/images/close.png"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

#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:#f8f8f8;
          border:1px solid #eee;
          box-sizing: border-box;
        }

JavaScript 1.7

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"
                    }
                ]
            }
        ]
    }
};

var Main = React.createClass({

    getInitialState: function() {
        return {model: FlexLayout.Model.fromJson(json)};
    },

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

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

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