Skip to content

Latest commit

 

History

History
106 lines (81 loc) · 3.49 KB

README.md

File metadata and controls

106 lines (81 loc) · 3.49 KB
Raw

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.

mon-dropdown-gif

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

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