Tab

代码展示

tab1tab2tab3

<r-tabs>
    <r-tab label="tab1">tab1</r-tab>
    <r-tab label="tab2">tab2</r-tab>
    <r-tab label="tab3">tab3</r-tab>
</r-tabs>

属性

名称label

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

tab1tab2tab3

<r-tabs>
    <r-tab label="tab1">tab1</r-tab>
    <r-tab label="tab2">tab2</r-tab>
    <r-tab label="tab3">tab3</r-tab>
</r-tabs>

禁用disabled

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

tab1tab2tab3

<r-tabs>
    <r-tab label="tab1">tab1</r-tab>
    <r-tab label="tab2" disabled>tab2</r-tab>
    <r-tab label="tab3">tab3</r-tab>
</r-tabs>

标识key,active

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

active作用在r-tabs上，可以指定切换到具体标签页，也可以指定初始值。

tab1tab2tab3

<r-tabs active="B">
  <r-tab label="tab1" r-key="A">tab1</r-tab>
  <r-tab label="tab2" r-key="B">tab2</r-tab>
  <r-tab label="tab3" r-key="C">tab3</r-tab>
</r-tabs>

图标icon

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

tab1tab2tab3

<r-tabs>
  <r-tab label="home" icon="home">tab1</r-tab>
  <r-tab label="message" icon="message">tab2</r-tab>
  <r-tab label="user" icon="user">tab3</r-tab>
</r-tabs>

也可以单独指定icon，不使用label。但这种情况必须要设置icon的size，否则无法判断icon的大小

tab1tab2tab3

<r-tabs>
  <r-tab icon="home" iconSize="22">tab1</r-tab>
  <r-tab icon="message" iconSize="22">tab2</r-tab>
  <r-tab icon="user" iconSize="22">tab3</r-tab>
</r-tabs>

风格type

风格有 text，clean,

对齐align

事件event

onchange

切换完成时触发。