@geneontology/wc-light-modal
v0.0.7
Published
Lightweight modal web component
Downloads
3
Keywords
Readme
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 startTo build the component for production, run:
npm run buildTo run the unit tests for the components, run:
npm testUsing 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