iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0

前言

今天要完成帖子頁的元件設計。

帖子頁的元件

  1. 帖子

基本上可以用回主頁的帖子元件, 這裡只是少了READ MORE, 還有把內容全部顯示出來。

https://ithelp.ithome.com.tw/upload/images/20210916/20140375B47lgEHIas.png

  1. 回覆條

給其他使用者留言, 使用者也可以填寫自己的顯示名字, 若果不填, 名字顯示anonymous(匿名)。

https://ithelp.ithome.com.tw/upload/images/20210916/201403759dBl0VzuyI.png

  1. 留言信息

顯示留言, 還有留言者的名字和留言時間。

https://ithelp.ithome.com.tw/upload/images/20210916/20140375hDRsGbgxlX.png

  1. 留言信息分界線

為方便閱讀, 這裡加了以日子作為留言的分界。

https://ithelp.ithome.com.tw/upload/images/20210916/20140375zo4QRhhN2i.png

  1. 分頁

考慮到會有大量留言, 還是加一加分頁吧。

https://ithelp.ithome.com.tw/upload/images/20210916/20140375x8pKLHeD6z.png

  1. 回到主頁

使用者留言後, 他可能會想看其他帖子, 所以這裡要加一個回主頁的按鈕。

https://ithelp.ithome.com.tw/upload/images/20210916/20140375up5IzxCDw2.png

結語

今天大概就到這裡, 明天再把他們組合成帖子頁吧。

https://ithelp.ithome.com.tw/upload/images/20210917/20140375PbROetb5xd.png


上一篇
Day 4 - 原型 (3): 主頁的元件組合
下一篇
Day 6 - 原型 (5): 帖子頁的元件組合
系列文
從零開始的寫web app 30天生活10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言