🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A lightweight and easy-to-use Vue.js component for creating neat windows on the web app.

Other

Documentation

vue-windows NPM version NPM downloads Build Status

It's inspired by the socket.io homepage, only 1kb.

Install

$ npm install --save vue-windows

Usage

<template>   <div id="app">     <editor-window title="my window">       editor window body     </editor-window>     <browser-window title="http://example.com">       browser window body     </browser-window>   </div> </template>  <script> import {EditorWindow, BrowserWindow} from 'vue-windows'  export default {   components: {     EditorWindow,     BrowserWindow   } } </script>  <!-- Don't forget the CSS! --> <style src="vue-windows/dist/vue-windows.css"></style>

API

Props

title

  • Type: string
  • Required: true

shadow

  • Type: boolean
  • Default: false

Whether to show window shadow.

theme

  • Type: string
  • Default: default
  • Available: default, dark

width

  • Type: number, string
  • Default: 500

Number values are resolved into lengths in px while string values are used directly.

height

  • Type: number, string
  • Default: 340

Number values are resolved into lengths in px while string values are used directly.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Development

yarn yarn example

License

MIT © EGOIST


You May Also Like