Skip to content

Latest commit

 

History

History
325 lines (261 loc) · 8.54 KB

xy-tab.md

File metadata and controls

325 lines (261 loc) · 8.54 KB
Raw

xy-tab

标签页。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-tab.js';
</script>
<!-- 使用 -->
<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3">tab3</xy-tab-content>
</xy-tab>

xy-tab需和xy-tab-content组合使用。

名称label

每个xy-tab-content需要指定一个名称label，用于显示标签头。

tab1 tab2 tab3 
<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3">tab3</xy-tab-content>
</xy-tab>

JavaScript操作get、set

作用于xy-tab-content

//xy-tab-content
content.label;
content.label = 'tab';
//原生属性操作
content.getAttribute('label');
content.setAttribute('label','tab');

禁用disabled

每个xy-tab-content可以指定disabled属性，用来禁用该标签页。

tab1 tab2 tab3 
<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2" disabled>tab2</xy-tab-content>
    <xy-tab-content label="tab3">tab3</xy-tab-content>
</xy-tab>

JavaScript操作get、set

作用于xy-tab-content

//xy-tab-content
content.disabled;
content.disabled = true;
content.disabled = false;
//原生属性操作
content.getAttribute('disabled');
content.setAttribute('disabled','');
content.removeAttribute('disabled');

标识key、activekey

每个xy-tab-content需要指定一个标识key，没有会默认以序列号为key，

activekey作用在xy-tab上，可以指定切换到具体标签页，也可以指定初始值。

tab1 tab2 tab3 跳转tab3 
<xy-tab activekey="B">
    <xy-tab-content label="tab1" key="A">tab1</xy-tab-content>
    <xy-tab-content label="tab2" key="B">tab2</xy-tab-content>
    <xy-tab-content label="tab3" key="C">tab3</xy-tab-content>
</xy-tab>
<xy-button type="primary" onclick="this.previousElementSibling.activekey='C'">跳转tab3</xy-button>

JavaScript操作get、set

tab.activekey;
tab.activekey = 'key';
//原生属性操作
tab.getAttribute('activekey');
tab.setAttribute('activekey','key');

图标icon

每个xy-tab-content可以指定icon，配合label实现图标加文字的效果。

tab1 tab2 tab3 
<xy-tab>
    <xy-tab-content label="home" icon="home">tab1</xy-tab-content>
    <xy-tab-content label="message" icon="message">tab2</xy-tab-content>
    <xy-tab-content label="user" icon="user">tab3</xy-tab-content>
</xy-tab>

也可以单独指定icon，不使用label。

tab1 tab2 tab3 
<xy-tab>
    <xy-tab-content icon="home">tab1</xy-tab-content>
    <xy-tab-content icon="message">tab2</xy-tab-content>
    <xy-tab-content icon="user">tab3</xy-tab-content>
</xy-tab>

JavaScript操作get、set

作用于xy-tab-content

//xy-tab-content
content.icon;
content.icon = 'name';
//原生属性操作
content.getAttribute('icon');
content.setAttribute('icon','name');

风格type

可选择标签页风格，flat、card，默认为flat

  • card卡片式风格，通常适用于有背景的卡片中
  • line线框式风格
flat card line tab1 tab2 tab3 <style> xy-tab[type="card"]{ background:#f1f1f1; } </style> 
xy-tab[type="card"]{
    padding:.8em; 
    background:#f1f1f1;
}
<xy-tab type="card">
    ...
</xy-tab>

纯CSS修改(属性选择器)，当设置成card或者line风格时，容器不再有滚动动画

对齐align

设置标签头的对齐方式，默认为start(居左)，可设置center(居中)、end（居右）

start center end tab1 tab2 tab3 
<xy-tab type="card" align="center">
    ...
</xy-tab>

JavaScript操作get、set

作用于xy-tab

//xy-tab
tab.align;
tab.align = 'center';
//原生属性操作
tab.getAttribute('align');
tab.setAttribute('align','center');

事件event

onchange

xy-tab切换完成时触发。

tab1 tab2 tab3 
<xy-tab onchange="XyMessage.info(event.detail.label)">
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3">tab3</xy-tab-content>
</xy-tab>
tab.onchange = function(ev){
    //获取key、index和label的几种方式
    /*
    event:{
        detail:{
            key,
            index,
            label,
        }
    }
    */
    const { key, index, label } = ev.detail;
    console.log(key, index, label);
}

tab.addEventListener('change',function(ev){
    const { key, index, label } = ev.detail;
    console.log(key, index, label);
})

其他

当tab比较多时，超出范围，会自动滚动。

tab1 tab2 tab3 tab4 tab5 tab6 tab7 tab8 tab9 tab10

各个组件相互独立，可以随意嵌套，如下。

1-tab1 1-tab2 1-tab3 tab2 tab3 
<xy-tab>
    <xy-tab-content label="tab1">
        <xy-tab>
            <xy-tab-content label="1-tab1">1-tab1</xy-tab-content>
            <xy-tab-content label="1-tab2">1-tab2</xy-tab-content>
            <xy-tab-content label="1-tab3">1-tab3</xy-tab-content>
        </xy-tab>
    </xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3">tab3</xy-tab-content>
</xy-tab>