RetroSearch Browse

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

Showing content from https://github.com/RadKod/v-dropdown-menu below:

selimdoyranli/v-dropdown-menu: Customizable dropdown menu for vue 🟩🔽

v-dropdown-menu

Customizable dropdown menu for vue 🟩🔽

Website

⚡️ Lightweight
🎨 Interactive
🛠️ Customizable
👶🏻 Easy implementation
📦 Vue2 & Vue3 support
💉 SSR compatible

DEMO

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

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

const app = createApp(App)

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

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

<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>

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

Vue.use(DropdownMenu);

import DropdownMenu from "v-dropdown-menu/vue2"
import 'v-dropdown-menu/vue2/css'

export default {
  components: {
    DropdownMenu
  }
}

<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>

<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>

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 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"

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

yarn build # build for vue2 and vue3

# 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

You can sponsor me for the continuity of my projects:

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