v-dropdown

v-dropdown ·

A dropdown container for Vue3

If you are using vue 2.x version, please use v-dropdown 2.x version instead

Features

• Multiple drop-down bar triggering methods
• Built-in trigger button component for quick use
• When the position and size of the trigger and the drop-down bar content change, the drop-down bar content position is automatically adjusted to align - with the trigger
• Provide Dropdown status and tool functions for each slot
• Provide useDropdown utility functions
• Flexible style customization method

Documentation and Examples

Documentation and examples please visit below sites

• github-pages

My repositories using v-dropdown

• v-selectpage
• v-selectmenu
• v-region
• v-suggest

Installation

# npm
npm i v-dropdown
# yarn
yarn add v-dropdown
# pnpm
pnpm add v-dropdown

Usage

Quick dropdown

<template>
  <Dropdown>
    <DropdownContent>
      <div>some contents</div>
    </DropdownContent>
  </Dropdown>
</template>

<script setup>
import { Dropdown, DropdownContent } from 'v-dropdown'
</script>

Custom trigger content

<template>
  <Dropdown>
    <template #trigger>
      <DropdownTrigger>Click me</DropdownTrigger>
    </template>

    <DropdownContent>
      <div>some contents</div>
    </DropdownContent>
  </Dropdown>
</template>

<script setup>
import { Dropdown, DropdownContent, DropdownTrigger } from 'v-dropdown'
</script>

License