Asva double panel
Double panel layout for vue.js.
The gist
Imagine modal. Then modal inside of modal. This library does the same, just with two panels. Parent on the left - child on the right. Child on the left - parent on the right. Makes no sense? Check demo.
Usage examples
Sponsors
Install
- npm:
npm install -D asva-double-panel
- yarn:
yarn add -D asva-double-panel
Commands
- yarn dev - run dev server (then go to
/#/demo
) - yarn dist - bundle distribution package for npm
- yarn demo - bundle demo
How to use
First - create a double panel wrapper component.
In example ListPanelExample and CloudPanelExample are root panels (displayed by default).
Let's dive into panel component structure. 2 things to notice here:
- Register panelMixin in your component to make it a panel component.
- Add value prop to receive payload (toss data from one panel to another).
Test value from prop: {{ value.test }} Close Close child Create Switch position Position: {{$panel.position}} Toggle full-width Full width: {{$panel.isFullWidth}}
Styles
You have to import styles for double panel to function properly.
- css -
~asva-double-panel/dist/css/main.css
Api
$panel.close()
- close current panel and its descendants.$panel.closeChild()
- close only panel descendants.$panel.switchPosition()
- move panel from left to right and vice-versa.$panel.toggleFullWidth()
- widen the panel to occupy full space (useful for prints and tables).
Create new panel
this.$panel.create(component, [payload, [options]])
, where
- component - component object (the thing you get via
import Component from 'Component.vue'
). If you want to create same component recursively - usethis.constructor
. - payload - any data you want to provide into newly created component.
- options - additional options, if you don't provide any - defaults will be used.
Options:
replaceSelf
- Don't create new panel on top, instead replace current one.fullWidth
[Boolean, default: false] - Create panel in fullWidth mode.reuse
[Boolean, default: false] - If true, and panel with current component already exists on top of current one - we'll just refresh payload (useful for iframe reuse).position
['same' | 'opposite', default 'opposite'] - Defines whether new panel should be created directly on top of current one in opposite side.
Features
- Two panel layout.
- Nested panels.
- Internal panel component.
Feedback
If you feel something is not right - please leave feedback. I might even tweak library a bit for you needs if you case is common. : 3
Licence
MIT