# Dropdown 下拉菜单
Add dropdown menus to nearly anything, including the navbar, tabs, and pills.
# Examples
Order to decide the dropdown trigger:
- The element attached with
data-role="trigger"
inside the default slot (if exist). - The element has
dropdown-toggle
class inside the default slot (if exist). - The first element inside the default slot.
Use v-model
to indicate the dropdown status.
<template>
<div class="uiv">
<dropdown ref="dropdown">
<btn type="primary" class="dropdown-toggle"
>Dropdown <span class="caret"></span
></btn>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
<dropdown>
<btn type="info">Split Button</btn>
<btn type="info" class="dropdown-toggle"><span class="caret"></span></btn>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
</div>
</template>
# Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add menu-right
to a dropdown component to right align the dropdown menu.
<template>
<div class="uiv">
<dropdown menu-right>
<btn class="dropdown-toggle">Menu-Right <span class="caret"></span></btn>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
</div>
</template>
# Dropup
Dropdown menus can be changed to expand upwards (instead of downwards) by adding dropup
to the dropdown component.
<template>
<div class="uiv">
<dropdown dropup>
<btn class="dropdown-toggle">Dropup <span class="caret"></span></btn>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
</div>
</template>
# Append to body
Use this option to avoid influence from the parent node by appending dropdown list to <body>
.
<template>
<div class="uiv">
<!-- dropdown with append-to-body -->
<dropdown append-to-body>
<btn class="dropdown-toggle">Dropdown <span class="caret"></span></btn>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
<!-- dropdown with append-to-body + menu-right -->
<dropdown append-to-body menu-right>
<btn class="dropdown-toggle">Menu-Right <span class="caret"></span></btn>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
<!-- dropdown with append-to-body + dropup -->
<dropdown append-to-body dropup>
<btn class="dropdown-toggle">Dropup <span class="caret"></span></btn>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
<!-- dropdown-append-to-body.vue -->
</div>
</template>
# Within navbar
<template>
<div class="uiv">
<navbar>
<a slot="brand" class="navbar-brand" role="button">Brand</a>
<template slot="collapse">
<navbar-nav>
<dropdown tag="li">
<a class="dropdown-toggle" role="button"
>Dropdown 1<span class="caret"></span
></a>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
<dropdown tag="li">
<a class="dropdown-toggle" role="button"
>Dropdown 2<span class="caret"></span
></a>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
</navbar-nav>
<navbar-nav right>
<dropdown tag="li">
<a class="dropdown-toggle" role="button"
>Dropdown 3<span class="caret"></span
></a>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
</navbar-nav>
</template>
</navbar>
</div>
</template>
# Within pills
<template>
<div class="uiv">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">
<a href="javascript:void(0)">Regular link</a>
</li>
<dropdown tag="li">
<a class="dropdown-toggle" role="button"
>Dropdown <span class="caret"></span
></a>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
<dropdown tag="li">
<a class="dropdown-toggle" role="button"
>Dropdown <span class="caret"></span
></a>
<template slot="dropdown">
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</dropdown>
</ul>
</div>
</template>
# Advanced
You can place anything you wish inside a dropdown, for example, a simple form with checkboxes:
提示
use not-close-elements
to prevent dropdown close on menu body click if needed.
You selected: []
<template>
<section class="uiv">
<alert>You selected: {{ selected }}</alert>
<dropdown
ref="dropdown"
v-model="show"
:not-close-elements="ele"
class="dropdown-form"
>
<btn type="primary" class="dropdown-toggle"
>Dropdown Form <span class="caret"></span
></btn>
<template slot="dropdown">
<li class="checkbox">
<label>
<input v-model="selected" type="checkbox" value="Vue" /> Vue
</label>
</li>
<li class="checkbox">
<label>
<input v-model="selected" type="checkbox" value="Bootstrap" />
Bootstrap
</label>
</li>
<li class="checkbox">
<label>
<input v-model="selected" type="checkbox" value="JavaScript" />
JavaScript
</label>
</li>
<li>
<btn block type="primary" @click="show = false">Apply</btn>
</li>
</template>
</dropdown>
</section>
</template>
<script>
export default {
data() {
return {
show: false,
ele: [],
selected: [],
}
},
mounted() {
this.ele.push(this.$refs.dropdown.$el)
},
}
</script>
<style scope>
.dropdown-form .dropdown-menu {
padding: 10px;
}
</style>
# API Reference
# Dropdown (opens new window)
# Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
v-model | Boolean | Indicate the dropdown status (show / hide). | ||
tag | String | div | The HTML tag that render the dropdown component. | |
append-to-body | Boolean | false | Append the dropdown slot to body. | |
dropup | Boolean | false | Use dropup style. | |
menu-right | Boolean | false | Use dropdown-menu-right style. | |
disabled | Boolean | false | Disable the dropdown. | |
not-close-elements | Array | Pass an array of element which the dropdown will not close on click. | ||
position-element | Element | this.$el | Pass an HTML element which the dropdown will be positioned by (in append-to-body mode). |
# Slots
Name | Description |
---|---|
dropdown | Replace as the dropdown body. |
default | Replace as the rest of the component (e.g. trigger stuffs). |