# Dropdown

Adds a button that can show/hide dropdown content when it is hovered over, or clicked. When it is clicked, the content will persist until the user clicks out or focuses out. Includes relevant ARIA attributes for the hidden content.

# Installation

Globally:

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

Vue.component('VDropdown', VDropdown);

Locally:

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

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

# Styled Examples

.vts-dropdown__trigger {
  border: 0;
  border-radius: 5px;
  padding: 10px;
  font-size: 18px;
  color: #FFF;
  background: darkcyan;
  transition: 0.5s ease border-radius;
}

.vts-dropdown__trigger[aria-expanded] {
  border-radius: 5px 5px 0 0;
}

.dropdown-content {
  border: 1px solid darkcyan;
  border-radius: 0 0 5px 5px;
  padding: 10px;
  background-color: #FFF;
}

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

# 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;
}

# Unstyled Examples

# Position top

# With a transition

.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 cusomize the output HTML classes:

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