Mit dem Material Design Light / Material Design Paket ist es nicht möglich verschachtelte Tabs/Karteireiter zu erstellen. Es wird darauf hingewiesen, dass es aus UI Sicht ungünstig ist, die Tabs zu verschachteln. Wenn es aber nicht anders geht, kann folgender Code verwendet werden:
HTML/Markup:
<div class="mdl-tabs mdl-js-tabs ds-tabs">
<div class="mdl-tabs__tab-bar mdl-tabs__tab-bar-top">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">Tab 1</a>
<a href="#tab2-panel" class="mdl-tabs__tab">Tab 2</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1-panel">
<div class="mdl-tabs ds-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab-1-1-panel" class="mdl-tabs__tab is-active">Tab 1.1</a>
<a href="#tab-1-2-panel" class="mdl-tabs__tab">Tab 1.2</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab-1-1-panel">
1.1
</div>
<div class="mdl-tabs__panel" id="tab-1-2-panel">
1.2
</div>
</div>
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
<div class="mdl-tabs ds-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab-2-1-panel" class="mdl-tabs__tab is-active">Tab 2.1</a>
<a href="#tab-2-2-panel" class="mdl-tabs__tab">Tab 2.2</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab-2-1-panel">
2.1
</div>
<div class="mdl-tabs__panel" id="tab-2-2-panel">
2.2
</div>
</div>
</div>
</div>
JavaScript:
<script type="text/javascript">/* <![CDATA[ */
jQuery(document).ready(function() {
jQuery('.ds-tabs .mdl-tabs__tab').unbind('click').off('click').on('click', function(event) {
event.stopImmediatePropagation();
if (jQuery(this).hasClass('is-active'))
{
return false;
}
else
{
jQuery(this).parent().children('.is-active').removeClass('is-active');
jQuery(this).addClass('is-active');
jQuery(this).parent().parent().children('.mdl-tabs__panel.is-active').removeClass('is-active');
jQuery(this).parent().parent().children('.mdl-tabs__panel' + jQuery(this).attr("href")).addClass('is-active');
}
return false;
} );
} );
/* ]]> */</script>
Wichtig ist die Klasse „ds-tabs“ auf dem umschließenden Element.