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.
Align Self
We can use the self-* classes to add the align-self CSS property into our child elements.
Horizontal Alignment
We can use the justify-* classes to horizontally align child elements.
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">
<div class="row justify-center">
<div class="col-4">
1
</div>
<div class="col-4">
2
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We add the justify-center class to center the child divs.
Also, we can add justify-start to align the child divs on the left.
justify-end align the child divs on the right.
justify-around spaces the child divs with even spacing in between them.
And justify-between spaces the child divs with space between them.
Column Wrapping
Columns will wrap to the next row automatically if the width exceeds 12 columns.
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">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We have col-6 to make the div 6 columns wide if the screen hits the xs breakpoint.
col-sm-3 makes the div 3 columns if the screen hits the sm breakpoint or higher.
Offsetting Columns
We can use the offset-* classes to move divs by a given number of columns.
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](https://medium.com/r/?url=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%3A100%2C300%2C400%2C500%2C700%2C900%7CMaterial%2BIcons)"
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">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We have offset-md-4 to shift the div 4 columns to the right if the screen hits the md breakpoint or wider.
Nesting
Also, we can nest flexbox rows and columns.
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">
<div class="row">
<div class="col-sm-9">
<p>Level 1</p>
<div class="row">
<div class="col-8 col-sm-6">
Level 2
</div>
<div class="col-4 col-sm-6">
Level 2
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
to nest a row inside another column.
Conclusion
We can apply various flexbox CSS properties with the classes provided by Quasar.
