@divetool/coral
v0.0.7
Published
Web components for the Coral Design System 🪸
Downloads
7
Readme
Coral Vanilla Web Components
The Coral's web components are built using StencilJS. Read more about it in the StencilJS website.
Documentation
Read the full docs at https://divetool.github.io/coral
Getting started
You can start using Coral's web components via 2 methods.
Using the npm module
Install the @divetool/coral package
npm install @divetool/coralDefine Coral components to be used as web-components in your HTML
import { defineCustomElements, applyPolyfills } from '@divetool/coral/loader';
// Define all Coral custom elements
defineCustomElements();
// Or if you need pollyfills to work with custom elements:
applyPolyfills().then(() => {
defineCustomElements();
});You can also define a single component:
import { defineCustomElement as defineCrlButton } from '@divetool/coral/dist/components/crl-button';
// Define CrlButton component
defineCrlButton();In your HTML:
<html>
<body>
<crl-button>Click me</crl-button>
</body>
</html>Script tag or native ESmodule
You can load Coral web components in a website/application by adding the following script tag:
<script
type="module"
src="https://unpkg.com/@divetool/coral/dist/coral/coral.esm.js"
defer
></script><script
type="module"
src="https://cdn.jsdelivr.net/npm/@divetool/coral/dist/coral/coral.esm.js"
defer
></script>Your HTML will look similar to this
<html>
<head>
<script
type="module"
src="https://unpkg.com/@divetool/coral/dist/coral/coral.esm.js"
defer
></script>
</head>
<body>
<crl-button>Click me</crl-button>
</body>
</html>Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement:
<html>
<head>
<script type="module">
import { defineCustomElements } from 'https://unpkg.com/@divetool/coral/loader/index.js';
defineCustomElements();
</script>
</head>
<body>
<crl-button>Click me</crl-button>
</body>
</html>License
This project is licensed under the MIT License.
See LICENSE for more information.