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

68
src/pages/PageTodo.vue
View File

@ -1,37 +1,42 @@
<template> <template>
<q-page class="q-pa-md"> <q-page>
<div class="row q-mb-lg"> <div class="q-pa-md absolute full-width full-height column">
<search />
<sort />
</div>
<div class="relative-position"> <div class="row q-mb-lg">
<p <search />
v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length"> <sort />
No Search Results </div>
</p>
<noTasks
v-if="!Object.keys(tasksTodo).length && !search" />
<tasks-todo <q-scroll-area class="q-scroll-area-tasks">
v-if="Object.keys(tasksTodo).length" <p
:tasksTodo="tasksTodo" /> v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
No Search Results
</p>
<noTasks
v-if="!Object.keys(tasksTodo).length && !search" />
<tasks-completed <tasks-todo
v-if="Object.keys(tasksCompleted).length" v-if="Object.keys(tasksTodo).length"
:tasksCompleted="tasksCompleted" /> :tasksTodo="tasksTodo" />
</div>
<div class="absolute-bottom text-center q-mb-lg"> <tasks-completed
<q-btn v-if="Object.keys(tasksCompleted).length"
@click="showAddTask = true" :tasksCompleted="tasksCompleted"
round class="q-mb-xl" />
color="primary" </q-scroll-area>
size="24px"
icon="add" <div class="absolute-bottom text-center q-mb-lg">
/> <q-btn
</div> @click="showAddTask = true"
round
color="primary"
size="24px"
icon="add"
/>
</div>
</div>
<q-dialog v-model="showAddTask"> <q-dialog v-model="showAddTask">
<add-task @close="showAddTask = false" /> <add-task @close="showAddTask = false" />
@ -75,3 +80,10 @@ export default {
} }
} }
</script> </script>
<style>
.q-scroll-area-tasks {
display: flex;
flex-grow: 1;
}
</style>