Alternatives and detailed information of v-dropdown-menu

    import Vue from 'vue'
    import DropdownMenu from 'v-dropdown-menu'
    import 'v-dropdown-menu/dist/v-dropdown-menu.css' // Base style, required.
    
    Vue.use(DropdownMenu)

Local Register

    import DropdownMenu from 'v-dropdown-menu'
    import 'v-dropdown-menu/dist/v-dropdown-menu.css' // Base style, required.
    
    export default {
      components: {
        DropdownMenu
      }
    }

Via CDN

    <script src="https://unpkg.com/v-dropdown-menu"></script>
    <script>
	  new  Vue({
	    el: "#app"
	  });
	  Vue.use(DropdownMenu);
    </script>

Usage

    <dropdown-menu>
      <button slot="trigger">Open Dropdown</button>
      <div slot="header">Dropdown Header</div>
      <ul slot="body">
        <li v-for="i in 6" :key="i"><a href="">Item {{i}}</a></li>
      </ul>
      <div slot="footer">Dropdown Footer</div>
    </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"`

Author

👤 selimdoyranli

Website: @selimdoyranli
Github: @selimdoyranli
LinkedIn: @selimdoyranli
Team: @RadKod

CREATED BY

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

RadKod / v-dropdown-menu

Programming Languages

Labels

Projects that are alternatives of or similar to v-dropdown-menu

Installation