wtsang11 / TechExplore

MIT License
0 stars 0 forks source link

Create Todo App - Step 2 #170

Open wtsang11 opened 2 years ago

wtsang11 commented 2 years ago

Create the List of Tasks with Hard Coded Data

pages/PageTodo.vue

Create an array of tasks as data method.

Browse for an example of list of items which use checkbox

https://quasar.dev/vue-components/list-and-list-items#example--settings

modifications: copy the source codes and paste it as template. Remove bordered, padding of q-item, tag="label" from Add v-for directive Add :key="task.id" @click="!task.completed" clickable The following warning will be cleared [Vue warn]: Property or method "check1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. ### Add Due Date and Time Look for a list item with text at both the left and the right hand side. Example https://quasar.dev/vue-components/list-and-list-items#example--itemlabel See also https://quasar.dev/vue-components/menu#positioning Add an icon, find it in https://fonts.google.com/icons?selected=Material+Icons Set icon size to 18px Apply flexbox to position the icon, label and caption https://quasar.dev/layout/grid/introduction-to-flexbox#introduction Apply a row class to the q-item-section for the icon, dueDate and dueTime. To place the icon between dueDate and dueTime, use the justify-center in the flex column. To push the dueDate to the right edge, apply a row class with justify-end property. Do the same for dueTime. ### Add more styling for final touch Add Separator between list items https://quasar.dev/vue-components/list-and-list-items#qlist-api QList API has a separator property Completed item displayed green, incomplete item displayed orange. Use https://quasar.dev/style/color-palette#introduction to pick a color Use text-strike to cross out completed task Conditionally add text-strike class to q-item-label: <q-item-label :class="{ 'text-strike': task.completed }">{{ task.name }}</q-item-label> https://quasar.dev/style/typography#css-helper-classes Helpful positioning control using flexbox https://quasar.dev/layout/grid/introduction-to-flexbox