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

11.5 Adjustable Header Color

Browse Source
This commit is contained in:
Fredrick W Warren 2021-02-10 10:59:30 -08:00
parent 193c0bada6
commit d16c79dd1e
4 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Shared/ListHeader.vue
View File

@ -2,14 +2,18 @@
<q-banner <q-banner
dense dense
inline-actions inline-actions
class="list-header text-white bg-orange-4 text-center"> class="list-header text-white"
:class="bgColor">
<span class="text-bold text-subtitle1"><slot /></span> <span class="text-bold text-subtitle1"><slot /></span>
</q-banner> </q-banner>
</template> </template>
<script> <script>
export default { export default {
name: 'ListHeader' name: 'ListHeader',
props: [
'bgColor'
]
} }
</script> </script>

4
src/components/Tasks/TasksCompleted.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div class="q-mt-lg">
<list-header>Completed</list-header> <list-header bgColor="bg-green-4">Completed</list-header>
<q-list <q-list
v-if="Object.keys(tasksCompleted).length" v-if="Object.keys(tasksCompleted).length"
separator separator

2
src/components/Tasks/TasksTodo.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<list-header>Todo</list-header> <list-header bgColor="bg-orange-4">Todo</list-header>
<q-list <q-list
v-if="Object.keys(tasksTodo).length" v-if="Object.keys(tasksTodo).length"
separator separator

2
src/pages/PageTodo.vue
View File

@ -4,8 +4,6 @@
<tasks-todo <tasks-todo
:tasksTodo="tasksTodo" /> :tasksTodo="tasksTodo" />
<hr>
<tasks-completed <tasks-completed
:tasksCompleted="tasksCompleted" /> :tasksCompleted="tasksCompleted" />