Gaveta.vue

A flexible drawer for your UI

Meet Gaveta, the open-source and mobile-friendly drawer component built for Vue.js. Put anything you want in this drawer and have it animate into and out of your interface beautifully using Vue's transition framework.

👉 Live Demo 👈

Reasons to love Gaveta

• Customizable title and close affordance
• Vue2 and Vue3 compatible
• Configurable with CSS variables
• Sensible and minimal stylesheet that's probably compatible with your framework of choice
• Mobile optimized sizing, without need to target screen sizes within drawer content
• Powered by Vue's transition framework
• Uses CSS 3d transforms for hardware acceleration on some devices
• Visibility is fully controlled by parent component
• Close button automatically captures focus and listens for esc key

Using Gaveta

Installation

npm install vue-gaveta

Basic Usage

<template>
  <div>
    <button @click="active=true">Show it!</button>

    <Gaveta :active="active" @close="active=false">
      👋 Howdy!
    </Gaveta>
  </div>
</template>

<script>
import Gaveta from 'vue-gaveta';
export default {
  components: { Gaveta }
  data() { return { active: false }}
}
</script>

Customize Styles

:root {
/* drawer background */
--gaveta-background: purple;

/* main text color */
--gaveta-color: yellow;

/* interior padding - useful to set to zero if using container helpers */
--gaveta-padding: 2em;

/* color to fade out background UI - note that solid colors will not be transparent */
--gaveta-screen: rgba(16, 38, 56, 0.3)
}

Use Slots

<Gaveta :active="active" @close="active=false">
  <template v-slot:title>A custom title!</template>
  <template v-slot:close>Pass in anything to click on</template>

  <template v-slot:default>Default slot can be implied or defined explicitly</template>
</Gaveta>

Drawer Sizes

Customize the maximum size of the drawer by adding the optional size property.

<Gaveta size="is-large">

Below a screen size of 768px the drawer will always be 92% of the total screen width. Above those screen dimenions the drawer sizes are:

value | result ------|------- is-small | Drawer will be 320px wide is-medium | (Default) Drawer will be 480px wide is-large | Drawer will be 720px wide

Created by @13protons for Farebox.io