https://github.com/mervinpraison/web-elements-ui

https://github.com/mervinpraison/web-elements-ui

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/mervinpraison/web-elements-ui
• Owner: MervinPraison
• Created: 2019-10-14T16:09:31.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T12:26:00.000Z (about 2 years ago)
• Last Synced: 2024-04-15T23:02:25.317Z (9 months ago)
• Language: JavaScript
• Size: 1.71 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*

- [web-components-ui-elements](#web-components-ui-elements)

  - [Installation](#installation)

  - [Usage](#usage)

  - [API](#api)

    - [Modal Window](#modal-window)

      - [Tag Name](#tag-name)

      - [Methods](#methods)

        - [Open](#open)

        - [Close](#close)

      - [ICD](#icd)

        - [Config](#config)

  - [Contributing](#contributing)

# 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:

``

And then use the API:

```

const modal = document.querySelector('#modal-window');

modal.open({

    content: '
Hello Modal!
'

});


// 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: '
Hello Modal
',

        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: '', //  HTML snippet to show inside the modal

    hideOverlay: false, //  show or hide the opack overlay behind the modal

    height: 150, //  height of the modal

    width: 150, //  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