How to customize selected tab styles in Blazor Tabs

14 Aug 20264 minutes to read

The style of the active tab can be customized by overriding the active tab CSS classes. You can also use a HeaderTemplate to add custom HTML (such as images and styled text) to each tab header, and then override the related CSS classes to control how the active tab is displayed.

@using Syncfusion.Blazor.Navigations

<SfTab CssClass="e-tab-custom-class">
    <TabItems>
        <TabItem Content="Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.He is fluent in French and Italian and reads German.He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.">
            <HeaderTemplate>
                <img class="emp" src="https://ej2.syncfusion.com/aspnetcore/css/tab/8.png"/>
                <div class="e-title fade-in">Andrew</div>
            </HeaderTemplate>
        </TabItem>
        <TabItem Content="Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).She was assigned to the London office temporarily from July through November 1992.">
            <HeaderTemplate>
                <img class="emp" src="https://ej2.syncfusion.com/aspnetcore/css/tab/1.png"/>
                <div class="e-title fade-in">Margaret</div>
            </HeaderTemplate>
        </TabItem>
        <TabItem Content="Janet has a BS degree in chemistry from Boston College (1984).She has also completed a certificate program in food retailing management.Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.">
            <HeaderTemplate>
                <img class="emp" src="https://ej2.syncfusion.com/aspnetcore/css/tab/2.png"/>
                <div class="e-title fade-in">Janet</div>
            </HeaderTemplate>
        </TabItem>
    </TabItems>
</SfTab>

<style>
    .e-toolbar-item.e-active .e-tab-wrap .emp {
        display: none;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }

    .e-image {
        background-size: 33px;
        width: 33px;
        height: 30px;
        margin: 0 auto;
    }

    .e-tab .e-toolbar-item .e-title {
        display: none;
    }

    .e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
    .e-toolbar .e-toolbar-items .e-toolbar-item .e-tab-wrap {
        width: 105px;
        height: 50px;
    }

    .e-tab .e-tab-header .e-toolbar-items .e-active .e-tab-wrap {
        background-color: #08c;
    }
    .e-tab .e-tab-header {
        background-color: #e6e6e6;
    }
    .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
    background-color: #f2f2f2;
    color:#000;
    }
    .e-tab .e-toolbar .e-toolbar-items .e-toolbar-item .e-text-wrap {
        height: 50px;
    }

    .e-tab .e-toolbar-items .e-active .e-image {
        display: none;
    }

    .e-tab .e-toolbar-items .e-active .e-title {
        display: block;
        color: white;
    }

    .e-tab .e-toolbar-item .e-text-wrap,
    .e-tab .e-toolbar-item .e-tab-text {
        width:  inherit;
        text-align: center;
    }

    .fade-in {
        opacity: 1;
        animation-name: fadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: 0.5s;
    }

    @@keyframes fadeInOpacity {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
</style>