@epigraph/spinner v1.1.4
Import
You need to import our web component module. We recommend that you do this in the head. It's important that type="module"
is specified.
Example
<head>
<script type="module" async src="https://www.unpkg.com/@epigraph/spinner/dist/epigraph-spinner.min.js"></script>
</head>
Usage
You can insert epigraph-spinner elements anywhere you'd like. Epigraph Spinner currently serves one purpose: to embed a spinner directly in your page.
Attributes
Name | Type | Default Value | Description |
---|---|---|---|
sku | String , required | "null" | Insert your product code/item no. for specifying which spinner to load (from our DB). This is a reactive attribute, so changing the sku attribute will force a spinner reload. |
ua-code | String , required | "" | Insert your ua-code for google analytics in order to send analytics event to your dashboard. |
Example: Spinner for all platforms
<epigraph-spinner sku="abc123" ua-code="valid-ua-code"></epigraph-spinner>
Events (with example usage)
"epigraph-valid-product"
You can register to this event from <epigraph-spinner>
to know when <epigraph-spinner>
has successfully fetched a valid product. You can leverage this event to enable custom actions that should only happen for products with epigraph spinners.
// target <epigraph-spinner>
const eSpin = document.querySelector('epigraph-spinner');
// add the event listener
eSpin.addEventListener('epigraph-valid-product', () => {
// do something
})
"epigraph-invalid-product"
You can register to this event from <epigraph-spinner>
to know if <epigraph-spinner>
has failed to fetch a valid product.
// target <epigraph-spinner>
const eSpin = document.querySelector('epigraph-spinner');
// add the event listener
eSpin.addEventListener('epigraph-invalid-product', () => {
// do something
})
Methods
Name | Description |
---|---|
load() | Call this method to set spinner loading to start immediately |
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago