Ripple Effect on TabStrip Tabs

3 posts, 0 answers
  1. Stelios
    Stelios avatar
    2 posts
    Member since:
    Jul 2019

    Posted 08 Oct 2019 Link to this post

    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!

  2. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 10 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Stelios
    Stelios avatar
    2 posts
    Member since:
    Jul 2019

    Posted 14 Oct 2019 in reply to Svetlin Link to this post

    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

Back to Top