# VDialog

A dialog 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 dialog until it is closed. It supports being closed by clicking outside the dialog content or pressing the ESC key.

Source

# Installation

Globally:

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

Vue.component("VDialog", VDialog)

Locally:

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

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

# Styled Example

.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);
}

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

.my-dialog .vts-dialog__content {
  position: relative;
  border-radius: 7px;
  padding: 20px;
  font-family: sans-serif;
  background: #fff;
  transition: transform 0.3s;
}

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

.my-dialog__close {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 0;
  padding: 5px;
  background: transparent;
}

# NOTE:

Dialog background colors have been removed. The following styles have been added to this site to make the dialogs easier to see:

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

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

# Basic dialog

# Using v-model

# Add a close button

# Prevent scrolling

# With transitions

.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: 3/22/2020, 10:49:07 PM