38 lines
960 B
JavaScript
38 lines
960 B
JavaScript
|
/**
|
||
|
|
* TabPanel web component
|
||
|
|
*
|
||
|
|
* A simple tab switcher. Reads the `active` attribute to determine which tab
|
||
|
|
* is visible. Without JS, both panels are visible (tab buttons hidden via CSS).
|
||
|
|
*/
|
||
|
|
class TabPanel extends HTMLElement {
|
||
|
|
connectedCallback() {
|
||
|
|
this.querySelectorAll(".tab-button").forEach((button) => {
|
||
|
|
button.addEventListener("click", () => {
|
||
|
|
this.setAttribute("active", button.dataset.tab);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
static get observedAttributes() {
|
||
|
|
return ["active"];
|
||
|
|
}
|
||
|
|
|
||
|
|
attributeChangedCallback(name) {
|
||
|
|
if (name === "active") this.#updateVisibility();
|
||
|
|
}
|
||
|
|
|
||
|
|
#updateVisibility() {
|
||
|
|
const active = this.getAttribute("active");
|
||
|
|
|
||
|
|
this.querySelectorAll(".tab-button").forEach((button) => {
|
||
|
|
button.classList.toggle("active", button.dataset.tab === active);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.querySelectorAll(".tab-content").forEach((content) => {
|
||
|
|
content.hidden = content.dataset.tab !== active;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define("tab-panel", TabPanel);
|