Custom UI

Accordion Component

Contenido de Item 1 Contenido de Item 2 Contenido de Item 3
html 
<app-accordion>
  <app-accordion-item data-title="Item1">Contenido de Item 1</app-accordion-item>
  <app-accordion-item data-title="Item2">Contenido de Item 2</app-accordion-item>
  <app-accordion-item data-title="Item3">Contenido de Item 3</app-accordion-item>
</app-accordion>

Los archivos fuente deben estar ambos en la misma carpeta (por ejemplo, /accordion).

JavaScript:
accordion.js
CSS:
accordion.css

Para usarlo en la página hay que copiar el siguiente código:

javascript 
import {AccordionComponent, AccordionItemComponent } from '/accordion/accordion.js';
customElements.define('app-accordion', AccordionComponent);
customElements.define('app-accordion-item', AccordionItemComponent);

Para personalizar el componente se pueden modificar las siguientes variables CSS:

css 
app-accordion {
  --acc-background-color: [color-value];
  --acc-border-color: [color-value];
  --acc-item-title-font-family: [font-family-value];
  --acc-item-title-font-size: [font-size-value];
  --acc-item-title-font-weight: [font-weight-value];
  --acc-item-title-background-color: [background-color-value];
  --acc-item-title-hover-background-color: [background-color-value];
  --acc-item-title-padding: [padding-value];
  --acc-item-title-arrow-color: [color-value];
  --acc-item-title-arrow-display: [display-value];
  --acc-item-content-background-color: [background-color-value];
  --acc-item-content-padding: [padding-value];                    
}