Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yansern/vue-multipane
Resizable split panes for Vue.js.
https://github.com/yansern/vue-multipane
flexbox resize splitpane ui-components vue vue-component
Last synced: about 2 months ago
JSON representation
Resizable split panes for Vue.js.
- Host: GitHub
- URL: https://github.com/yansern/vue-multipane
- Owner: yansern
- License: other
- Created: 2017-09-28T12:49:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-02T14:16:56.000Z (about 2 years ago)
- Last Synced: 2024-11-30T21:42:51.690Z (about 2 months ago)
- Topics: flexbox, resize, splitpane, ui-components, vue, vue-component
- Language: JavaScript
- Homepage: https://yansern.github.io/vue-multipane/
- Size: 543 KB
- Stars: 595
- Watchers: 14
- Forks: 126
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-multipane 
> Resizable split panes for [Vue.js](http://vuejs.org).
Check out the live demo.
## Features
* Uses CSS3 Flexbox.
* Supports vertical & horizontal layouts.
* Supports fixed and fluid panes.
* Configure everything using CSS!
## Installation
```bash
$ npm install vue-multipane
```
## Using vue-multipane
First, import `vue-multipane` into your Vue component.
```js
import { Multipane, MultipaneResizer } from 'vue-multipane';
export default {
// ...
components: {
MultiPane,
MultiPaneResizer
}
}
```
Then, construct your split pane layout using multipane component.
```html
Pane 1
Pane 2
Pane 3
```
## Customizing pane layout
You can customize pane layouts using CSS.
* Create vertical/horizontal layouts using `layout="vertical|horizontal"` attribute.
* Set initial pane size using `width|height` CSS property.
* Set pane size constraints using `min-width|min-height|max-width|max-height` CSS property.
* Create fixed/fluid combination panes by using `px|%` units.
* Use `flex-grow: 1` for that one pane that should take all remaining space available on the multipane container.
This example below shows a combination of different styling properties you can apply to make the panes render the way you want it to:
```html
Pane 1
Pane 2
Pane 3
```
## Customizing resize handle
By 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.
This example below creates a 15px blue resize handle:
```css
.multipane.foo.layout-v .multipane-resizer {
margin: 0; left: 0; /* reset default styling */
width: 15px;
background: blue;
}
.multipane.foo.layout-h .multipane-resizer {
margin: 0; top: 0; /* reset default styling */
height: 15px;
background: blue;
}
```
#### Optional resize handle
You can also add resize handle only specific panes by just adding `` next it.
```html
Pane 1
Pane 2
Pane 3
```
## Options
** Multipane **
| Property | Description | Type | Default |
| -------------- | ---------------- | :--------: | :----------: |
| layout | Determine layout of panes. | String [vertical, horizontal] |vertical |
## Events
** Multipane **
| Event | Description | Returns |
| ------------------ | ---------------- | :--------: |
| paneresizestart | When user clicks on the resize handle to start resizing a pane. | pane, container, size |
| paneresize | When user is resizing a pane. | pane, container, size |
| paneresizestop | When user release the resize handle to stop resizing a pane. | pane, container, size |
## License
**[vue-multipane](https://github.com/yansern/vue-multipane)** by [Yan Sern](https://twitter.com/yansernio) licensed under [MIT](LICENSE).
> PS: I would love to know if you're using vue-multipane. Tweet to me at [@yansernio](https://twitter.com/yansernio).