Utilización de componentes de forma independiente

Documentación sobre el uso de componentes interactivos

La ventaja de usar componentes independientes, es que se pueden ocupar sin necesidad de tener que aplicar el kit completo. Esto permite que se puedan ocupar componentes puntuales en proyectos que no necesariamente requieran de todo el kit.

Para usar los componentes de manera aislada, existen dos formas, vía npm o directamente desde el CDN.

Estos son los componentes que actualmente están disponibles para ser usados.

1import { Accordion } from "@ussebastian/kitdigital/dist/components/esm/Accordion.js";
2window.addEventListener("DOMContentLoaded", () => {
3  const accordionElements = document.querySelectorAll("[data-uss-carousel]");
4  const accordionInstance = new Accordion(accordionElements[0]);
5  accordionInstance.mount();
6});

1import { Carousel } from "@ussebastian/kitdigital/dist/components/esm/Carousel.js";
2
3const carouselElements = document.querySelectorAll("[data-uss-carousel]");
4if (carouselElements.length > 0) {
5  window.carouselInstances = [];
6  for (let i = 0; i < carouselElements.length; i += 1) {
7    window.carouselInstances[i] = new carousel(carouselElements[i]);
8    window.carouselInstances[i].mount();
9  }
10}

1import { Tabs } from "@ussebastian/kitdigital/dist/components/esm/Tabs.js";
2
3window.addEventListener("DOMContentLoaded", () => {
4  const tabElements = document.getElementsByClassName("uss-tab");
5  if (tabElements.length > 0) {
6    window.tabInstances = [];
7    for (let i = 0; i < tabElements.length; i += 1) {
8      window.tabInstances[i] = new Tab(tabElements[i]);
9      window.tabInstances[i].mount();
10    }
11  }
12});

1import { Modal } from "@ussebastian/kitdigital/dist/components/esm/Modal.js";
2window.addEventListener("DOMContentLoaded", () => {
3  const modalElements = document.getElementsByClassName("uss-tab");
4  const modalInstance = new ComponentModal(modalElements[0]);
5  modalInstance.mount();
6});