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 - [email protected]