Add support for badges
This commit is contained in:
parent
869fd7e45b
commit
24ba56dcd3
2 changed files with 38 additions and 1 deletions
|
@ -72,6 +72,21 @@
|
|||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.etabs-tab-badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -7px;
|
||||
background: red;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.etabs-tab-badge.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.etabs-tab-icon {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
|
|
24
index.js
24
index.js
|
@ -123,6 +123,7 @@ class Tab extends EventEmitter {
|
|||
this.tabGroup = tabGroup;
|
||||
this.id = id;
|
||||
this.title = args.title;
|
||||
this.badge = args.badge;
|
||||
this.iconURL = args.iconURL;
|
||||
this.icon = args.icon;
|
||||
this.closable = args.closable === false ? false : true;
|
||||
|
@ -155,7 +156,27 @@ class Tab extends EventEmitter {
|
|||
if (this.isClosed) return;
|
||||
return this.title;
|
||||
}
|
||||
|
||||
setBadge (badge) {
|
||||
if (this.isClosed) return;
|
||||
let span = this.tabElements.badge;
|
||||
span.innerHTML = badge;
|
||||
this.badge = badge;
|
||||
|
||||
if (!badge) {
|
||||
span.classList.add('hidden');
|
||||
} else {
|
||||
span.classList.remove('hidden');
|
||||
}
|
||||
|
||||
this.emit("badge-changed", badge, this);
|
||||
}
|
||||
|
||||
getBadge () {
|
||||
if (this.isClosed) return;
|
||||
return this.badge;
|
||||
}
|
||||
|
||||
setIcon (iconURL, icon) {
|
||||
if (this.isClosed) return;
|
||||
this.iconURL = iconURL;
|
||||
|
@ -248,13 +269,14 @@ const TabPrivate = {
|
|||
// Create tab element
|
||||
let tab = this.tab = document.createElement("div");
|
||||
tab.classList.add(tabClass);
|
||||
for (let el of ["icon", "title", "buttons"]) {
|
||||
for (let el of ["icon", "title", "buttons", "badge"]) {
|
||||
let span = tab.appendChild(document.createElement("span"));
|
||||
span.classList.add(`${tabClass}-${el}`);
|
||||
this.tabElements[el] = span;
|
||||
}
|
||||
|
||||
this.setTitle(this.title);
|
||||
this.setBadge(this.badge);
|
||||
this.setIcon(this.iconURL, this.icon);
|
||||
TabPrivate.initTabButtons.bind(this)();
|
||||
TabPrivate.initTabClickHandler.bind(this)();
|
||||
|
|
Loading…
Reference in a new issue