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.
Customizing Inputs
We can add more customizations for our Quasar text input fields.
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-input
standout
bottom-slots
v-model="text"
label="Label"
counter
maxlength="12"
>
<template v-slot:before>
<q-avatar>
<img src="https://cdn.quasar.dev/img/avatar5.jpg" />
</q-avatar>
</template>
<template v-slot:append>
<q-icon
v-if="text !== ''"
name="close"
@click="text = ''"
class="cursor-pointer"
></q-icon>
<q-icon name="schedule"></q-icon>
</template>
<template v-slot:hint>
Field hint
</template>
<template v-slot:after>
<q-btn round dense flat icon="send"></q-btn>
</template>
</q-input>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: ""
}
});
</script>
</body>
</html>
The before slot is used to add an avatar left of the input.
It’ll be placed outside the input.
The append slot adds an ‘x’ icon into the right side of the input.
When we click it, it clears the text.
Also, we have another icon in the same slot.
The hint slot adds text below the input.
And the after slot has another button that’s shown outside the input box on the right side.
Text Input Field in Toolbars
We can add a text input field into a toolbar.
To do this, 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;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-toolbar class="bg-primary text-white rounded-borders">
<q-btn round dense flat icon="menu" class="q-mr-xs"></q-btn>
<q-avatar class="gt-xs">
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
</q-avatar>
<q-space></q-space>
<q-input
dark
dense
standout
v-model="text"
input-class="text-right"
class="q-ml-md"
>
<template v-slot:append>
<q-icon v-if="text === ''" name="search"></q-icon>
<q-icon
v-else
name="clear"
class="cursor-pointer"
@click="text = ''"
>
</q-icon>
</template>
</q-input>
</q-toolbar>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: ""
}
});
</script>
</body>
</html>
We add the q-toolbar with a q-btn for the menu.
The q-space component is a spacer component.
The q-input is pushed to the right with the q-space component.
The append slot has the icons for clearing the input if something is entered and an search icon is displayed otherwise.
Conclusion
We can add input boxes into toolbars in a Vue app with the Quasar library.
