Skip to content

lsimianer/npm2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Table of Contents generated with DocToc

web-components-ui-elements

A web components UI library.

Installation

npm i lukes_generic_library

Usage

You can require the whole library:

import * from lukes_generic_library;

And use in the DOM like this:

<ce-modal-window id="modal-window"></ce-modal-window>

And then use the API:

const modal = document.querySelector('#modal-window');
modal.open({
    content: '<h1>Hello Modal!</h1>'
});

// close the modal when clicking on it
function closeModal() {
    modal.close();
    modal.removeEventListener('click', closeModal);
}
modal.addEventListener('click', closeModal);

If you want, you can just create the element on your own and add it to the DOM:

const modalWindow = document.createElement('ce-modal-window');
modalWindow.addEventListener('click', () => {
    modalWindow.close();
});
document.body.appendChild(modalWindow);

const button = document.createElement('button');
button.innerText = 'Open modal';

button.addEventListener('click', () => {
    modalWindow.open({
        content: '<h1>Hello Modal</h1>',
        height: 50,
        width: 100
    });
});
document.body.appendChild(button);

API

Modal Window

Tag Name

ce-modal-window

Methods

Open

Accepts a config object and opens the modal.

Close

Closes the modal

ICD

Config
{
    content: '', // <string> HTML snippet to show inside the modal
    hideOverlay: false, // <boolean> show or hide the opack overlay behind the modal
    height: 150, // <number> height of the modal
    width: 150, // <number> width of the modal
}

Contributing

  • Clone
  • npm i
  • npm run build to get the build
  • npm run test to test
  • npm run serve to run a development environment


Development

- Create a file in src/components/ce-your-new-file.js - Develope test file named in format "ce-your-component-name.spec.js" - Write tests using ce-modal-window.spec.js as a model. - Run NPM run test ( with tests built in ). - If tests pass create a pull request. - Create components

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published