@geneontology/wc-light-modal NPM

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

@stencil/core

@infinitebrahmanuniverse/nolb-_gen @everything-registry/sub-chunk-356

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago