Hi,
I am currently facing an issue with the ripple effect not working when placed inside Tabs component. Here’s my code:
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
<a href="#tab-2" class="tab-link">Tab 2</a>
<a href="#tab-3" class="tab-link">Tab 3</a>
</div>
</div>
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab-1" class="page-content tab tab-active">
<div class="list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<i class="material-icons">assignment_ind</i>
</div>
<div class="item-inner">
<div class="item-title">Carlo Fontanos</div>
<div class="item-after">88%</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<i class="material-icons">assignment_ind</i>
</div>
<div class="item-inner">
<div class="item-title">Ivan Petrov</div>
<div class="item-after">82%</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<i class="material-icons">assignment_ind</i>
</div>
<div class="item-inner">
<div class="item-title">Andre Mclenesh</div>
<div class="item-after">78%</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<i class="material-icons">assignment_ind</i>
</div>
<div class="item-inner">
<div class="item-title">Greg Adamson</div>
<div class="item-after">65%</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<i class="material-icons">assignment_ind</i>
</div>
<div class="item-inner">
<div class="item-title">Ben Madison</div>
<div class="item-after">64%</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<i class="material-icons">assignment_ind</i>
</div>
<div class="item-inner">
<div class="item-title">James Galiger</div>
<div class="item-after">52%</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div id="tab-2" class="page-content tab">
<div class="list">
<ul>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Carlo Fontanos</div> <div class="item-after">88%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Greg Adamson</div> <div class="item-after">82%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ben Madison</div> <div class="item-after">78%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ivan Petrov</div> <div class="item-after">65%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Andre Mclenesh</div> <div class="item-after">64%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">James Galiger</div> <div class="item-after">52%</div> </div> </a> </li>
</ul>
</div>
</div>
<div id="tab-3" class="page-content tab">
<div class="list">
<ul>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Andre Mclenesh</div> <div class="item-after">88%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ben Madison</div> <div class="item-after">82%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Carlo Fontanos</div> <div class="item-after">78%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Greg Adamson</div> <div class="item-after">65%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">Ivan Petrov</div> <div class="item-after">64%</div> </div> </a> </li>
<li> <a href="#" class="item-link item-content"> <div class="item-media"> <i class="material-icons">assignment_ind</i> </div> <div class="item-inner"> <div class="item-title">James Galiger</div> <div class="item-after">52%</div> </div> </a> </li>
</ul>
</div>
</div>
</div>
</div>