# Drawer

A convenient sidebar that can be toggled on or off. When opened, it traps the user's focus so that keyboard navigation will remain within the sidebar until it is closed. It also supports being closed by pressing the ESC key.

Features:

  • Manages tabindex attributes for drawer accessibility.
  • Manages aria-haspopup and aria-expanded attributes for toggle button accessibility.
  • Maintains focus states to remain within the drawer for keyboard users.
  • Adds event listener to close drawer on the esc key.
  • Supports preventing page scroll while open.

# Installation

Globally:

// main.js
import Vue from 'vue';
import { VDrawer } from 'vuetensils/src/components';

Vue.component('VDrawer', VDrawer);

Locally:

<script>
// SomeComponent.vue
import { VDrawer } from 'vuetensils/src/components';

export default {
  components: {
    VDrawer,
  },
  // ...
};
</script>

# Styled Examples

.vts-drawer {
  background: rgba(0, 0, 255, 0.5);
}

.vts-drawer__content {
  padding: 20px;
  color: #FFF;
  background: #222;
  transition: 0.3s ease transform;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.5s ease opacity;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: 0.5s ease opacity, 0.5s ease transform;
}

.slide-right-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

# Styling

NOTE: drawer background colors have been removed.

To add background colors to the content, you chave 3 options:

  1. Use the provided .vts-drawer__content class to add a background color:
    .vts-drawer__content {
      background: #FFF;
    }
    
  2. Use the classes prop object to provide a custom class:
    <VDrawer :classes="{ content: 'bg-white' }">
     ...
    </VDrawer>
    
  3. Use the slot content to provide a custom class:
    <VDrawer>
      <div class="sidebar">...</div>
    </VDrawer>
    
    .sidebar {
      height: 100%;
      background: #FFF;
    }
    

# Examples

The following styles have been added to this site to make the drawers easier to see:

.bg-white {
  background-color: #FFF;
}

.bg-black-alpha {
  background: rgba(0, 0, 0, 0.2);
}

# Using v-model

# Right aligned

# Prevent page scroll

# Add transitions

.fade-enter-active,
.fade-leave-active {
  transition: 0.5s ease opacity;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: 0.5s ease opacity, 0.5s ease transform;
}

.slide-right-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

# Custom Classes

This component can accept a classes prop to cusomize the output HTML classes:

:classes="{ bg: 'bg-class', content: 'content-class' }"
Last Updated: 7/7/2020, 10:03:39 PM