Welcome to version 0.2.5 of Flexi Modal, an easy to implement, and well maintained Vue.js plugin.
You can support this project by giving it a star, or following the author. ❤️.
Flexi Modal vue plugin made by Oliver
- npm install flexi-modal --save
import FlexiModal from 'flexi-modal';
export default {
name: 'someComponent',
components: { FlexiModal }Once installed, it can be used in every Vue component easy.
<a href="#flexi-modal">Open Modal</a>
<flexi-modal
name="flexi-modal"
:modalType="false"
:checkBoxesAllowed="true"
:checkBoxes="checkBoxes"
headerMessage="Are you sure?"
warningMessage="Warning, this cant be undone!"
confirmButtonMessage="Proceed"
declineButtonMessage="Go Back"
@is-valid="isValid"
/>- Name property is mandatory. Without providing it, the component will not work.
- warningMessage, checkBoxesAllowed and checkBoxes is available only for Error Modal(See MODAL TYPE)
There are two type of modal that could be use, Error and Confirm Modal. Default value "false", that mean Error Modal. Confirm modal doesnt support checkboxes and its validation.
<flexi-modal
name="flexi-modal"
:modalType="false"
/>Enabling of checkboxes (optional) // default option false
<flexi-modal
:checkBoxes="checkBoxes"
:checkBoxesAllowed="true"
:modalType="false"
:name="flexi-modal"
/>data: () {
return {
checkBoxes: [
{ text: 'Remove all trade history related information', confirmed: false },
{ text: 'Remove stock exchanges database', confirmed: false }
]
}
}Listen for 'is-valid' event which returns true if all checkboxes are marked
methods: {
isValid(valid) {
valid ? alert('Action Confirmed') : alert('Please Mark the checkboxes in order to proceed the request');
}
}
| Name | Type | Mandatory | Description
| :----- | :------- | :-------- |-------------------------------
| name | String | Yes | This prop is mandatory. Give string name to your modal and invoke it.
| modalType | Boolean | Yes | true/false. Set true for Confirm and false for Error Modal.
| headerMessage | String | No | Set message on the Header of the Modal.
| warningMessage | String | No | This option is only available for modalType=false (ErrorModal)
| confirmButtonMessage | String | No | Set ConfirmButton title
| declineButtonMessage | String | No | Set DeclineButton title
| checkBoxesAllowed | Boolean | No | true/false. This options is only available for modalType=false (ErrorModal).
| checkBoxes | Array | No | Set array of checkboxes options that will be loop inside component. avl only if checkBoxedAllowed is true.
| is-valid | Event | / | Listen for event. Return true if confirmButton is clicked and/or all checkBoxes are marked for modalType=false
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent