Giter VIP home page Giter VIP logo

v-dropdown-menu's Introduction

npm version npm downloads changelog License

v-dropdown-menu

Customizable dropdown menu for vue πŸŸ©πŸ”½

GitHub stars

Website

Sponsorship πŸ’–
GitHub
Buy me a coffee

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'
import 'v-dropdown-menu/css'

const app = createApp(App)

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

Local Register

<script setup>
import DropdownMenu from 'v-dropdown-menu'
import '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"
import 'v-dropdown-menu/vue2/css'

Vue.use(DropdownMenu);

Local Register

import DropdownMenu from "v-dropdown-menu/vue2"
import 'v-dropdown-menu/vue2/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

Vue2

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

Copyright (c) selimdoyranli [email protected]

v-dropdown-menu's People

Contributors

scrum avatar selimdoyranli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

dkorytko emkc20

v-dropdown-menu's Issues

dropdown-closer + @click not working in Vue.

First - love the plugin. Nice work.

My only issue is when trying to add a dropdown-closer to an item with a @click attached it seems to stop it from working.

Below is my current code:

    <dropdown-menu withDropdownCloser transition="zoom" overlay:false>
      <button slot="trigger">{{ SortOption }}</button>
      <ul slot="body">
        <!-- Gets the sort options from the Store -->
        <li v-for="item in options" :key="item.id">
            <button @click="changeSortOption(item.name); dropdown-closer" class="text-black">
                {{ item.name }}
            </button>
        </li>
        <button>Close</button>
      </ul>
      <div slot="footer">Dropdown Footer</div>
    </dropdown-menu>

Any fix for this?

isOpen prop is ignored

I would like to be able to programatically open and close to dropdown through a prop. It looks like there was an intension to be able to do this with the isOpen prop but there doesn't seem to be a watch in v-dropdown-menu on this prop.

A couple things need to happen to have this work. Add a 'none' mode so internally events won't be listened to and then add a watch for isOpen to open and close the drop down upon request

Styling of container

Hi!

I would love to be able to style the container of the dropdown menu. Specifically, I would like to change the default CSS for min-width. Would it be an option for you to maybe add a property for us to set specific CSS classes for the container?

"withDropdownCloser" doesn't work

Hi again there.

I'm using Pug in my Vue project, and here is a snippet where I'm trying to use the withDropdownCloser property. I can simply not make it work. The dropdown won't close when I click on the router-link "Account".

dropdown-menu(direction="right" :overlay="false")
    span(slot="trigger") User
    .user-dropdown(slot="body")
        router-link.submenu-user(to="/account" :withDropdownCloser="true") Account
        span.submenu-user(@click="logout") Sign Out

Am I doing something terribly wrong here?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.