custom-modal-web-component

Custom modal

Bachelor thesis project.

Technology

Project created based on Web Components

• HTML
• CSS
• JavaScript
• Webpack

NPM package

Link to package

Usage in project

Install the package from NPM

$ npm i custom-modal-web-component

Use as a tag in your project

<custom-modal title='My modal'>
    <div slot='content'>Modal content as a slot</div>
</custom-modal>

Parameters

Name	Type	Description	Mandatory	Default
title	String	Available values all	Yes	-
open	Boolean	Modal visible if value true	No	false
button	String	Text for button in modal footer, if no button attribute - button invisible	No	Send
size	String	Available values m / l / xl	No	m

Available events

btn-click - event triggered when footer button clicked.

close - event triggered when closed the modal (X button clicked).

Development

Install the dependencies and devDependencies and start the server.

$ npm install

Build the development version.

$ npm run dev

Build the production version.

$ npm run build

Run webpack server and watch the changes.

$ npm run serve