# VModal

A modal/dialogue component for showing users content which overlays the rest of the applications. When opened, it traps the user's focus so that keyboard navigation will remain within the modal until it is closed. It supports being closed by clicking outside the modal content or pressing the ESC key.

Source

# Installation

Globally:

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

Vue.component("VModal", VModal)

Locally:

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

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

# Styled Example

<template>
  <div class="styled">
    <VModal v-model="modal" bg-transition="fade">
      This is the modal content.
      <br />
      It traps the user focus.
      <br />
      <button @click="modal = false" aria-label="close">&times;</button>
    </VModal>
    <button @click="modal = !modal">Show the modal</button>
  </div>
</template>

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

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

.slide-up-enter-active,
.slide-up-leave-active {
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}

.slide-up-enter,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.vts-modal {
  background: rgba(0, 0, 0, 0.7);
}

.vts-modal__content {
  position: relative;
  border-radius: 7px;
  padding: 20px;
  font-family: sans-serif;
  transition: transform 0.3s;
}

.fade-enter .vts-modal__content,
.fade-leave-active .vts-modal__content {
  transform: translateY(20px);
}

.vts-modal__content button {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 0;
  padding: 5px;
  background: transparent;
}

# Basic modal

<template>
  <div>
    <VModal v-model="modal">
      This is the modal content.
    </VModal>
    <button @click="modal = !modal">Show the modal</button>
  </div>
</template>

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

# Add a close button

<template>
  <div>
    <VModal v-model="modal">
      This is the modal content.
      <br />
      <button @click="modal = false">Close</button>
    </VModal>
    <button @click="modal = !modal">Show the modal</button>
  </div>
</template>

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

# Prevent scrolling

<template>
  <div>
    <VModal v-model="modal" noScroll>
      This is the modal content.
      <br />
      <button @click="modal = false">Close</button>
    </VModal>
    <button @click="modal = !modal">Show the modal</button>
  </div>
</template>

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

# With transitions

<template>
  <div>
    <VModal v-model="modal" transition="slide-up" bg-transition="fade">
      This is the modal content.
      <br />
      It traps the user focus.
      <br />
      <button @click="modal = false">Close</button>
    </VModal>
    <button @click="modal = !modal">Show the modal</button>
  </div>
</template>

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

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

.slide-up-enter-active,
.slide-up-leave-active {
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}

.slide-up-enter,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

# 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