diff --git a/electron-tabs.css b/electron-tabs.css index 6cec355..a1a0df4 100644 --- a/electron-tabs.css +++ b/electron-tabs.css @@ -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; diff --git a/index.js b/index.js index 62882b9..7728e3c 100644 --- a/index.js +++ b/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)();