diff --git a/README.md b/README.md index 3ef3e0d..c16bcc8 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,7 @@ Add a new tab to the tab group and returns a `Tab` instance. * `title`: tab title. * `src`: URL to the page which will be loaded into the view. This is actually the same than `options.webview.src`. +* `badge`: optional text to put into a badge, badge will be hidden if it's falsey * `iconURL`: optional URL to the tab icon. * `icon`: optional code for a tab icon. Can be used with symbol libraries (example with Font Awesome: `icon: 'fa fa-icon-name'`). This attribute is ignored if an `iconURL` was given. * `closable` (default: `true`): if set to `true` the close button won't be displayed and the user won't be able to close the tab. See also `tab.close()`. @@ -99,6 +100,14 @@ Set tab title. Get current tab title. +#### `tab.setBadge(badge)` + +Set tab badge. + +#### `tab.getBadge()` + +Get current tab badge. + #### `tab.setIcon (iconURL, icon)` Set tab icon (a iconURL or an icon must be given). 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 9cb3540..ff44f3a 100644 --- a/index.js +++ b/index.js @@ -127,6 +127,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; @@ -156,7 +157,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; @@ -249,13 +270,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)();