GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → michitaro → Vue Window

michitaro / Vue Window

Licence: mit
Window component for vue2

Programming Languages

typescript
32286 projects

Labels

vuecomponentwindow

Projects that are alternatives of or similar to Vue Window

Doctor
quick and easy documentation of Vue.js components - DEPRECATED
Stars: ✭ 227 (-9.56%)
Mutual labels:  component
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (-6.77%)
Mutual labels:  component
Vuetimeline
🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.
Stars: ✭ 242 (-3.59%)
Mutual labels:  component
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (-9.96%)
Mutual labels:  component
Asset
The Asset component manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files.
Stars: ✭ 2,771 (+1003.98%)
Mutual labels:  component
Weapp
🐧 微信小程序组件和功能封装，基于微信Component自定义组件开发
Stars: ✭ 235 (-6.37%)
Mutual labels:  component
Component Size
React hook for determining the size of a component
Stars: ✭ 224 (-10.76%)
Mutual labels:  component
Vuex Connect
A binding utility for a Vue component and a Vuex store.
Stars: ✭ 248 (-1.2%)
Mutual labels:  component
Vue Content Loader
SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 2,790 (+1011.55%)
Mutual labels:  component
React Loading
Build a smooth and lightweight react component loading with css 🎉 .
Stars: ✭ 234 (-6.77%)
Mutual labels:  component
Vue Menu
Menu/Contextmenu Component for vue2
Stars: ✭ 227 (-9.56%)
Mutual labels:  component
Microwindows
The Nano-X Window System
Stars: ✭ 230 (-8.37%)
Mutual labels:  window
React Native Hero
🤘 A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more
Stars: ✭ 234 (-6.77%)
Mutual labels:  component
Vue.draggable
Vue drag-and-drop component based on Sortable.js
Stars: ✭ 16,530 (+6485.66%)
Mutual labels:  component
Autocomplete
Blazing fast and lightweight autocomplete widget without dependencies. Only 1KB gzipped. Demo:
Stars: ✭ 244 (-2.79%)
Mutual labels:  component
Vue Glide
A slider and carousel as vue component on top of the Glide.js
Stars: ✭ 225 (-10.36%)
Mutual labels:  component
Blog
Personal Blog
Stars: ✭ 234 (-6.77%)
Mutual labels:  component
React Native Pulse Loader
tinder-like loader for your react native app
Stars: ✭ 250 (-0.4%)
Mutual labels:  component
React Native Scalable Image
React Native Image component which scales width or height automatically to keep the original aspect ratio
Stars: ✭ 241 (-3.98%)
Mutual labels:  component
Options Resolver
The OptionsResolver component is array_replace() on steroids. It allows you to create an options system with required options, defaults, validation (type, value), normalization and more.
Stars: ✭ 2,723 (+984.86%)
Mutual labels:  component
View All Similar Projects ➔

vue-window

Introduction

Recent web applications are mainly for mobile environments. Therefore 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.

Working Demo

Features

  • Window component for vue2
  • Windows are draggable
  • Automatic z-index control
  • Resizable
  • z-index group
  • Configurable color theme
  • Built-in 3 color themes
  • Open / Close animation
  • Tested on Safari10, Chrome60, Firefox55, IE11, Edge38 For PCs
  • iOS Support 🎉

Screenshot

Usage

Install

npm install --save @hscmap/vue-window

Setup

ES6 / TypeScript

import Vue from 'vue'
import * as VueWindow from '@hscmap/vue-window'

Vue.use(VueWindow)

CommonJS

var Vue = require('vue')
Vue.use(require('@hscmap/vue-window'))

Example

<template>
    <hsc-window-style-metal>
        <hsc-window title="Window 1" >
            Parameters:
            <fieldset>
                <legend>&alpha;</legend>
                <input type="range" />
            </fieldset>
            <fieldset>
                <legend>&beta;</legend>
                <input type="range" />
            </fieldset>
        </hsc-window>
    </hsc-window-style-metal>
</template>

Other examples are available here.

see also @hscmap/vue-menu. This is a menu UI component for vue2 with the same color themes.

Contributing

Any comments, suggestions or PRs are welcome 😀

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].