ic-design-system
ic-design-system copied to clipboard
Add guidance on how to load web-components from CDN
It is possible to use the web-components when loading from a CDN. Examples should be added to the site.
May need to review the structure of the Get the components > Web components page to add this
The following are examples (copy the code into a file called "index.html" & open in a browser to test):
Using jsdelivr:
<html>
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ukic/web-components/dist/core/core.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@ukic/web-components/dist/core/core.css" />
<script>function clickhandler(){alert("hello")}</script>
</head>
<body>
<ic-button onclick="clickhandler()">
button
</ic-button>
</body>
</html>
using unpkg:
<html>
<head>
<script type="module" src="https://unpkg.com/@ukic/web-components/dist/core/core.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@ukic/web-components/dist/core/core.css" />
<script>function clickhandler(){alert("hello")}</script>
</head>
<body>
<ic-button onclick="clickhandler()">
button
</ic-button>
</body>
</html>
NOTE: may want to use ic-status-tag on site examples to be consistent with other examples
Should also add an example of how to target a particular version of the components (the above will always pull in the latest release)
consider adding canary web components too