It is a set of usefull components. Developer following a Stencil JS training. Don't look at the size of the package, it's a practice, stencil doesn't seem to be a good solution to be used outside of a stencil project. For the moment I have developed two components:
- sticky-header
- modal
npm i usf-stencil-components
import { StickyHeader, Modal } from 'usf-stencil-components/dist/components';
customElements.define('usf-sticky-header', StickyHeader);
customElements.define('usf-modal', Modal);
How to import it into his vanilla js project:
import { StickyHeader } from 'usf-stencil-components/dist/components';
customElements.define('usf-sticky-header', StickyHeader);
// or
import { defineCustomElement as UsfStickyHeader} from 'usf-stencil-components/dist/components/usf-sticky-header';
UsfStickyHeader();
How to use it in html:
<usf-sticky-header threshold="600">
put what you want here
</usf-sticky-header>
- threshold: number
- gluedStart: boolean
- gluedActive: boolean
How to import it into his vanilla js project:
import { Modal } from 'usf-stencil-components/dist/components';
customElements.define('usf-sticky-header', Modal);
// or
import { defineCustomElement as UsfModal} from 'usf-stencil-components/dist/components/usf-modal';
UsfModal();
How to use it in html:
<usf-modal>
put what you want here
</usf-modal>
- open(): pour ouvrir la modal
- close(): pour fermer la modal
Example of using the methods:
const openModalBtn = document.querySelector('#open-modal-btn');
const modal = document.querySelector('usf-modal');
openModalBtn.addEventListener('click', () => {
if (!modal.opened) {
modal.open();
}
});