Material Design Lite - 选项卡

Material Design Lite（MDL）是谷歌推出的一个用于建立 Material Design 模式的轻量级框架。它是专为那些喜欢 Material Design 但不想使用 Google 的 Material Design 框架而设计的。MDL 支持响应式设计，可以轻松从桌面设备转向移动设备；同时，它还可以与其他框架和库一起使用。

其中一个重要的组件是选项卡，它是让用户轻松访问相关信息的一种方式。本文将介绍 MDL 选项卡的用法。

基本选项卡

在 HTML 中，MDL 选项卡由一个 tab bar 作为容器和一组 tab 组成，每个选项卡都有一个关联的 panel。panel 中包含的内容将与选项卡一起显示。

HTML 代码

<div class="mdl-tabs mdl-js-tabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#panel1" class="mdl-tabs__tab">Tab 1</a>
    <a href="#panel2" class="mdl-tabs__tab">Tab 2</a>
    <a href="#panel3" class="mdl-tabs__tab">Tab 3</a>
  </div>

  <div class="mdl-tabs__panel" id="panel1">
    <p>Content of Tab 1</p>
  </div>
  <div class="mdl-tabs__panel" id="panel2">
    <p>Content of Tab 2</p>
  </div>
  <div class="mdl-tabs__panel" id="panel3">
    <p>Content of Tab 3</p>
  </div>
</div>

效果展示

代码解释

• mdl-tabs - 选项卡的主容器，在这个元素上添加 mdl-js-tabs 类来告诉 MDL 这是一个选项卡。
• mdl-tabs__tab-bar - 选项卡的标签栏。
• mdl-tabs__tab - 标签栏上的选项卡，每个选项卡都有一个关联的面板。
• mdl-tabs__panel - 面板容器，其中包含与选项卡相关的内容。您可以使用 ID 和 href 属性来将选项卡与面板相关联。

CSS 类

MDL 选项卡使用以下 CSS 类来定义外观和行为：

• mdl-tabs__tab-bar - 选项卡标签栏。
• mdl-tabs__tab - 标签栏上的选项卡。
• mdl-tabs__panel - 面板容器。
• is-active - 活动选项卡和面板添加此类。
• is-disabled - 配置此类来禁用特定的选项卡。

可滚动选项卡

如果您有很多选项卡，您可以使用可滚动标签栏。使用可滚动选项卡时，标签栏只显示它可以包含的选项卡数量；如果有更多的选项卡，用户可以通过向左或向右滚动来查看它们。

这里详细介绍该功能的实现方法：

HTML 代码

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect mdl-tabs--scrollable">
  <div class="mdl-tabs__tab-bar">
    <a href="#scroll-tab-1" class="mdl-tabs__tab">Scroll Tab 1</a>
    <a href="#scroll-tab-2" class="mdl-tabs__tab">Scroll Tab 2</a>
    <a href="#scroll-tab-3" class="mdl-tabs__tab">Scroll Tab 3</a>
    <!-- Add more tabs here -->
  </div>

  <div class="mdl-tabs__panel" id="scroll-tab-1">
    <p>Content of Scroll Tab 1</p>
  </div>
  <div class="mdl-tabs__panel" id="scroll-tab-2">
    <p>Content of Scroll Tab 2</p>
  </div>
  <div class="mdl-tabs__panel" id="scroll-tab-3">
    <p>Content of Scroll Tab 3</p>
  </div>
  <!-- Add more panels here -->
</div>

效果展示

代码解释

• mdl-tabs--scrollable - 将此类应用于选项卡的主容器以启用滚动标签栏。
• 其余的 HTML 结构与基本选项卡是相同的。

CSS 类

MDL 将使用以下 CSS 类来定义外观和行为：

• mdl-tabs--scrollable - 可滚动选项卡的主容器。
• mdl-tabs__tab-bar - 选项卡标签栏。
• mdl-tabs__tab - 标签栏上的选项卡。
• mdl-tabs__panel - 面板容器。
• is-active - 活动选项卡和面板添加此类。
• is-disabled - 配置此类来禁用特定的选项卡。
• mdl-tabs__tab-container - 在可滚动选项卡中，Tab 容器获得此类，该类定义了一个基于 Flexbox 的容器，其中可以容纳多个 Tab。

带图标的选项卡

对于带有图标的选项卡，需要将图标添加到选项卡上。MDL 支持选项卡图标的使用，您只需要在 a 标签中添加一个适当的 icon HTML 元素。

HTML 代码

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
    <a href="#icon-tab-1" class="mdl-tabs__tab"><i class="material-icons">home</i> Home</a>
    <a href="#icon-tab-2" class="mdl-tabs__tab"><i class="material-icons">info</i> About</a>
    <a href="#icon-tab-3" class="mdl-tabs__tab"><i class="material-icons">contact_mail</i> Contact</a>
  </div>

  <div class="mdl-tabs__panel" id="icon-tab-1">
    <p>Content of Icon Tab 1</p>
  </div>
  <div class="mdl-tabs__panel" id="icon-tab-2">
    <p>Content of Icon Tab 2</p>
  </div>
  <div class="mdl-tabs__panel" id="icon-tab-3">
    <p>Content of Icon Tab 3</p>
  </div>
</div>

效果展示

代码解释

• material-icons - 在选项卡中使用 Material Design Icons。
• 观察其他 HTML 结构，它们与基本选项卡相同。

CSS 类

• material-icons - 图标元素中添加此类可以帮助分离图标和文本。
• 其他类与基本选项卡相同。

自定义选项卡

您可以使用 CSS 类自定义 MDL 选项卡的样式，使其更加适合您的应用程序。MDL 框架在选项卡上使用了多个 CSS 类，您可以针对不同的类添加自定义样式。

HTML 代码

<div class="custom-tabs mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="custom-tabs__tab-bar mdl-tabs__tab-bar">
    <a href="#custom-tab-1" class="custom-tabs__tab mdl-tabs__tab is-active">Custom Tab 1</a>
    <a href="#custom-tab-2" class="custom-tabs__tab mdl-tabs__tab">Custom Tab 2</a>
    <a href="#custom-tab-3" class="custom-tabs__tab mdl-tabs__tab">Custom Tab 3</a>
  </div>

  <div class="mdl-tabs__panel is-active" id="custom-tab-1">
    <p>Content of Custom Tab 1</p>
  </div>
  <div class="mdl-tabs__panel" id="custom-tab-2">
    <p>Content of Custom Tab 2</p>
  </div>
  <div class="mdl-tabs__panel" id="custom-tab-3">
    <p>Content of Custom Tab 3</p>
  </div>
</div>

效果展示

代码解释

• 我们在 MDL 选项卡 HTML 中添加了一个名为“custom-tabs”的 CSS 类。
• 现在，我们在每个选项卡上使用名为“custom-tabs__tab”的 CSS 类，并将其与名为“mdl-tabs__tab”的 CSS 类一起使用。这将使我们有关于这些选项卡的更多控制权，并允许我们更容易地添加自定义样式。
• 我们还在第一个选项卡上使用了名为“is-active”的 CSS 类，以便在页面加载时默认激活该选项卡。

CSS 类

• custom-tabs__tab-bar - 选项卡显示下面的条形。
• custom-tabs__tab - 选项卡。
• is-active - 活动选项卡和面板添加此类。
• 其他类与基本选项卡相同。

总结

本文介绍了 MDL 选项卡的用法。您了解了如何使用选项卡、可滚动选项卡和带有图标的选项卡，并了解了如何自定义 MDL 选项卡的样式。

如果您想了解更多有关 MDL 的内容，请前往官方网站 https://getmdl.io/components/index.html 查看。