RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/dreambo8563/vue-simple-drawer below:

dreambo8563/vue-simple-drawer: A tiny Drawer component with bounced animation for Vue 🚪🎏🗄🔛

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

npm install vue-simple-drawer --save

<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>

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 Event Params Required? Description close None will be triggered when user click the x close button Slot Name Description default the content display in the drawer which can show/hide the draw by v-if

   <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"
        };
      },

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

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

Thanks goes to these wonderful people (emoji key):

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4