Tab 图标

标签页，其中r-tab需要和r-tabs搭配使用

代码演示

111112222233333

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

属性

标签名label

r-tab的属性，设置标签的名称

111112222233333

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

活跃标签active，标签的唯一标识r-key

• r-key是r-tab的属性，用于确定同一个r-tabs下r-tab的唯一值。如果r-key没有设置，默认等于index。(不采用key字段是防止key是保留字段)
• active是r-tabs的属性，用于设置活跃的标签。active等于key的标签为活跃标签。

1. 没有设置key

111112222233333

 <r-tabs active="1">
        <r-tab label="tab1">11111</r-tab>
        <r-tab label="tab2">22222</r-tab>
        <r-tab label="tab3">33333</r-tab>
 </r-tabs>

1. 设置key

1111122222333334

    <r-tabs active="c">
      <r-tab label="tab1" r-key="a">11111</r-tab>
      <r-tab label="tab2" r-key="b">22222</r-tab>
      <r-tab label="tab3" r-key="c">33333</r-tab>
      <r-tab label="tab4">4</r-tab>
    </r-tabs>

图标icon

r-tab 支持 icon 属性（r-icon 图标名），显示在标签文字前；iconSize 设置图标大小。

111112222233333

<r-tabs>
      <r-tab label="tab1" icon="edit">11111</r-tab>
      <r-tab label="tab2" icon="delete" iconSize="16">22222</r-tab>
      <r-tab label="tab3">33333</r-tab>
</r-tabs>

不可操作disabled

设置不可点击的标签

1111122222333334

    <r-tabs active="c">
      <r-tab label="tab1" r-key="a" disabled>11111</r-tab>
      <r-tab label="tab2" r-key="b">22222</r-tab>
      <r-tab label="tab3" r-key="c">33333</r-tab>
      <r-tab label="tab4">4</r-tab>
    </r-tabs>

类型type

r-tabs属性，设置标签页的种类。如果不设置，默认为flat

1. flat

111112222233333

<r-tabs type="flat">
      <r-tab label="tab1">11111</r-tab>
      <r-tab label="tab2">22222</r-tab>
      <r-tab label="tab3">33333</r-tab>
</r-tabs>

2. line

111112222233333

<r-tabs type="line">
      <r-tab label="tab1">11111</r-tab>
      <r-tab label="tab2">22222</r-tab>
      <r-tab label="tab3">33333</r-tab>
</r-tabs>

对齐方式align

设置标签的对齐方式，默认align="start"

1. start

111112222233333

 <r-tabs type="line" align="start">
        <r-tab label="tab1">11111</r-tab>
        <r-tab label="tab2">22222</r-tab>
        <r-tab label="tab3">33333</r-tab>
    </r-tabs>

2. center

111112222233333

 <r-tabs type="line" align="center">
        <r-tab label="tab1">11111</r-tab>
        <r-tab label="tab2">22222</r-tab>
        <r-tab label="tab3">33333</r-tab>
    </r-tabs>

3. end

111112222233333

 <r-tabs type="line" align="end">
        <r-tab label="tab1">11111</r-tab>
        <r-tab label="tab2">22222</r-tab>
        <r-tab label="tab3">33333</r-tab>
    </r-tabs>

事件

change

当激活的标签切换时，r-tabs 会派发 change CustomEvent。event.detail.active 为新的激活键（选中 r-tab 的 r-key，未设置时为其索引）。

const tabs = document.querySelector('r-tabs');
tabs.addEventListener('change', (e) => {
  console.log('active tab:', e.detail.active);
});