1.0.4 • Published 5 years ago
neu-modal v1.0.4
Neu Modal
Neu-modal is a simple lightweight and a cross framework library for managing modals inside any type of project. It was built for modern browsers using Stencil JS, TypeScript, HTML5 and SCSS.
Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.
Getting Started
To use neu-modal in your project install it via npm:
npm i neu-modal
Tag
<neu-modal size="md">
<div slot="header"> ... </div>
<div slot="body"> ... </div>
<span slot="footer"> ... </div>
</neu-modal>
Attributes
<neu-modal size="md" showcancel="true" showcancelicon="false" id="myFirstModal" footer="true" header="true"> </neu-modal>
id="anyIdName" //ID is ref to call your modal
size="md" //To define the size of your modal (sm, md, lg)
showcancel="true" //To show or hide Cancel Button in footer - default true
showcancelicon="false" //To show or hide Cancel Icon in header - default true
footer="true" //To show or hide modal footer - default true
header="true" //To show or hide modal header - default true
Method
openModal()
onModalClose()
How to Trigger Modal in Native JavaScript
function openModalHandiler() {
var neuModalRef = document.body.querySelector('#myFirstModal');
neuModalRef.openModal();
}
Your done!