RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://npmjs.com/package/v-dropdown-menu below:

v-dropdown-menu - npm

v-dropdown-menu

Customizable dropdown menu for vue ð©ð½

Website

Features

â¡ï¸ Lightweight
ð¨ Interactive
ð ï¸ Customizable
ð¶ð» Easy implementation
ð¦ Vue2 & Vue3 support
ð SSR compatible

Getting Started Try it Online â¡ï¸

DEMO

Installation

yarn add v-dropdown-menu  # or npm i v-dropdown-menu

Vue3 Global Register

import { createApp } from 'vue'
import App from './App.vue'
import DropdownMenu from 'v-dropdown-menu'

const app = createApp(App)

app.use(DropdownMenu)
app.mount('#app')

Local Register

<script setup>
import DropdownMenu from 'v-dropdown-menu'
import 'v-dropdown-menu/dist/vue3/v-dropdown-menu.css'
</script>

Via CDN

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/v-dropdown-menu"></script>
<link rel="stylesheet" href="https://unpkg.com/v-dropdown-menu/dist/vue3/v-dropdown-menu.css">

<script>
  const app = Vue.createApp({})
    
  app.use(DropdownMenu)
  app.mount('#app')
</script>

Vue2 Global Register

import Vue from "vue"
import DropdownMenu from "v-dropdown-menu/vue2"

Vue.use(DropdownMenu);

Local Register

import DropdownMenu from "v-dropdown-menu/vue2"
import "v-dropdown-menu/dist/vue2/v-dropdown-menu.css"

export default {
  components: {
    DropdownMenu
  }
}

Via CDN

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/v-dropdown-menu/vue2"></script>
<link rel="stylesheet" href="https://unpkg.com/v-dropdown-menu/dist/vue2/v-dropdown-menu.css">

<script>
new  Vue({
  el: "#app"
});

Vue.use(DropdownMenu);
</script>

Usage

<dropdown-menu>
  <template #trigger>
    <button>Open Dropdown</button>
  </template>
  
  <template #header> Dropdown Header </template>
  
  <template #body>
    <ul>
      <li v-for="i in 6" :key="i">
        <a href="">Item {{ i }}</a>
      </li>
    </ul>
  </template>
  
  <template #footer> Dropdown Footer </template>
</dropdown-menu>

Props Name Description Type Options Default isOpen Show or hide for dropdown Boolean true , false false mode Open variant String click , hover click dropup Open the menu upwards Boolean true , false false direction Menu container direction String left , right , center left closeOnClickOutside closes dropdown menu when click outside Booelan true , false true withDropdownCloser If there is an element in the menu with dropdown-closer attribute, clicking on it closes the menu. Boolean true , false false containerZIndex z-index of menu container String . 994 overlay background overlay of dropdown menu (only for click mode) Boolean true , false true overlayBgColor background-color of overlay String ex: rgba(1, 35, 83, 0.8) rgba(0, 0, 0, 0.2) overlayZIndex z-index of overlay String . 992 transition custom vue transition for menu String . default Slots Name Description trigger trigger for dropdown menu header header of menu container (optional) body content of menu (optional) footer footer of menu container (optional) Events (only for click mode) @opened="dispatchEvent" @closed="dispatchEvent" Development Vue3

yarn build:vue3 # build for vue3

# Serve

cd dev/vue3

yarn install
yarn serve

yarn build:vue2 # build for vue2

# Serve

cd dev/vue2

yarn install
yarn serve

Vue 2&3

yarn build # build for vue2 and vue3

Linter

# run eslint
yarn lint:eslint

# run eslint fix
yarn lint:eslint:fix

# run stylelint
yarn lint:stylelint

# run stylelint fix
yarn lint:stylelint:fix

# run prettier
yarn prettier

Sponsorship

You can sponsor me for the continuity of my projects:

License

MIT License

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4