HTMLPLUS
Version 1.8.3
Github

    JavaScript

    HTMLPLUS elements are fully compatible with JavaScript. To utilize elements in your JavaScript application follow these steps.

    Import

    You can utilize HTMLPLUS simply by adding a simple scirpt in your main html like this.

    <!DOCTYPE html> <html> <head> <title>HTMLPLUS in JavaScript</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <plus-switch></plus-switch> <script type="module"> import "https://esm.run/@htmlplus/ui"; </script> </body> </html>

    JavaScript modules via script tag just work on modern browsers. It's not compatible with some browsers click here to check compatibility.

    Attributes

    To set attribute.

    <plus-switch disabled></plus-switch>

    Properties

    To set property. All Standard JavaScript APIs are supported. Feel free to use them.

    <plus-switch id="element"></plus-switch> <script> element.disabled = true; </script>

    Events

    To add event to elements you can use this format.

    <plus-switch id="element"></plus-switch> <script> element.addEventListener('plus-change', () => { alert('The event fired!'); }) </script>

    Most of events such as click and change, etc. are prereserved by explorers. To avoid conflict occuring you need to use plus- prefix.

    Global Config

    <!DOCTYPE html> <html> <head> <title>HTMLPLUS in JavaScript</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <!-- Gets 'lg' value for the 'size' property from global config --> <plus-spinner></plus-spinner> <!-- Ignores the global config for the 'size' property --> <plus-spinner size="sm"></plus-spinner> <!-- Initializes the global config --> <script type="module"> import { setConfig } from 'https://esm.run/@htmlplus/ui/config.js'; setConfig({ // ... }); </script> <!-- Loads elements after initialize the global config --> <script type="module"> import "https://esm.run/@htmlplus/ui/spinner"; </script> </body> </html>