MontoyaTech/ignite-html-tabs
MontoyaTech/ignite-html-tabs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added ability to specify multiple tab names and updated documentation.

Browse Source
This commit is contained in:
MattMo 2023-09-17 17:41:54 -07:00
parent c84d10dfb9
commit 4a00f20935
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ignite-html-tabs.js
View File

@ -3,7 +3,7 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
/** /**
* Makes this IgniteTemplate a tab that will become active or inactive based on the state of the tab. * Makes this IgniteTemplate a tab that will become active or inactive based on the state of the tab.
* @param {String} name The name of the tab. * @param {String|String[]} name The name of the tab. If an array is passed, this tab can activate is more than one tab is active.
* @param {String} group The tab group to put this tab under, by default this is null. * @param {String} group The tab group to put this tab under, by default this is null.
* @param {Boolean} active Whether or not this tab is active by default. * @param {Boolean} active Whether or not this tab is active by default.
* @param {Function} showCallback Called when this tab is changed to the shown state. * @param {Function} showCallback Called when this tab is changed to the shown state.
@ -25,7 +25,16 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
//the event listener. //the event listener.
var callback = new IgniteCallback(event => { var callback = new IgniteCallback(event => {
if (this.element) { if (this.element) {
if (event.name == name && event.group == group) { if (event.group == group && Array.isArray(name) && name.includes(event.name)) {
if (!this.element.classList.contains("active")) {
this.element.classList.add("active");
//Invoke the show callback if there is one.
if (showCallback) {
showCallback();
}
}
} else if (event.name == name && event.group == group) {
if (!this.element.classList.contains("active")) { if (!this.element.classList.contains("active")) {
this.element.classList.add("active"); this.element.classList.add("active");