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

Question

我正在构建一个将具有嵌套选项卡的网页。我希望它具有 Material 设计。我一直在使用 Material Design Lite but based on my experience, as well as this, this and this link，我认为 Material Design Lite 不支持或将要支持嵌套选项卡。

那么 which material design framework 我应该在我的网页中使用它来支持嵌套标签吗？

Answer 1

我用MaterializeCSS. Although it is still in beta, Materialize has a good set of components and it is updated quite often. Here is an example of simple nested 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 设计框架来支持网站中的嵌套选项卡？

Which Material Design framework can I use for supporting Nested Tabs in my website?

jquery

tabs

nested

material-design

material-design-lite