uxcore-splitter

a dynamic layout of resizeable and collapsible panes

Usage no npm install needed!

<script type="module">
  import uxcoreSplitter from 'https://cdn.skypack.dev/uxcore-splitter';
</script>

README

uxcore-splitter

React splitter

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

Development

git clone https://github.com/uxcore/uxcore-splitter
cd uxcore-splitter
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-splitter
cd uxcore-splitter
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/splitter

Contribute

Yes please! See the CONTRIBUTING for details.

API

Props

Splitter

Name Type Required Default Comments
prefixCls string true uxcore-splitter className's prefix
className string false '' custom class name
orientation string false horizontal layout type: vertical or horizontal
onResize func false function({offsets, pane, index}) Triggered when the pane is resized.

Pane

Name Type Required Default Comments
defaultSize number or auto false 'auto' the pane's default size
resizable boolean false false whether the pane can be resize by drag
collapsible boolean false false whether the pane can be collapsed
collapse string false null collapsed or uncollapsed
defaultCollapse string false null collapsed or uncollapsed
onCollapse func false (collapsed) => {} trigger when collapsed changed