msplit

A VueJs Component to show resizable multi-pan container

Description

A resizable multi-pane vue component implemented with typescript. Support the following features:

• Supports toggle visibility for panes.
• Supports toggle maximization for a pane.
• Supports any number of panes.
• Adjust pane size when the window resizes.
• Horizontal and Vertical mode.
• Support device with touch interface.

Usage

import msplit from 'msplit';

Vue.use(msplit);

  <msplit :vertical='true' :maxPane='maxPane'>
    <div slot="p31" :show='s31' :grow='20' :min=250  :max=500> Pane31 </div>
    <div slot="p32" :show='s32'> Pane32 </div>
    <div slot="p33">Pane33 </div>
  </msplit>

You can see the full example in the MSplitTest.

Live Demo

http://jianwu.github.io/msplit/

License

Copyright 2018-2019 Jianwu Chen
Author/Developer: Jianwu Chen