Vue Components For Creating Neat Windows

Vue Components For Creating Neat Windows

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

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

Github Repository

Tags: #VueJs