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.
File Picker
Quasar comes with a file picker component.
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-file
rounded
outlined
v-model="model"
label="Choose a file"
></q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: undefined
}
});
</script>
</body>
</html>
to add a file input.
The q-file component lets us add a file input easily.
It binds the selected file to a reactive property with v-model .
rounded and outlined are props for styles.
Other props to change styling include square , filled , standout and borderless .
label has the placeholder for the file input.
File Input Decorators
We can add various icons to file inputs.
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-file
rounded
outlined
bottom-slots
v-model="model"
label="Label"
counter
max-files="12"
>
<template v-slot:before>
<q-icon name="attachment"></q-icon>
</template>
<template v-slot:append>
<q-icon
v-if="model !== null"
name="close"
@click.stop="model = null"
class="cursor-pointer"
></q-icon>
<q-icon name="search" @click.stop></q-icon>
</template>
<template v-slot:hint>
Field hint
</template>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: undefined
}
});
</script>
</body>
</html>
to add a file input with various icons.
The before slot lets us add icons to the left side of the file input outside it.
append lets us add content inside the input on the right side.
We can populate the hint slot and add the bottoms-slots property to add text below the file input.
File Input Color
To change colors, we can add the label-color , bg-color , and color props:
<!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-file
clearable
label-color="yellow"
bg-color="green"
standout
bottom-slots
v-model="model"
label="Label"
counter
>
<template v-slot:prepend>
<q-icon color="yellow" name="attach_file"></q-icon>
</template>
<template v-slot:append>
<q-icon color="yellow" name="favorite"></q-icon>
</template>
<template v-slot:hint>
Field hint
</template>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: undefined
}
});
</script>
</body>
</html>
We can change the background color with the bg-color prop.
The label-color prop changes the label color
And the color prop changes the icon color.
Comclusion
We can add a file input into our Vue app with the Quasar library.