tabTemplate
Optional. A callback function that defines the template for rendering HTML content in the titles of all tabs
Usage
tabTemplate?: (cell: object, activeTab: string) => string;
Tabbar calls the function for each tab with the following parameters:
cell- (object) the configuration object of the current tab (id,tab,html, etc.)activeTab- (string) the id of the currently active tab
The function returns an HTML string. Tabbar inserts the returned value into the DOM of the tab.
Example
<script>
const tabbar = new dhx.Tabbar("tabbar_container", {
mode: "top",
css: "dhx_widget--bordered",
tabTemplate: (cell, activeTab) => {
const isActive = cell.id === activeTab;
return `
<i class="icon icon-${cell.icon}"></i>
<span class="${isActive ? "tab-title tab-title--active" : "tab-title"}">${cell.tab}</span>
`;
},
views: [
{ id: "vilnius", tab: "Vilnius", icon: "cloud", html: "..." },
{ id: "paris", tab: "Paris", icon: "sun", html: "..." },
{ id: "london", tab: "London", icon: "rain", html: "..." },
{ id: "rome", tab: "Rome", icon: "sun", html: "..." }
]
});
</script>
The way Tabbar renders tabs depends on the tabTemplate option:
tabTemplateisn't set - Tabbar renders each tab as plain texttabTemplateis set - Tabbar calls the function for each tab and inserts the returned HTML string into the DOM of the tab
The tab property of a tab is always a string. Tabbar never interprets it as HTML, whether you use tabTemplate or not. The user-defined tabTemplate function controls the rendering of all the tabs of Tabbar and is fully responsible for forming their markup.
Related sample: Tabbar. Tab with HTML template