Improve badge option
This commit is contained in:
parent
62e90a0545
commit
7669877a31
8 changed files with 43 additions and 24 deletions
16
src/index.ts
16
src/index.ts
|
@ -18,7 +18,7 @@ interface TabGroupOptions {
|
|||
|
||||
interface TabOptions {
|
||||
active?: boolean;
|
||||
badge?: string;
|
||||
badge?: Badge;
|
||||
closable?: boolean;
|
||||
icon?: string;
|
||||
iconURL?: string;
|
||||
|
@ -29,6 +29,11 @@ interface TabOptions {
|
|||
webviewAttributes?: { [key: string]: any };
|
||||
}
|
||||
|
||||
interface Badge {
|
||||
text: string,
|
||||
classname: string
|
||||
}
|
||||
|
||||
const CLASSNAMES = {
|
||||
ROOT: "etabs",
|
||||
NAV: "nav",
|
||||
|
@ -272,7 +277,7 @@ class TabGroup extends HTMLElement {
|
|||
}
|
||||
|
||||
class Tab extends EventTarget {
|
||||
badge: string;
|
||||
badge: Badge;
|
||||
closable: boolean;
|
||||
icon: string;
|
||||
iconURL: string;
|
||||
|
@ -329,7 +334,7 @@ class Tab extends EventTarget {
|
|||
private initTab() {
|
||||
const tab = this.tab = document.createElement("div");
|
||||
tab.classList.add(CLASSNAMES.TAB);
|
||||
for (let el of ["icon", "title", "close", "badge"]) {
|
||||
for (let el of ["icon", "title", "badge", "close"]) {
|
||||
const span = tab.appendChild(document.createElement("span"));
|
||||
span.classList.add(`${CLASSNAMES.TAB}-${el}`);
|
||||
this.tabElements[el] = span;
|
||||
|
@ -419,13 +424,14 @@ class Tab extends EventTarget {
|
|||
return this.title;
|
||||
}
|
||||
|
||||
setBadge(badge: string) {
|
||||
setBadge(badge?: Badge) {
|
||||
if (this.isClosed) return;
|
||||
const span = this.tabElements.badge;
|
||||
this.badge = badge;
|
||||
|
||||
if (badge) {
|
||||
span.innerHTML = badge;
|
||||
span.innerHTML = badge.text;
|
||||
span.classList.add(badge.classname);
|
||||
span.classList.remove("hidden");
|
||||
} else {
|
||||
span.classList.add("hidden");
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue