Skip to content

Instantly share code, notes, and snippets.

@YonatanKra

YonatanKra/readme.md

Created Jan 27, 2019
Embed
What would you like to do?
web components ui elements readme

web-components-ui-elements

A web components UI library.

Installation

npm install web-components-ui-elements

Usage

You can require the whole library:

import * from web-components-ui-elements;

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.