Reload

Package	@schukai/component-form
Import	import {Reload} from "https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/reload.js";

Usage

The Reload component allows the user to reload a content via URL. The content is reloaded only when the element is in the viewport. The IntersectionObserver API is used. If you want to load the tab fresh from the server for each show, you can specify the attribute data-monster-reload.

It is important to follow the CORS guidelines.


// reload element
const reload = document.createElement('monster-reload');

// loader content
const defaultContent = document.createElement('div');
defaultContent.innerHTML='load'
reload.appendChild(defaultContent);

// fetch follow url
reload.setAttribute('data-monster-url','https://monsterjs.org/assets/16-forms-reload-content.html')

// append element 
document.getElementById('example').appendChild(reload);


<monster-reload data-monster-url="https://monsterjs.org/assets/16-forms-reload-content.html">
    <div slot="default">load</div>
</monster-reload>

Events

The following events are fired by the component.

monster-fetched

Layout

The tabs control can be customized to your own needs. For this purpose, the control can be designed via css.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.


#reload::part(container) {
    background-color: white;
}

The individual parts and slots are shown in the following picture.