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.
Horizontal Split Screen
We can make a split-screen that’s split horizontally by adding the horizontal prop.
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-splitter horizontal v-model="splitterModel" style="height: 400px;">
<template v-slot:before>
<div class="q-pa-md">
<div class="text-h4 q-mb-md">Before</div>
<div v-for="n in 20" :key="n" class="q-my-md">
{{ n }}. Lorem ipsum
</div>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<div class="text-h4 q-mb-md">After</div>
<div v-for="n in 20" :key="n" class="q-my-md">
{{ n }}. Quis praesentium
</div>
</div>
</template>
</q-splitter>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
splitterModel: 50
}
});
</script>
</body>
</html>
v-model is bound to the splitterModel reactive property is the height of the top panel as a percentage.
Drag Limit
We can set the min and max value for the split-screen by setting the limit prop:
<!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-splitter
:limits="[50, 100]"
v-model="splitterModel"
style="height: 400px;"
>
<template v-slot:before>
<div class="q-pa-md">
<div class="text-h4 q-mb-md">Before</div>
<div v-for="n in 20" :key="n" class="q-my-md">
{{ n }}. Lorem ipsum
</div>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<div class="text-h4 q-mb-md">After</div>
<div v-for="n in 20" :key="n" class="q-my-md">
{{ n }}. Quis praesentium
</div>
</div>
</template>
</q-splitter>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
splitterModel: 50
}
});
</script>
</body>
</html>
We set the limits prop to an array with the min and max percentage of the screen that the left panel takes up.
Split Screen Panel Units
We can change the unit of the size for the panels by setting the unit prop:
<!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-splitter unit="px" v-model="splitterModel" style="height: 400px;">
<template v-slot:before>
<div class="q-pa-md">
<div class="text-h4 q-mb-md">Before</div>
<div v-for="n in 20" :key="n" class="q-my-md">
{{ n }}. Lorem ipsum
</div>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<div class="text-h4 q-mb-md">After</div>
<div v-for="n in 20" :key="n" class="q-my-md">
{{ n }}. Quis praesentium
</div>
</div>
</template>
</q-splitter>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
splitterModel: 150
}
});
</script>
</body>
</html>
The unit prop is set to 'px' to change the unit of splitterModel to pixels.
Conclusion
We can add split-screen panels with various options into our Vue app with Quasar.
