0.1.2 • Published 4 years ago
asmmodal v0.1.2
asmmodal
The asmmodal component is a customizable component.
Example
- Clone the project
- npm install
- npm run dev
- Open browser to local server
Usage
NPM
npm install asmmodal --save-devBootstrap
bootstrap@4.5.0
Vue
Vue.use
....
import AsmModal from 'asmmodal';
import 'asmmodal/dist/asm.css';
Vue.use(AsmModal);
....
/*
<AsmModal
:modal-show="false"
@closeModal="onCloseModal"
>
</AsmModal>
*/
....import {AsmModal}
....
import { AsmModal } from 'asmmodal';
import 'asmmodal/dist/asm.css';
....
components:{
....
'asm-modal':AsmModal
}
....Documentation
Available Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
| modal-show | Boolean | false | Modal State (show/close) | True |
| modal-info | Object | Modal Title, Modal contents | ||
| modal-size | String | '' | Modal Sizes (sm,lg,xl) | |
| modal-centered | Boolean | false | Modal Vertical alignment | |
| modal-scrollable | Boolean | false | With or without modal scrolling | |
| modal-stacking | Boolean | false | Modal stacking state | |
| modal-header | Boolean | true | Modal header state | |
| modal-footer | Boolean | true | Modal footer state | |
| modal-id | String | '' | Modal id value | |
| modal-header-class | String | '' | Modal header class value | |
| modal-footer-class | String | '' | Modal footer class value | |
| modal-class | String | '' | Modal theme class value | |
| modal-btn | String | 'primary' | Modal theme button class value | |
| modal-lazy | Boolean | false | Modal lazy state | |
| modal-back-drop | Boolean | false | Modal background state |
Available Events
| Method | Type | Default | Description | Required |
|---|---|---|---|---|
| closeModal | function | Modal close action | True | |
| activeEventOk | function | Modal 'confirm' action | ||
| activeEventClose | function | Modal close action |
Browser Support
- chrome
- ie 10+
- safari
- firefox
- opera
License
AsmModal is open source and released under the MIT License.