Minimal Dropdown Popup Plugin For Vue – v-dropdown

Install & Download:

# Yarn
$ yarn add v-dropdown
# NPM
$ npm i v-dropdown

Description:

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:

Minimal Dropdown Popup Plugin For Vue

Changelog:

v3.0.0 (09/16/2023)

  • Update for Vue 3

Add Comment