Amaze UI

Web 组件

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 class="">
      <a href="[data-tab-panel-1]">彩虹</a>
    </li>
    <li class="">
      <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 class="">
      <a href="[data-tab-panel-1]">彩虹</a>
    </li>
    <li class="">
      <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

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

Amaze UI 1.0

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

return data;

Amaze UI 0.9

var data = [
  {
    "header":    "",  // 选项卡标题
    "substance": "",  // 选项卡内容
    "class":     ""   // 显示当前默认被选中的选项卡标题以及其内容,值是"active",如果有多个选项,只允许一个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 微信
在微信上关注我们