Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Tabs with Dropdown
We can add tabs with a dropdown item.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-tabs v-model="tab" inline-label class="bg-yellow shadow-2">
<q-tab name="mails" label="Mails" icon="mail"></q-tab>
<q-tab name="alarms" label="Alarms" icon="alarm"></q-tab>
<q-btn-dropdown auto-close stretch flat icon="more" label="More...">
<q-list>
<q-item clickable @click="tab = 'movies'">
<q-item-section>Movies</q-item-section>
</q-item>
<q-item clickable @click="tab = 'photos'">
<q-item-section>Photos</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</q-tabs>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
tab: undefined
}
});
</script>
</body>
</html>
We add the q-btn-dropdown inside the q-tabs component to add a dropdown button.
And the q-list is displayed as the dropdown list.
Tab Toolbar
We can use q-tabs in a q-toolbar .
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-toolbar class="bg-purple text-white shadow-2 rounded-borders">
<q-btn flat label="Homepage"></q-btn>
<q-space> </q-space>
<q-tabs v-model="tab" shrink stretch>
<q-tab name="tab1" label="Tab 1"></q-tab>
<q-tab name="tab2" label="Tab 2"></q-tab>
<q-tab name="tab3" label="Tab 3"></q-tab>
</q-tabs>
</q-toolbar>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
tab: undefined
}
});
</script>
</body>
</html>
We add the shrink and strech props to fill the available space while avoiding filling the whole toolbar.
Dynamic Tabs
We can display tabs dynamically with v-for :
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-tabs v-model="tab" inline-label shrink stretch>
<q-tab v-for="tab in tabs" :key="tab.name" v-bind="tab" />
</q-tabs>
</div>
</q-layout>
</div>
<script>
const tabs = [
{ name: "mails", icon: "mail", label: "Mails" },
{ name: "alarms", icon: "alarm", label: "Alarms" },
{ name: "movies", icon: "movie", label: "Movies" }
];
new Vue({
el: "#q-app",
data: {
tab: undefined,
tabs
}
});
</script>
</body>
</html>
Tab Panel
We can display tab panels when we click on a tab.
To add them, we write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-card>
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab name="mails" label="Mails"></q-tab>
<q-tab name="alarms" label="Alarms"></q-tab>
<q-tab name="movies" label="Movies"></q-tab>
</q-tabs>
<q-separator></q-separator>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="mails">
<div class="text-h6">Mails</div>
Lorem ipsum
</q-tab-panel>
<q-tab-panel name="alarms">
<div class="text-h6">Alarms</div>
Lorem ipsum
</q-tab-panel>
<q-tab-panel name="movies">
<div class="text-h6">Movies</div>
Lorem ipsum
</q-tab-panel>
</q-tab-panels>
</q-card>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
tab: "mails"
}
});
</script>
</body>
</html>
We set the name prop of the q-tab and q-tab-panel to match so that we click on it, then the tab panel we want will be displayed.
Conclusion
We can add tabs with dropdowns and add tab panels with Quasar’s tab components.
