Ripple effect not working

kaneshparmarvl commented 8 years ago

When you place button (mdl="button") inside tabs ( mdl="tabs") then button is visible working fine however its ripple effect does not work.

rquast commented 8 years ago

+1 ... just noticed this problem.

rquast commented 8 years ago

For anyone who is using this, mdl tabs are a bit painful. They don't give your tabs any lifecycle hooks because all mdl tabs does is change the active class.

Here is a workaround I use for mdl-tabs so I get both the ripple effect and the lifecycle hooks.

      <!-- tabs bar -->
      <div mdl="tabs" class="mdl-js-ripple-effect">
        <div class="mdl-tabs__tab-bar">
          <a href="#context-settings" class="mdl-tabs__tab is-active" click.delegate="showTab('context-settings')">Context Settings</a>
          <a href="#change-log" class="mdl-tabs__tab" click.delegate="showTab('change-log')">Change Log</a>
          <a href="#support-files" class="mdl-tabs__tab" click.delegate="showTab('support-files')">Support Files</a>
        </div>
        <span id="context-settings"></span><span id="change-log"></span><span id="support-files"></span>
      </div>
      <!-- tabs bar -->

      <!-- tab content -->
      <div class="mdl-cell mdl-cell--12-col mdl-card--expand">
        <compose view-model="./${activeTab}"></compose>
      </div>
      <!-- tab content -->

redpelicans / aurelia-material

Ripple effect not working #4