跳到主要内容
Tabs
选项卡提供了在同一区域呈现多个视图之间的交替展示，用户通过单击某个选项卡来切换展示，一次只能切换展示一个选项卡视图 ，通常用于快速浏览不同视图之间的导航。
用法
样式
可访问性

示例​

基础用法​

  • CabinX的tabs可以嵌套，样式仅区分一二级，更深层级同二级样式；
  • Tabs默认展示第一个选项卡内容，可以通过value自行设置；
  • Tabs容器高度默认100%，也可以通过height自定义。
PCPhonePad
<page>
    <tabs       
        height="500px"
        beforeChange="{{beforeChange}}"
        bind-changed="handleChanged"
    >
      <pannel title="昨日日程" name="yesterday">
         <tabs value="level2-2">
              <pannel title="level2-pannel1" name="level2-1">
                    <tabs value="level3-3">
                      <pannel title="level3-pannel1" name="level3-1">
                        level3-pannel1的内容
                      </pannel>
                      <pannel title="level3-pannel2" name="level3-2">
                        level3-pannel2的内容
                      </pannel>
                      <pannel title="level3-pannel3" name="level3-3">
                        level3-pannel3的内容
                      </pannel>
                    </tabs>
              </pannel>
              <pannel title="level2-pannel2" name="level2-2">
                level2-pannel2的内容
              </pannel>
              <pannel title="level2-pannel3" name="level2-3">
                level2-pannel3的内容
              </pannel>
            </tabs>
      </pannel>
      <pannel title="今日日程" name="today">
       今日日程的内容
      </pannel>
      <pannel title="明日日程" name="tomorrow">
        明日日程的内容
      </pannel>
    </tabs>     
</page>


export default XPage({   
    beforeChange(value, oldValue) {
        console.info('切换前',`${oldValue}即将切换为${value}`);
        return true;
    },

    handleChanged(value) {
        console.info('已切换为', value);
    },
});




溢出​

当选项卡过多超出页面显示宽度，选项卡则会出现溢出，超出部分Tabs将会折叠隐藏在更多按钮内，通过下拉菜单切换隐藏的Tabs；

PCPhonePad
<page>
  <tabs>
    <pannel name="level1-pannel1" title="level1-pannel1">

      <actions>
            <button text="button1"></button><button text="button2"></button><button text="button3"></button><button text="button4"></button><button text="button5"></button>
      </actions>
      <tabs>      
            <pannel name="level2-pannel1" title="level2-pannel1">
            level2-pannel1
              <actions>
                  <button text="button1"></button><button text="button2"></button><button text="button3"></button><button text="button4"></button><button text="button5"></button>
              </actions>
            </pannel>
            <pannel name="level2-pannel2" title="level2-pannel2">level2-pannel2</pannel>
            <pannel name="level2-pannel3" title="level2-pannel3">level2-pannel3</pannel>
            <pannel name="level2-pannel4" title="level2-pannel4">level2-pannel4</pannel>
            <pannel name="level2-pannel5" title="level2-pannel5">level2-pannel5</pannel>
            <pannel name="level2-pannel6" title="level2-pannel6">level2-pannel6</pannel>
            <pannel name="level2-pannel7" title="level2-pannel7">level2-pannel7</pannel>
            <pannel name="level2-pannel8" title="level2-pannel8">level2-pannel8</pannel>
            <pannel name="level2-pannel9" title="level2-pannel9">level2-pannel9</pannel>
            <pannel name="level2-pannel10" title="level2-pannel10">level2-pannel10</pannel>
            <pannel name="level2-pannel11" title="level2-pannel11">level2-pannel11</pannel>
            <pannel name="level2-pannel12" title="level2-pannel12">level2-pannel12</pannel>
            <pannel name="level2-pannel13" title="level2-pannel13">level2-pannel13</pannel>
            <pannel name="level2-pannel14" title="level2-pannel14">level2-pannel14</pannel>
        </tabs>
      
    </pannel>
    <pannel name="level1-pannel2" title="level1-pannel2">level1-pannel2</pannel>
    <pannel name="level1-pannel3" title="level1-pannel3">level1-pannel3</pannel>
    <pannel name="level1-pannel4" title="level1-pannel4">level1-pannel4</pannel>
    <pannel name="level1-pannel5" title="level1-pannel5">level1-pannel5</pannel>
    <pannel name="level1-pannel6" title="level1-pannel6">level1-pannel6</pannel>
    <pannel name="level1-pannel7" title="level1-pannel7">level1-pannel7</pannel>
    <pannel name="level1-pannel8" title="level1-pannel8">level1-pannel8</pannel>
    <pannel name="level1-pannel9" title="level1-pannel9">level1-pannel9</pannel>
    <pannel name="level1-pannel10" title="level1-pannel10">level1-pannel10</pannel>
    <pannel name="level1-pannel11" title="level1-pannel11">level1-pannel11</pannel>
    <pannel name="level1-pannel12" title="level1-pannel12">level1-pannel12</pannel>
    <pannel name="level1-pannel13" title="level1-pannel13">level1-pannel13</pannel>
    <pannel name="level1-pannel14" title="level1-pannel14">level1-pannel14</pannel>
  </tabs>
</page>




export default XPage({
    
});


共享模式​

  • 通常情形下标题Title与Pannel是一一对应的，即一个标题一个对应的Pannel模板，这是一一对应的模式；
  • 当多个标题Title对应的Pannel模板内容有较大共性时，建议使用共享模式，即多个标题Title对应一个Pannel模板。

共享模式需要在Tabs上设置data，标题由该data数据生成，Pannel需要设置name作为归属指向的数组。

当Pannel仅有一个且没有设置name时，则全部Title共享这一个Pannel。

PCPhonePad
<page>
    <module title="指定分享具体Pannel模板" height="300px">
        <tabs data="{{tabsData}}">
          <pannel name="{[1, 2]}">
            记得洗碗
          </pannel>
          <pannel name="{{[3]}}">
            还是洗碗
          </pannel>
        </tabs>
    </module>
    
    <module title="全部标题使用一个Pannel模板" height="300px">
        <tabs data="{{tabsData}}">
          <pannel>
            记得洗碗
          </pannel>
        </tabs>
   </module>
</page>



export default XPage({
    data: {      
      tabsData: [{
        title: '昨日日程',
        name: 1
      }, {
        title: '今日日程',
        name: 2
      }, {
        title: '明日日程',
        name: 3
      }]
    },    
  });




垂直布局​

仅支持一级Tabs垂直布局

PCPhonePad
<page>
    <module title="垂直布局" height="300px">
        <tabs data="{{tabsData}}" layout="vertical">
          <pannel name="{[1,3,5,7,9]}">
            tab1,3,5,7,9
          </pannel>
          <pannel name="{{[2,4,6,8,10]}}">
            tabs2,4,6,8,10
          </pannel>
        </tabs>
    </module>
</page>

export default XPage({
    data: {     
      tabsData: [{
        title: 'tab1',
        name: 1
      }, {
        title: 'tab2',
        name: 2
      }, {
        title: 'tab3',
        name: 3
      }, {
        title: 'tab4',
        name: 4
      }, {
        title: 'tab5',
        name: 5
      }, {
        title: 'tab6',
        name: 6
      }, {
        title: 'tab7',
        name: 7
      }, {
        title: 'tab8',
        name: 8
      }, {
        title: 'tab9',
        name: 9
      }, {
        title: 'tab10',
        name: 10
      }]
    },
  });



Attributes​

属性说明类型可选值默认值端版本
height高度（同原生属性）String--100%PC/Mobile--
value当前选中的 nameString/Number----PC/Mobile--
data自定义头部（分享模式）Array<{title:String显示文案, name:String唯一标识}>----PC/Mobile--
beforeChange改变前钩子函数Function(newValue: any, oldValue: any): Boolean/Promise----PC/Mobile--
noForceRender禁用预渲染所有pannelBoolean--falsePC--
mode隐藏模式，默认none：未激活的pannel不显示且元素不占据空间。order:不显示但元素占据空间。Stringnone/ordernonePC--
layout布局Stringhorizontal/verticalhorizontalPC--
closable是否可关闭Boolean--falsePC--
addable是否可新增Boolean--falsePC--

Attributes - Pannel​

属性说明类型可选值默认值端版本
title名称String----PC/Mobile--
name唯一key值。未设置时默认使用title为唯一key，但必须保证title是唯一且不会变化的String/Array----PC/Mobile--
disabled是否禁用Boolean--falsePC--
tips提示信息String----PC--

Events​

名称说明回调参数端版本
changed切换后触发(name)PC/Mobile--
close点击关闭时触发(name)PC--
add点击新增时触发--PC--