Tabs

Examples

Basic

<u-tabs>
    <u-tab title="TabA">ContentA</u-tab>
    <u-tab title="TabB">ContentB</u-tab>
    <u-tab title="TabC">ContentC</u-tab>
</u-tabs>

Index

<u-tabs :index="2">
    <u-tab title="TabA">ContentA</u-tab>
    <u-tab title="TabB">ContentB</u-tab>
    <u-tab title="TabC">ContentC</u-tab>
</u-tabs>

Readonly & Disabled

<u-tabs readonly>
    <u-tab title="TabA">Readonly</u-tab>
    <u-tab title="TabB">Readonly</u-tab>
    <u-tab title="TabC">Readonly</u-tab>
</u-tabs>
<u-tabs disabled>
    <u-tab title="TabA">Disabled All</u-tab>
    <u-tab title="TabB">Disabled All</u-tab>
    <u-tab title="TabC">Disabled All</u-tab>
</u-tabs>
<u-tabs>
    <u-tab title="TabA">Disabled Partially</u-tab>
    <u-tab title="TabB" disabled>Disabled Partially</u-tab>
    <u-tab title="TabC">Disabled Partially</u-tab>
</u-tabs>

Hidden

<u-tabs :index="2">
    <u-tab title="TabA">ContentA</u-tab>
    <u-tab title="TabB" hidden>ContentB</u-tab>
    <u-tab title="TabC">ContentC</u-tab>
</u-tabs>

Tabs API

Attrs/Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | index.sync | Number | 0 | Index of selected tab | | readonly | Boolean | false | Readonly | | disabled | Boolean | false | Disabled | | router | Boolean | false | Use vue router to activate |

Slots

| Name | Description | | ---- | ----------- | | (default) | |

Events

@select

Emit when selecting a tab.

| Property | Type | Description | | -------- | ---- | ----------- | | index | Number | Index of selected tab | | $Tab | Tab | The selected tab |

@input

Emit after selecting a tab.

| Property | Type | Description | | -------- | ---- | ----------- | | index | Number | Index of selected tab |

Tab API

Attrs/Props

| Attr/Prop | Type | Default | Description | | --------- | ---- | ------- | ----------- | | title | String | | Tab title | | hidden | Boolean | false | Hide this tab | | disabled | Boolean | false | Disabled | | to | String | Object | | The target location of this link | | replace | Boolean | false | Setting replace prop will call router.replace() instead of router.push() when clicked | | exact | Boolean | false | Active matching behavior is inclusive match |

Slots

| Slot | Description | | ---- | ----------- | | (default) | |

Events

@navigate

Emit when navigating to other router.

| Property | Type | Description | | -------- | ---- | ----------- | | to | Object | The target location of this link | | replace | Boolean | Setting replace prop will call router.replace() instead of router.push() when clicked | | exact | Boolean | Active matching behavior is inclusive match |