# VDrawer

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.

Source

# Installation

Globally:

// main.js
import Vue from "vue"
import { VDrawer } from "vuetensils"

Vue.component("VDrawer", VDrawer)

Locally:

<script>
// SomeComponent.vue
import { VDrawer } from "vuetensils"

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

# Styled Examples

<template>
  <div class="styled">
    <VDrawer v-model="showDrawer" transition="slide-right" bg-transition="fade">
      My drawer content
    </VDrawer>

    <button @click="showDrawer = !showDrawer">Toggle Drawer</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    showDrawer: false,
  }),
}
</script>
.vts-drawer {
  background: rgba(0, 0, 255, 0.5);
}

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

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

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

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

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

# Unstyled Examples

<template>
  <div>
    <VDrawer v-model="showDrawer">
      My drawer content
    </VDrawer>

    <button @click="showDrawer = !showDrawer">Toggle Drawer</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    showDrawer: false,
  }),
}
</script>

# Right aligned

<template>
  <div>
    <VDrawer v-model="showDrawer" right>
      My drawer content
    </VDrawer>

    <button @click="showDrawer = !showDrawer">Toggle Drawer</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    showDrawer: false,
  }),
}
</script>

# Prevent page scroll

<template>
  <div>
    <VDrawer v-model="showDrawer" noScroll>
      My drawer content
    </VDrawer>

    <button @click="showDrawer = !showDrawer">Toggle Drawer</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    showDrawer: false,
  }),
}
</script>

# Add transitions

<template>
  <div>
    <VDrawer v-model="showDrawer" transition="slide-right" bg-transition="fade">
      My drawer content
    </VDrawer>

    <button @click="showDrawer = !showDrawer">Toggle Drawer</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    showDrawer: false,
  }),
}
</script>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

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

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

.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="{ root: 'root-class', content: 'content-class' }"
Last Updated: 11/19/2019, 5:58:27 AM