Tabs 选项卡

选项卡组件。

组件演示

default（蓝色选项卡）

【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。

【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。

【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。

  <div data-am-widget="tabs"
       class="am-tabs am-tabs-default"
        >
      <ul class="am-tabs-nav am-cf">
          <li class="am-active"><a href="[data-tab-panel-0]">青春</a></li>
          <li><a href="[data-tab-panel-1]">彩虹</a></li>
          <li><a href="[data-tab-panel-2]">歌唱</a></li>
      </ul>
      <div class="am-tabs-bd">
          <div data-tab-panel-0 class="am-tab-panel am-active">
            【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-1 class="am-tab-panel ">
            【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-2 class="am-tab-panel ">
            【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
      </div>
  </div>

d2（下边框选项卡）

  <div data-am-widget="tabs"
       class="am-tabs am-tabs-d2"
        >
      <ul class="am-tabs-nav am-cf">
          <li class="am-active"><a href="[data-tab-panel-0]">青春</a></li>
          <li><a href="[data-tab-panel-1]">彩虹</a></li>
          <li><a href="[data-tab-panel-2]">歌唱</a></li>
      </ul>
      <div class="am-tabs-bd">
          <div data-tab-panel-0 class="am-tab-panel am-active">
            【青春】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-1 class="am-tab-panel ">
            【彩虹】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
          <div data-tab-panel-2 class="am-tab-panel ">
            【歌唱】那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
          </div>
      </div>
  </div>

使用方法

直接使用

拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 tabs，使用细节参照折叠面板组件。

云适配 WebIDE

将组件拖入编辑界面；
点击右侧面板里的【数据采集】按钮，按以下格式采集数据。

var data = [
  {
    "title":   "",   // 选项卡标题
    "content": "",   // 选项卡内容
    "active":  false // 是否激活当前选项卡，true | false，只允许一个 Tab 标记为激活
  }
];

return data;

数据接口

{
  "id": "",

  "className": "",

  "theme": "",

  "options": {
    "noSwipe": false; // 是否禁用触控操作
  }

  "content": [
    {
      "title": "",
      "content": "",
      "active": ""
    }
  ]
}

常见问题

如何禁用触控操作？

在容器上添加 data-am-tabs-noswipe="1"。

<div data-am-widget="tabs" class="am-tabs am-tabs-default" data-am-tabs-noswipe="1">

Amaze UI

Web 组件