Ripple Effect on TabStrip Tabs

[Stelios]

Hello,

Could you tell me if there is a way to implement the ripple effect provided by the kendoRippleContainer while selecting a tab of a TabStrip?

If it is not possible, are there any future plans regarding such an implementation?

Thanks in advance!

[Svet]

Hi Stelios,

In general, the default Kendo ripple effect can be applied to any focusable element located within a kendoRippleContainer element as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/ripple/

The tabs of the TabStrip are represented as li items within the DOM (which are non focusable elements). That is why, the ripple effect is missing by default on them. However as a workaround we could use the TabTitle directive of the TabStrip in order to use buttons for the actual tabs. The buttons are focusable elements and thus the ripple effect will be applied to them. These buttons can be further customized via some custom CSS in order to resemble the desired appearance.

Another option is to manually attach the '.k-button' class to all li elements that are used for the tabs. Please check the following example demonstrating the two suggestions:

https://stackblitz.com/edit/angular-aixgxj?file=app/app.component.ts

I hope this helps. Let me know in case there is something unclear about the provided example.

Regards,
Svetlin
Progress Telerik

[Stelios]

Thanks for the help. I was hoping for a more out-of-the-box implementation, but the examples you provided were very helpful.

Kind Regards,

Stelios