# Dialog

A dialog component for showing users content which overlays the rest of the application. 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.

Features:

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

# Installation

Globally:

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

Vue.component('VDialog', VDialog);

Locally:

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

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

# Styled Example

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

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

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

.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: 0.3s ease transform;
}

.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: 0.5s ease opacity;
}

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

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

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

# Custom Classes

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

:classes="{ root: 'root-class', content: 'content-class' }"
Last Updated: 10/17/2020, 2:28:03 PM