1.0.2 • Published 3 years ago
@irfanismail/mon-dropdown v1.0.2
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.
Getting Started
// npm
npm i @irfanismail/mon-dropdown
// yarn
yarn add @irfanismail/mon-dropdown
Usage
- 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 |
- 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>
- 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
- 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