mon-dropdown

MonDropdown a feature-rich dropdown Vue2 component. It focuses on bringing the best of Vue's features to achieve common & advanced behavior patterns while giving you the freedom to style the component to your liking. Built-to-work with TailwindCSS.

Demo

Getting Started

// npm
npm i @irfanismail/mon-dropdown

// yarn
yarn add @irfanismail/mon-dropdown

Usage

1. Table of Props

Props	Type	Default
label	string
labelClass	string
contentClass	string	'mon-dropdown-content'
enterActiveClass	string	'mon-dropdown-enter-active'
enterClass	string	'mon-dropdown-enter'
enterToClass	string	'mon-dropdown-enter-to
leaveActiveClass	string	'mon-dropdown-leave-active'
leaveClass	string	'mon-dropdown-leave'
leaveToClass	string	'mon-dropdown-leave-to'
anchor	boolean	false
dropUp	boolean	false
persistent	boolean	false
disableClickAway	boolean	false
disableEsc	boolean	false
openOnMount	boolean	false

2. Combinations of Slots & Props

<!-- Basic Dropdown -->
props: 
* label
* labelClass
* anchor
* dropUp
* persistent
* disableClickAway
* disableEsc
* openOnMount 
  <mon-dropdown [...props]>
      <template #content="{ close, toggle }">...</template>
  </mon-dropdown>
  
<!-- Custom Trigger -->
props: 
* anchor
* dropUp
* persistent
* disableClickAway
* disableEsc
* openOnMount 

  <mon-dropdown [...props]>
    <template #trigger="{ toggle, open }">...</template>
    <template #content="{ toggle, close }">...</template>
  </mon-dropdown>
  

3. Lifecycle Hooks

Hooks	Type
before-open	function
after-open	function
before-close	function
after-close	function

Check the Demo on how to use dropdown lifecycle hooks

4. Handling Dropdown Behavior outside Usual Scope

There will be times, you will find yourselves needing to trigger dropdown behaviors outside of the normal scope (eg. clicking a button). MonDropdown provides three (3) internal functions that can be accessed through Vue's ref="..." & $refs.

The three (3) functions are:

• toggleDropdown()
• openDropdown()
• closeDropdown()

Check the Demo on how to use dropdown's internal functions

License

MIT License

Contact

Irfan Ismail - @irfancoder - irfan.ismail96@gmail.com