Giter Club home page Giter Club logo

vue-simple-drawer's Introduction

Codacy Badge codecov All Contributors Build Status Greenkeeper badge Known Vulnerabilities License: MIT npm FOSSA Status

vue-simple-drawer

TODO

  • remove shadow for default style
  • add cover layer option
  • rename the scss vars
  • nest drawer?

Install

npm install vue-simple-drawer --save

Quick Start

<template>
  <div id="app">
    <button @click="toggle">toggle</button>
    <Drawer @close="toggle" align="left" :closeable="true">
      <div v-if="open">content here</div>
    </Drawer>
  </div>
</template>

<script>
import Drawer from "vue-simple-drawer"
export default {
  name: "app",
  data() {
    return {
      open: true
    }
  },
  components: {
    Drawer
  },
  methods: {
    toggle() {
      this.open = !this.open
    }
  }
}
</script>

Prop Types

Property Type Required? Description
align String One of "left", "up", "right", "down", default is 'right'. the location of the drawer.
closeable Boolean show the x - close button, default true
mask Boolean show the mask layer - close button, default true
maskClosable Boolean emit 'close' event when click on mask layer, default: false
zIndex Number z-index value for the drawer, the nest drawer's z-index will be increased automatically, default is 1000

Events

Event Params Required? Description
close None will be triggered when user click the x close button

Slot

Slot Name Description
default the content display in the drawer which can show/hide the draw by v-if

Advance Guide

Nest Drawer

   <button @click="toggle">Open/Close</button>
    <Drawer @close="toggle" :align="align" :closeable="true">
      <div v-if="open">
        <span @click="innerOpen=true">
          content here
          content here
          content here
          content here
          content here
          content here
          content here
        </span>
        <Drawer @close="innerOpen=false" :align="align" :closeable="true">
          <div v-if="innerOpen">
            content here
            content here
            content here
          </div>
        </Drawer>
      </div>
    </Drawer>

    ...

      data() {
        return {
          open: false,
          innerOpen: false,
          align: "left"
        };
      },

Customized Theme

  • In your customized scss file (demo.scss)
$--simple-drawer-close-width: 50px;
@import "~vue-simple-drawer/src/index";
  • import the scss to override the default theme in main.js (entry file) after you import the Draw component
import "./demo.scss";

variables

close button style

  • $--simple-drawer-softorange
  • $--simple-drawer-tomatored
  • $--simple-drawer-mediumblu

close button size

  • $--simple-drawer-close-width

drawer background

  • $--simple-drawer-bg-color

drawer text color

  • $--simple-drawer-fg-color

License

FOSSA Status

Contributors

Thanks goes to these wonderful people (emoji key):

Vincent Guo
Vincent Guo

๐Ÿ’ป ๐Ÿ“– ๐Ÿš‡

This project follows the all-contributors specification. Contributions of any kind welcome!

vue-simple-drawer's People

Contributors

dreambo8563 avatar greenkeeper[bot] avatar allcontributors[bot] avatar cprodhomme avatar codacy-badger avatar fossabot avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.