Materialize-css 选项卡

Materialize-css 选项卡是基于 Google 的 Material Design 设计规范开发的，可以方便快捷地创建漂亮的选项卡。

特点

• 响应式设计
• 支持滑动和点击切换选项卡
• 支持图标和文本的混合使用
• 支持自定义主题颜色和动画效果

安装

你可以通过 CDN 或者下载源代码来使用 Materialize-css 选项卡。这里我们以 CDN 的方式演示：

<!-- 引入 Materialize-css 样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- 引入 JQuery 和 Materialize-css JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

用法

基本用法

要使用 Materialize-css 选项卡，你只需要在 HTML 中添加以下代码：

<ul class="tabs">
  <li class="tab col s3"><a href="#tab1">选项卡 1</a></li>
  <li class="tab col s3"><a href="#tab2">选项卡 2</a></li>
  <li class="tab col s3"><a href="#tab3">选项卡 3</a></li>
</ul>
<div id="tab1" class="col s12">这是选项卡 1 的内容。</div>
<div id="tab2" class="col s12">这是选项卡 2 的内容。</div>
<div id="tab3" class="col s12">这是选项卡 3 的内容。</div>

其中，.tabs 类用于表示选项卡容器，.tab 类用于表示每个选项卡，.col 类用于表示内容所在的列。href 属性用于指定选项卡的标识符，同时也可以作为锚点。选项卡的文本需要放在 a 标签中。

混合图标和文本

你也可以在选项卡中混合使用图标和文本。要实现这个效果，你可以使用 i 标签添加图标，实例如下：

<ul class="tabs">
  <li class="tab col s3"><a href="#tab1"><i class="material-icons left">favorite_border</i>选项卡 1</a></li>
  <li class="tab col s3"><a href="#tab2"><i class="material-icons left">shopping_cart</i>选项卡 2</a></li>
  <li class="tab col s3"><a href="#tab3"><i class="material-icons left">group</i>选项卡 3</a></li>
</ul>

配置选项卡颜色

你可以通过在选项卡上添加 .indigo、.red、.green、.amber 等颜色类来配置选项卡的颜色。例如：

<ul class="tabs tabs-fixed-width tabs-transparent">
  <li class="tab col s3 indigo"><a href="#tab1">选项卡 1</a></li>
  <li class="tab col s3 red"><a href="#tab2">选项卡 2</a></li>
  <li class="tab col s3 green"><a href="#tab3">选项卡 3</a></li>
  <li class="tab col s3 amber"><a href="#tab4">选项卡 4</a></li>
</ul>

在这个示例中，我们添加了 .tabs-fixed-width 类来固定选项卡的宽度，并添加了 .tabs-transparent 类来使选项卡与背景完全透明。

配置切换动画

你可以通过配置 JavaScript 实现选项卡的切换动画。例如：

<ul class="tabs">
  <li class="tab col s3"><a href="#tab1">选项卡 1</a></li>
  <li class="tab col s3"><a href="#tab2">选项卡 2</a></li>
  <li class="tab col s3"><a href="#tab3">选项卡 3</a></li>
</ul>
<div id="tab1" class="col s12">这是选项卡 1 的内容。</div>
<div id="tab2" class="col s12">这是选项卡 2 的内容。</div>
<div id="tab3" class="col s12">这是选项卡 3 的内容。</div>

<script>
  $(document).ready(function(){
    $('.tabs').tabs({
      swipeable: true,
      responsiveThreshold: 1920,
      duration: 300,
      onShow: function(tab) {
        console.log(tab.id + ' 切换到了！');
      }
    });
  });
</script>

在这个示例中，我们使用了 $().tabs() 方法来初始化选项卡。其中，swipeable 表示是否支持滑动切换选项卡，responsiveThreshold 表示屏幕宽度大于这个值时关闭滑动切换，duration 表示切换动画的持续时间，onShow 表示选项卡切换后回调的方法。

总结

本文介绍了 Materialize-css 选项卡的基本用法，以及如何使用图标、配置颜色和动画效果。希望对您有所帮助！