@geneontology/wc-light-modal

Lightweight modal web component

Usage no npm install needed!

<script type="module">
  import geneontologyWcLightModal from 'https://cdn.skypack.dev/@geneontology/wc-light-modal';
</script>

README

Built With Stencil

Light Modal Web Component

This is a lightweight web component to display modals. It allows notably to include HTML content in the modal card. The modal can be triggered by 3 methods: open(), close() or toggle().

Getting Started

To start the component in a dev environment:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Using this component

Script tag

  • Put a script tag <script src='https://unpkg.com/@geneontology/wc-light-modal/dist/wc-light-modal.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc
<html>
<head>
    <script src="https://unpkg.com/@geneontology/wc-light-modal/dist/wc-light-modal.js"/>
</head>
<body>

  <wc-light-modal   modal-title="Your Modal Title" 
                    modal-content="Your Modal Content including HTML:                                   <button>test button</button>"></wc-light-modal>
</body>
</html>

By assigning an id to the modal HTML element, one can also interact with is using the methods open(), close() and toggle().

Node Modules

  • Run npm install @geneontology/wc-light-modal --save
  • Put a script tag similar to this <script src='node_modules/@geneontology/wc-light-modal/dist/wc-light-modal.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc