Question

我正在构建一个将拥有嵌套标签的网页。我希望它有材料设计。我一直在使用Material Design Lite，但根据我的经验，以及this，this和this链接，我认为Material Design Lite不支持或不会支持嵌套选项卡。

因此我应该使用which material design framework来支持网页中的嵌套标签吗？

Answer 1

我使用MaterializeCSS。虽然它仍处于测试阶段，但Materialise有一套很好的组件，并且经常更新。以下是简单嵌套tabs的示例。

$(() => {
  $('ul.tabs').tabs();
});

body {
  padding-top: 1em;
  background: skyblue;
}

div[id] {
  padding-top: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

<div class="row">
  <div class="col s12">
    <ul class="tabs z-depth-1">
      <li class="tab"><a href="#first-tab">First tab</a></li>
      <li class="tab"><a href="#second-tab">Second tab</a></li>
    </ul>
    <div id="first-tab">First tab</div>
    <div id="second-tab">
      <ul class="tabs z-depth-1">
        <li class="tab"><a href="#second-child-first">First child tab</a></li>
        <li class="tab"><a href="#second-child-second">Second child tab</a></li>
      </ul>
      <div id="second-child-first">Second child first</div>
      <div id="second-child-second">Second child second</div>
    </div>
  </div>
</div>

我可以使用哪个Material Design框架来支持我网站中的嵌套选项卡？

1 个答案: