Customization

Styling Tabbar

There is a possibility to make changes in the look and feel of a tabbar.

Related sample: Tabbar. Styling (custom CSS)

For this you need to take the following steps:

• add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case)

<style>
    .my_first_class {
        /*some styles*/
    }
    
    .my_second_class {
        /*some styles*/
    }
</style>

• specify the name of the created CSS class (or names of classes separated by spaces) as the value of the css property in the Tabbar configuration:

const tabbar = new dhx.Tabbar("tabbar_container", {
    css:"my_first_class my_second_class"
});

For example:

<style>
    .custom .dhx_tabbar-tab-button--active {
        background-color: rgb(2, 136, 209);
        color: var(--dhx-color-white);
    }
    .custom .dhx_tabbar-header-active {
        background-color: #ff5252;
    }
</style>

<script>
    const tabbar = new dhx.Tabbar("tabbar_container", {
        mode: "top",
        css: "custom",
        tabAlign: "center",
        views: [
            // view objects
        ]
    });
</script>