Day 25-制作购物车之设计购物车画面

设计的部分就不多做分析,主要呈现实作成果。
因为太长了,所以分一点过来。/images/emoticon/emoticon25.gif

以下内容有参考教学影片,底下有附网址。
(内容包括我的不专业解说分析及在实作过程中遇到的困难与解决)

go go~/images/emoticon/emoticon08.gif


再进入CartScreen之前,先在建立component资料夹建立CartItem.js&CartItem.css档,来设定购物车的东西
CartItem.js:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720U6c2dXjFIq.png
CartItem.css:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720tPtuerLtZV.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720hKvGx53zMM.png
第六行grid-template-columns後面
分别为image、ProductName、ProductPrice、select选项,最後一个为delete删除。

换CartScreen的部分
CartScreen.js:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720s6cr8exfam.png
CartScreen.css:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720pn9tNPhVlD.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720nSZToHOIQ8.png

执行看看成果
CartScreen部分:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720uBGkXcm5iL.png

然後按钮的部分颜色会变换,例如:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720s9SHITVR7L.png


参考教学网站:https://www.youtube.com/watch?v=0divhP3pEsg&t=786s


  • 明天是Redux/images/emoticon/emoticon29.gif

<<:  GitHub Autolinked references & Permanent link - 团队讨论的专业技巧

>>:  【Day12】Latch的生成条件以及如何避免(上)

Git
杂谈    

op.26 《全领域》-全域开发实战 - 居家植物盆栽 Mvt I (NodeMCU & MQTT)

op.26 打造属於你的时空廊道 为你我打造一个专属你的自由往返通道 让你可以任意地穿越 不再受拘...

Flutter体验 Day 25-SharedPreferences

SharedPreferences 有时候我们在应用程序会需要保存登入Session资料、个人偏好设...

Day 09 - 智慧城市Go Smart Award 经历(3) - 得奖

经过复赛Online Pitch之後, 我当时真的感觉很有机会得奖, 加上无论比赛结果如何, 客户...

CSS微动画 - Loading又来了!文字版再出击~

Q: 倒数 8 篇了!逐渐进入养老阶段,会一直Loading吗? A: Loading只是代表,主...

[Angular] Day16. Writing structural directives

在上一章中介绍了如何建立客制化的 attribute directive 与使用,而本章将会介绍如何...