How to apply different styles to e-tabitem

[Cosmin Budac]

Hi,

Currently, I am using the following class to style the content of the tab items:

.e-tab .e-content .e-item.e-active {
    background-color: gray;
    padding: 2rem;
}

But this applies to all tab items in a tab.

How can I apply different styles to different tab items? 

[Ruksar Moosa Sait]

Hi Cosmin,

We have checked on your query and suggest you set the id value to the Tab which will generate the id values to each tab items. Using the respective tab item id you can customize each tab like the below code. Kindly try the below sample and let us know if this meets your requirements.

[app.component.html]

<ejs-tab
id="DefaultTab"
heightAdjustMode='Auto'>

[app.component.css]

#e-item-DefaultTab_0,

#e-content-DefaultTab_0{

    background-color: rgb(168, 125, 125);

    padding: 2rem;

}

#e-item-DefaultTab_1,

#e-content-DefaultTab_1{

    background-color: rgb(168, 55, 55);

    padding: 2rem;

}

#e-item-DefaultTab_2,

#e-content-DefaultTab_2{

    background-color: rgb(230, 154, 154);

    padding: 2rem;

}

Sample: https://stackblitz.com/edit/angular-rtvjw6?file=app.component.css,app.component.html

Output:

Regards,

Ruksar Moosa Sait

[Cosmin Budac]

Thank you!

[Ravikumar Venkatesan]

Hi Cosmin,

Thanks for the update.

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan