\n\n## Features\n\n* Uses CSS3 Flexbox.\n* Supports vertical & horizontal layouts.\n* Supports fixed and fluid panes.\n* Configure everything using CSS!\n\n## Installation\n```bash\n$ npm install vue-multipane\n```\n\n## Using vue-multipane\n\nFirst, import `vue-multipane` into your Vue component.\n```js\nimport { Multipane, MultipaneResizer } from 'vue-multipane';\n\nexport default {\n // ...\n components: {\n MultiPane,\n MultiPaneResizer\n }\n}\n```\n\nThen, construct your split pane layout using multipane component.\n```html\n\n
Pane 1
\n \n
Pane 2
\n \n
Pane 3
\n\n```\n\n## Customizing pane layout\nYou can customize pane layouts using CSS.\n\n* Create vertical/horizontal layouts using `layout=\"vertical|horizontal\"` attribute.\n* Set initial pane size using `width|height` CSS property.\n* Set pane size constraints using `min-width|min-height|max-width|max-height` CSS property.\n* Create fixed/fluid combination panes by using `px|%` units.\n* Use `flex-grow: 1` for that one pane that should take all remaining space available on the multipane container.\n\nThis example below shows a combination of different styling properties you can apply to make the panes render the way you want it to:\n```html\n\n
Pane 1
\n \n
Pane 2
\n \n
Pane 3
\n\n\n```\n\n## Customizing resize handle\nBy default, vue-multipane creates an invisible 10px resize handle that sits in between 2 panes. You can customize the appearance of the resize handle to fit your needs.\n\nThis example below creates a 15px blue resize handle:\n\n```css\n.multipane.foo.layout-v .multipane-resizer {\n margin: 0; left: 0; /* reset default styling */\n width: 15px;\n background: blue;\n}\n\n.multipane.foo.layout-h .multipane-resizer {\n margin: 0; top: 0; /* reset default styling */\n height: 15px;\n background: blue;\n}\n\n```\n\n#### Optional resize handle\nYou can also add resize handle only specific panes by just adding `` next it.\n\n```html\n\n
Pane 1
\n
Pane 2
\n \n
Pane 3
\n\n```\n\n## Options\n\n** Multipane **\n\n| Property | Description | Type | Default |\n| -------------- | ---------------- | :--------: | :----------: |\n| layout | Determine layout of panes. | String [vertical, horizontal] |vertical |\n\n## Events\n\n** Multipane **\n\n| Event | Description | Returns |\n| ------------------ | ---------------- | :--------: |\n| paneresizestart | When user clicks on the resize handle to start resizing a pane. | pane, container, size |\n| paneresize | When user is resizing a pane. | pane, container, size |\n| paneresizestop | When user release the resize handle to stop resizing a pane. | pane, container, size |\n\n## License\n**[vue-multipane](https://github.com/yansern/vue-multipane)** by [Yan Sern](https://twitter.com/yansernio) licensed under [MIT](LICENSE).\n\n> PS: I would love to know if you're using vue-multipane. Tweet to me at [@yansernio](https://twitter.com/yansernio).\n","maintainers":[{"name":"yansern","email":"yansern@gmail.com"}],"time":{"modified":"2022-05-23T16:59:18.537Z","created":"2017-09-28T14:09:31.146Z","0.9.1":"2017-09-28T14:09:31.146Z","0.9.2":"2017-09-28T14:12:49.470Z","0.9.3":"2017-09-29T13:16:01.991Z","0.9.4":"2017-10-03T10:51:41.810Z","0.9.5":"2017-10-03T11:17:54.478Z"},"homepage":"https://github.com/yansern/vue-multipane/index.html","keywords":["vue","multipane","split pane","ui","resize","resizeable","layout","flexbox","components"],"repository":{"type":"git","url":"git+https://github.com/yansern/vue-multipane.git"},"author":{"name":"Yan Sern","email":"hey@yansern.io"},"bugs":{"url":"https://github.com/yansern/vue-multipane/issues"},"license":"MIT","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/yansern/vue-multipane/master/demo/preview.gif\")
\n