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.
Dropdown
We can add a dropdown into our Vue app with the q-select component.
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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
outlined
v-model="model"
:options="options"
label="Outlined"
>
</q-select>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
options: ["apple", "orange", "grape"],
model: ""
}
});
</script>
</body>
</html>
We add the q-select component with the options prop to add the options.
outlined adds an outline to the dropdown.
Other styles include filled , rounded , borderless , square , and standout .
They can be combined to make different styles.
Dropdown Decorators
We can add icons into our dropdown.
For example, 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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
outlined
v-model="model"
:options="options"
dense
:options-dense="options"
>
<template v-slot:prepend>
<q-icon name="event"></q-icon>
</template>
</q-select>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
options: ["apple", "orange", "grape"],
model: ""
}
});
</script>
</body>
</html>
We populate the prepend slot with an icon to add one to the left side.
Also, we can add other items. For example, 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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
outlined
v-model="model"
:options="options"
dense
:options-dense="options"
bottom-slots
>
<template v-slot:before>
<q-icon name="flight_takeoff"></q-icon>
</template>
<template v-slot:append>
<q-icon
v-if="model !== ''"
name="close"
@click.stop="model = ''"
class="cursor-pointer"
/>
<q-icon name="search" @click.stop></q-icon>
</template>
<template v-slot:hint>
Field hint
</template>
</q-select>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
options: ["apple", "orange", "grape"],
model: ""
}
});
</script>
</body>
</html>
The before slot lets us add items to the left of the dropdown outside it.
The append slot lets us add items to the right side inside the dropdown.
The hint slot lets us add a hint when it’s added along with the bottoms-slots prop.
Conclusion
We can add dropdowns with various kinds of addons into our Vue app with the Quasar library.
