Tutorials/Quasar_Todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

14.10 Add a Scroll Area

Browse Source
This commit is contained in:
Fredrick W Warren 2021-02-11 14:23:41 -08:00
parent 2f86fc56ce
commit 6932084040
1 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/PageTodo.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<q-page class="q-pa-md"> <q-page>
<div class="q-pa-md absolute full-width full-height column">
<div class="row q-mb-lg"> <div class="row q-mb-lg">
<search /> <search />
<sort /> <sort />
</div> </div>
<div class="relative-position"> <q-scroll-area class="q-scroll-area-tasks">
<p <p
v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length"> v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
No Search Results No Search Results
@ -20,8 +22,9 @@
<tasks-completed <tasks-completed
v-if="Object.keys(tasksCompleted).length" v-if="Object.keys(tasksCompleted).length"
:tasksCompleted="tasksCompleted" /> :tasksCompleted="tasksCompleted"
</div> class="q-mb-xl" />
</q-scroll-area>
<div class="absolute-bottom text-center q-mb-lg"> <div class="absolute-bottom text-center q-mb-lg">
<q-btn <q-btn
@ -33,6 +36,8 @@
/> />
</div> </div>
</div>
<q-dialog v-model="showAddTask"> <q-dialog v-model="showAddTask">
<add-task @close="showAddTask = false" /> <add-task @close="showAddTask = false" />
</q-dialog> </q-dialog>
@ -75,3 +80,10 @@ export default {
} }
} }
</script> </script>
<style>
.q-scroll-area-tasks {
display: flex;
flex-grow: 1;
}
</style>