Formatting Tabber
- BI Next Level
- Mar 23, 2022
- 1 min read
Updated: Mar 25, 2022
Most of the Sisense users are aware of and using Tabber plugin. By default, it comes with some basic styles like color, height etc. Sometimes we may need to apply more styles to the tabber. It can be achieved by using below script
widget.on('ready',function(w, e) {
basicstyle = { 'font-size':'15px', 'padding':'10px 20px', 'transition':'all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s'} //style for both active and inactive tabs
activeTabSyle = {'background-color': '#a8325e', 'color':'#ffffff', 'border':'none','border-radius':'5px'} //style for active tab
inactiveTabStyle = {'background-color': '#ffffff', 'color':'#858c87', 'border-bottom':'3px #d4d4d4 solid', 'border-radius':'0px'} //style for inactive tab
$('.listDefaultCSS .listItemDefaultCSS', element).css(basicstyle)
$('.vSeparatorCSS', element).css({'border': 'none'})
$(`.listDefaultCSS .listItemDefaultCSS[index=${w.style.activeTab}]`, element).css(activeTabSyle)
$(`.listDefaultCSS .listItemDefaultCSS:not([index=${w.style.activeTab}])`, element).css(inactiveTabStyle)
$('.listDefaultCSS .listItemDefaultCSS', element).on('click', function(s){
$(`.listDefaultCSS .listItemDefaultCSS:contains("${$(s)[0].currentTarget.innerHTML}")`, element).css(activeTabSyle)
$(`.listDefaultCSS .listItemDefaultCSS:not(:contains("${$(s)[0].currentTarget.innerHTML}"))`, element).css(inactiveTabStyle)
})
})You can also set a default tab when page loads. In below code, update "Tab 3" with name of tab which needs to set as default.
widget.style.activeTab = widget.tabs.findIndex(el=>el.title == "Tab 3") //To set default tabber
Great script here BI Next Level team!
My only point of feedback is the script code for ensuring the Tabber widget defaults to a specified tab.
Here's the full revised widget script:
---
widget.on('ready', function(w, e) {
// --- Step 1: Define styles ---
const activeTabSyle = {'background-color': '#0d0c41', 'color':'#ffffff', 'border':'none', 'border-radius':'5px'};
const inactiveTabStyle = {'background-color': '#ffffff', 'color':'#858c87', 'border-bottom':'3px #d4d4d4 solid', 'border-radius':'0px'};
const basicstyle = { 'font-size':'20px', 'padding':'10px 20px', 'transition':'all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s'};
// --- Step 2: Apply base formatting and set up the click handler ---
// Store a reference to all tabs for efficiency
const $allTabs = $('.listDefaultCSS .listItemDefaultCSS', element);
// Apply universal base styles
$allTabs.css(basicstyle);
$('.vSeparatorCSS', element).css({'border': 'none'});
// Set the initial visual…