Vue Paper Dashboard

Dropdown

To use the custom dropdown you need to import the custom made component: ```js import {DropDown} from '@/components' ``` Global usage ```js Vue.component(DropDown) ```

For local usage

export default {
  components: {
    DropDown
  }
}

WARNING

Drop-down uses a click outside directive internally. You will get a warning if the directive is not imported. You can find the declaration of this directive in src/globalDirectives.js

TIP

You can specify the tag you the drop-down to be rendered as through the tag prop

Simple

<template>
 <div>
   <drop-down tag="div" title="Simple">
      <a class="dropdown-item">Notification 1</a>
      <a class="dropdown-item">Notification 2</a>
      <a class="dropdown-item">Notification 3</a>
      <a class="dropdown-item">Notification 4</a>
      <a class="dropdown-item">Another notification</a>
    </drop-down>
 </div>
</template>

<script>
  export default {}
</script>

As icon

5
<template>
<drop-down tag="div">
  <template slot="title">
    <i class="fa fa-globe"></i>
    <span>5</span>
    <b class="caret"></b>
  </template>
  <a class="dropdown-item" href="#">Notification 1</a>
  <a class="dropdown-item" href="#">Notification 2</a>
  <a class="dropdown-item" href="#">Notification 3</a>
  <a class="dropdown-item" href="#">Notification 4</a>
  <a class="dropdown-item" href="#">Another notification</a>
</drop-down>
</template>

<script>
  export default {}
</script>

Attributes

AttributeDescriptionTypeAccepted valuesDefault
titleDropdown titlestring——
iconDropdown icon as a css classstring——
taghtml tag that you want the dropdown to be rendered asstring—li
titleClassesCustom title css classesstringobjectarray

Events

Event NameDescriptionParameters
changetriggers when the dropdown is opened/closedthe updated value

Slots

NameDescription
defaultcontent for dropdown menu
titlecontent for dropdown title
Edit this page

← Inputs →