React UI Components
Show Demo List
|
|
|
ReactJS Splitter demo. This demonstration shows how to use the jqxSplitter API.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title id='Description'>
ReactJS Splitter demo. This demonstration shows how to use the jqxSplitter API.
</title>
<meta name="description" content="This React Splitter demo showcases how to use Splitter's API."/>
<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/jqxsplitter.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
<div class="example-description" style="margin-bottom: 3em">
ReactJS Splitter demo. This demonstration shows how to use the jqxSplitter API.
</div>
<div id="app"></div>
<script src="../build/splitter_api.bundle.js"></script>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import JqxSplitter from '../../../jqwidgets-react/react_jqxsplitter.js';
import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.expandFirstButton.on('click', () => {
let panels = this.refs.mainSplitter.panels();
panels[0].collapsible = true;
panels[1].collapsible = false;
this.refs.mainSplitter.panels(panels);
this.refs.mainSplitter.expand();
});
this.refs.expandLastButton.on('click', () => {
let panels = this.refs.mainSplitter.panels();
panels[0].collapsible = false;
panels[1].collapsible = true;
this.refs.mainSplitter.panels(panels);
this.refs.mainSplitter.expand();
});
this.refs.collapseFirstButton.on('click', () => {
let panels = this.refs.mainSplitter.panels();
panels[0].collapsible = true;
panels[1].collapsible = false;
this.refs.mainSplitter.panels(panels);
this.refs.mainSplitter.collapse();
});
this.refs.collapseLastButton.on('click', () => {
let panels = this.refs.mainSplitter.panels();
panels[0].collapsible = false;
panels[1].collapsible = true;
this.refs.mainSplitter.panels(panels);
this.refs.mainSplitter.collapse();
});
this.refs.enableButton.on('click', () => {
this.refs.mainSplitter.enable();
});
this.refs.disableButton.on('click', () => {
this.refs.mainSplitter.disable();
});
this.refs.orientationButton.on('click', () => {
let currentOrientation = this.refs.mainSplitter.orientation();
if (currentOrientation === 'vertical') {
this.refs.mainSplitter.orientation('horizontal');
} else {
this.refs.mainSplitter.orientation('vertical');
}
});
}
render() {
let buttonStyle = { float: 'left', marginLeft: 5 };
return (
<div>
<JqxButton ref='orientationButton' style={buttonStyle} value='Orientation' width={90} />
<JqxButton ref='expandFirstButton' style={buttonStyle} value='Expand first' width={90} />
<JqxButton ref='expandLastButton' style={buttonStyle} value='Expand last' width={90} />
<JqxButton ref='collapseFirstButton' style={buttonStyle} value='Collapse first' width={95} />
<JqxButton ref='collapseLastButton' style={buttonStyle} value='Collapse last' width={95} />
<JqxButton ref='enableButton' style={buttonStyle} value='Enable' width={80} />
<JqxButton ref='disableButton' style={{ float: 'left', margin: '0 0 20px 5px' }} value='Disable' width={80} />
<JqxSplitter ref='mainSplitter' style={{ marginTop: 20 }}
width={850} height={600}
panels={[{ size: 250 }]}
>
<div style={{ backgroundColor: '#F5FFF2' }}></div>
<div style={{ backgroundColor: '#EBF1FF' }}></div>
</JqxSplitter >
</div >
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
