FlexLayout example

FlexLayout example

by ndanger61

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.07/flexlayout.js"></script>
<link rel="stylesheet" href="https://rawgit.com/caplin/FlexLayout/demos/demos/v0.07/dark.css">
<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:gray;
        }

JavaScript 1.7

var json = {
    global: {},
    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"));