A simple, clean dropdown popup plugin for Vue.js 3. If you’re looking for an interactive popup that appears under the element on click, this dropdown plugin is for you.
How to use it:
1. Import and register the dropdown plugin.
import { Dropdown } from 'v-dropdown'
2. Attach the dropdown popup to a trigger element.
<Dropdown>
<!-- Trigger element -->
<template #trigger>
<button type="button">Click me</button>
</template>
<!-- Content to display in the dropdown -->
<div>Your Content</div>
</Dropdown>
3. Available props.
/** Container show up alignment direction */
align: { type: String, default: 'left' },
border: { type: Boolean, default: true },
/**
* Toggle display / close dropdown container
*/
toggle: { type: Boolean, default: true },
/** Manual control the display and hiding of dropdown */
manual: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
/**
* Open / close dropdown animation
*
* {boolean}
* - true: use default animation
* - false: don't display animation
* {string} customized animation class-name
*/
animated: { type: [String, Boolean], default: true },
/**
* The width of dropdown container
* min-width: 80
*/
width: { type: Number, default: undefined },
/**
* Trigger container display type
* - false: inline-block
* - true: block
*/
fullWidth: { type: Boolean, default: false },
/**
* Dropdown trigger method
* - `click` default
* - `hover`
* - `contextmenu`
*/
trigger: { type: String, default: TRIGGER_CLICK },
/** Add custom class to trigger */
customTriggerClass: { type: String, default: '' },
/** Add custom class to container */
customContainerClass: { type: String, default: '' }
Preview:
Changelog:
v3.0.0 (09/16/2023)
- Update for Vue 3
Download Details:
Author: TerryZ
Live Demo: https://codepen.io/terry05/pen/BggbrK
Download Link: https://github.com/TerryZ/v-dropdown/archive/refs/heads/dev.zip
Official Website: https://github.com/TerryZ/v-dropdown
Install & Download:
# Yarn
$ yarn add v-dropdown
# NPM
$ npm i v-dropdown