# Dropdown


To use the custom dropdown you need to import the custom made component:
import {DropDown} from 'src/components'
1

Global usage

Vue.component(DropDown)
1

For local usage

export default {
  components: {
    DropDown
  }
}
1
2
3
4
5

WARNING

Note 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

# Simple

TIP

You can specify the tag that the dropdown will be rendered with through the tag prop

<template>
<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>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# As button

<template>
<div>
  <div class="col-5">
    <drop-down>
      <n-button slot="title" type="primary" 
                class="dropdown-toggle" 
                data-toggle="dropdown"
                block round>
        Dropdown
      </n-button>
      <h6 class="dropdown-header">Dropdown header</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </drop-down>
  </div>
</div>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Expand upward

<template>
  <div class="row">
    <div class="col-5">
      <drop-down direction="up">
        <n-button slot="title" type="primary" 
          class="dropdown-toggle" data-toggle="dropdown"
          block round>
          Dropup
        </n-button>
        <h6 class="dropdown-header">Header</h6>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </drop-down>
    </div>
  </div>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Events

Event Name Description Parameters
change triggers when the dropdown is opened/closed the updated value

# Slots

Name Description
default content for dropdown menu
title content for dropdown title

****