Window Component for Vue.js. This package is an implementation of window UI for PC environment as a Vue Component.
Recent web applications are mainly for mobile environments, window UI is no longer mainstream. However, window UI is still useful for professional web applications for PC environments. This package is an implementation of window UI for PC environment as a Vue Component.
Check out the Working Demo
- Window component for Vue.js
- Windows are draggable
- Automatic z-index control
- z-index group
- Configurable color theme
- Built-in 3 color themes
- Open / Close animation
- Tested on Safari10, Chrome60, Firefox55, IE11, Edge38 For PCs
Begin by installing it to your Vue project by running
npm install --save @hscmap/vue-window
Import it in your main file so it can be used globally.
import * as VueWindow from '@hscmap/vue-window' Vue.use(VueWindow)
Using the black windows theme with 2 windows.
<hsc-window-style-black> <hsc-window title="Windows" > Parameters: <fieldset> <legend>α</legend> <input type="range" /> </fieldset> <fieldset> <legend>β</legend> <input type="range" /> </fieldset> </hsc-window> <hsc-window title="More Windows" :closeButton="true" :isOpen="isOpen" @closebuttonclick="isOpen=false"> Parameters: ... </hsc-window> <button @click="isOpen = ! isOpen">Toggle Window 2</button> </hsc-window-style-black>
If you are thinking this may help you in your current projects or in the future, take a look at the plugin’s repository, available on GitHub.