QTabs 🗂️
Use QTabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place. QTabPane is just a tab wrapper.
Examples
All kind of types:
Template:
<template>
<q-tabs v-model="activeTab">
<q-tab-pane
name="first"
title="First tab"
/>
<q-tab-pane
name="second"
title="Second tab"
/>
<q-tab-pane
name="third"
title="Third tab"
/>
</q-tabs>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Instance:
export default {
setup() {
const activeTab = ref('first');
const activeTab1 = ref('first');
return { activeTab, activeTab1 };
}
};
2
3
4
5
6
7
8
Props
modelValue
- Type:
String - Default:
null
The binding value.
NOTE:
The modelValue MUST match one of <q-tab-pane> name prop to set it active.
<template>
<q-tabs
v-model="activeTab"
>
<q-tab-pane
name="first"
...
>
...
</template>
2
3
4
5
6
7
8
9
10
export default {
setup() {
const activeTab = ref('first');
return { activeTab };
}
};
2
3
4
5
6
7
tabWidth
- Type:
String|Number - Default:
null
Defines a width for all QTabPanes.
<template>
<q-tabs tab-width="100">
<q-tab-pane
name="first"
title="First tab"
/>
<q-tab-pane
name="second"
title="Second tab"
/>
<q-tab-pane
name="third"
title="Third tab"
/>
</q-tabs>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Live demo:
disabled
- Type:
Boolean - Default:
false
Whether QTabs is disabled
<template>
<q-tabs disabled>
<q-tab-pane
name="first"
title="First tab"
/>
<q-tab-pane
name="second"
title="Second tab"
/>
<q-tab-pane
name="third"
title="Third tab"
/>
</q-tabs>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Events
update:modelValue
Triggers when the modelValue updates
change
Alias for update:modelValue
Slots
default
QTabs main content (used to pass QTabPanes)
<q-tabs>
<q-tab-pane />
</q-tabs>
2
3
QTabPane 🌯
QTabPane is the wrapper for the tab.
QTabPane Props
name
- Type:
String - Required:
true
The key that compares with QTabs modelValue to define it's state. (active or not)
<template>
<q-tabs>
<q-tab-pane
name="tab_name"
...
/>
</q-tabs>
</template>
2
3
4
5
6
7
8
title
- Type:
String - Required:
true
The tab title.
<template>
<q-tabs>
<q-tab-pane
title="Tab title"
...
/>
</q-tabs>
</template>
2
3
4
5
6
7
8
width
- Type:
String|Number - Default:
null
Allows to set custom width of each QTabPane
<template>
<q-tabs>
<q-tab-pane
width="200"
...
/>
</q-tabs>
</template>
2
3
4
5
6
7
8
disabled
- Type:
Boolean - Default:
false
Whether QTabPane is disabled.
<template>
<q-tabs>
<q-tab-pane
disabled
...
/>
</q-tabs>
</template>
2
3
4
5
6
7
8
QTabPane Slots
content
Slot for QTabPane content
<template>
<q-tabs v-model="activeTab">
...
<q-tab-pane
name="tab_tip"
title="Tab with slot"
>
<template #content>
<q-popover
title="title"
icon="q-icon-question"
>
<template #reference>
<q-button
class="button"
circle
type="icon"
theme="secondary"
size="small"
icon="q-icon-question-mark"
/>
</template>
Content
</q-popover>
</template>
</q-tab-pane>
</q-tabs>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29