Tab

Code demo

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>

Attribute

label

Each 'r-tab' needs to specify a name 'label', which is used to display the label header.

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

Each 'r-tab' can be specified with the 'disabled' attribute to disable the TAB.

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>

Identifies' key ', 'active'

Each 'r-tab' needs to specify an identifier 'key', no default sequence number is' key ',

'active' works on 'r-tabs' and can specify a switch to a specific TAB or an initial value.

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

Each 'r-tab' can specify 'icon', with 'label' to achieve the effect of icon plus text.

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>

It is also possible to specify 'icon' alone, without using 'label'. However, in this case, the size of the icon must be set, otherwise the size of the icon cannot be judged

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'

The style is text, clean,

event '

onchange

Triggered when the switch is complete.