Скачать или смотреть แนะนำ Tailwind และ DaisyUI (พร้อมหยิบมาแต่ง Todo List) | VF Masterclass - EP. 6

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

สวัสดีสู่ตอนที่ 6 ของซีรีย์ Vue Firebase masterclass ตอนนี้เราจะพาแนะนำ Tailwind และ DaisyUI กันว่ามันคืออะไร มันช่วยอำนวยความสะดวกอะไรได้บ้าง และทำไมผมถึงหยิบ technology 2 ตัวนี้มาใช้ใน project นี้

พร้อมกับเราจะนำ tailwind และ daisyUI มาแต่ง style ใน Todo list ให้สวยงามกัน

** สำหรับใครที่มาดู Session นี้เลยและอยากได้ code ส่วน Todo list ให้สร้าง project ใหม่และดู code Todo List ตามเอกสารนี้ได้นะครับ
https://docs.mikelopster.dev/c/vue-fi...

หัวข้อ
00:00 แนะนำ Session
00:31 แนะนำ Tailwind ว่าคืออะไร
08:04 ลง Tailwind ใน project Todo List
11:40 แนะนำ Tailwind core concept (utility class)
13:00 Tailwind - 1. Layout
18:04 Tailwind - 2. Flexbox & Grid
20:29 Tailwind - 3. Spacing
22:55 Taliwind - 4. Sizing
23:46 Tailwind - 5. Typography
26:12 Tailwind - 6. Background
27:18 Tailwind - 7. Borders
28:29 Tailwind - 8. Effect
29:14 Tailwind - 9. Filters
30:11 Tailwind - 10. Table
30:48 Tailwind - 11. Transform and Transition
31:13 Tailwind - Handling Hover, Focus, State
31:50 Tailwind - 12. Responsive
33:44 การ Customize Tailwind และ Directive (group class)
37:40 แนะนำ Daisy UI (Tailwind plugin)
39:21 ลง DaisyUI ใน project Todo List
40:26 DaisyUI Component - 1. Action
42:14 DaisyUI Component - 2. Data display
43:45 DaisyUI Component - 3. Data input
45:08 DaisyUI Component - 4. Layout
46:06 DaisyUI Component - 5. Navigation
47:30 แนะนำ Theme ใน DaisyUI
49:11 เริ่มแต่ง Todo List overview ว่าจะทำอะไรบ้าง
49:28 แก้ Layout ใหญ่ที่ App.vue
51:30 แต่ง HomeView - ตาม checklist / เริ่มเรียง input ก่อน
53:11 แต่ง HomeView - แต่ง list view ของ todo ใหม่
57:25 แต่ง HomeView - เพิ่ม checkbox และ status 'Done' style
1:01:42 แต่ง HomeView - เพิ่ม Loading component
1:06:05 แต่ง HomeView - เพิ่ม tab สำหรับแยก status และ computed แยก status
1:11:43 แต่ง EditView - adjust style หน้า input
1:15:20 แต่ง EditView - เพิ่ม back button
1:16:45 แต่ง EditView - เพิ่ม Loading
1:17:10 แต่ง EditView - เพิ่ม Toast (สำหรับบอกว่า update เรียบร้อยแล้ว)
1:19:17 Recap เราทำอะไรกันไปบ้าง
1:20:17 เราจะทำอะไรกันต่อใน 2 Session ต่อไป

สำหรับใครอยาก follow ตามเอกสาร สามารถเข้ามาอ่านกันได้เล้ยที่นี่
https://docs.mikelopster.dev/c/vue-fi...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev  
Website: https://mikelopster.dev

พิกัดของด้านหลัง : https://shope.ee/8A54c8cfkf