React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS Docking Layout demo. jqxDockingLayout Fluid Size Example. The width of the docking layout and both dimensions of its groups in this demo are in Percentages.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlayout.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdockinglayout.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
    <style type="text/css">
        .jqx-layout-group-auto-hide-content-vertical {
            width: 200px;
        }
        html, body, #app {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 97%;
        }
    </style>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS Docking Layout demo. jqxDockingLayout Fluid Size Example. The width of the docking layout and both dimensions of its groups in this demo are in Percentages.
    </div>
    <div id="app"></div>
    <script src="../build/dockinglayout_fluidsize.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxDockingLayout from '../../../jqwidgets-react/react_jqxdockinglayout.js';

class App extends React.Component {
    render() {
        var layout = [{
            type: 'layoutGroup',
            orientation: 'horizontal',
            items: [{
                type: 'layoutGroup',
                orientation: 'vertical',
                width: '60%',
                items: [{
                    type: 'documentGroup',
                    height: '50%',
                    minHeight: '25%',
                    items: [{
                        type: 'documentPanel',
                        title: 'Document 1',
                        contentContainer: 'Document1Panel'
                    }, {
                        type: 'documentPanel',
                        title: 'Document 2',
                        contentContainer: 'Document2Panel'
                    }]
                }, {
                    type: 'tabbedGroup',
                    height: '50%',
                    pinnedHeight: '10%',
                    items: [{
                        type: 'layoutPanel',
                        title: 'Error List',
                        contentContainer: 'ErrorListPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Output',
                        contentContainer: 'OutputPanel',
                        selected: true
                    }]
                }]
            }, {
                type: 'tabbedGroup',
                width: '40%',
                items: [{
                    type: 'layoutPanel',
                    title: 'Solution Explorer',
                    contentContainer: 'SolutionExplorerPanel'
                }, {
                    type: 'layoutPanel',
                    title: 'Properties',
                    contentContainer: 'PropertiesPanel'
                }]
            }]
        }];
        return (
            <JqxDockingLayout width={'100%'} height={'100%'} layout={layout}>
                <div data-container="Document1Panel">
                    Document 1 content
                </div>
                <div data-container="Document2Panel">
                    Document 2 content
                </div>
                <div data-container="ErrorListPanel">
                    List of errors
                </div>
                <div data-container="OutputPanel">
                    Output
                </div>
                <div data-container="SolutionExplorerPanel">
                    Solution structure
                </div>
                <div data-container="PropertiesPanel">
                    List of properties
                </div>
            </JqxDockingLayout>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));