Hi Sumair,
Thank you for contacting Syncfusion support.
We have prepared a sample based on your requirement. Please download a sample from the following link
We suggest to use the cssClass property of tab to add custom css to tab header. In the above sample, we have added ripple effect by using the below code.
|
<ej-tab cssClass="custom">
…
</ej-tab>
.custom.e-tab .e-bottom-line.e-item.e-active .e-link:after{
animation: e-ripple .55s linear;
background: #fff;
color: #000;
}
.custom.e-tab .e-bottom-line.e-item{
position: relative;
}
.custom.e-tab .e-bottom-line.e-item .e-link:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 4px;
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
@keyframes e-ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
2% {
transform: scale(1, 1);
opacity: 1;
}
5% {
transform: scale(2, 2);
opacity: 1;
}
10% {
transform: scale(4, 4);
opacity: 1;
}
25% {
transform: scale(7, 7);
opacity: 1;
}
100% {
opacity: 1;
transform: scale(10, 20);
}
} |
You can modify these styles based on your scenario.
Regards,
Keerthana
