Day 6 - 原型 (5): 帖子页的元件组合

前言

利用刚设计好的帖子页元件, 组合成帖子页。

元件组合

  1. 建立一个属於帖子页的frame

先在Pages/Blog中, 按一下主页的frame, 再按快捷键Ctrl + D来复制一个新的frame

https://ithelp.ithome.com.tw/upload/images/20210918/20140375eBiBGB0mqd.png

  1. 清除帖子页中不用的元件

https://ithelp.ithome.com.tw/upload/images/20210918/20140375tlD4OfspxP.png

  1. 加上帖子页元件

https://ithelp.ithome.com.tw/upload/images/20210918/20140375cu7KdxluvQ.png

  1. 增加一些帖子, 满足一下空间感

https://ithelp.ithome.com.tw/upload/images/20210918/20140375nxkh2JCzXP.png

帖子内容应延伸至满, 这个可以利用Resizing的Fill container
https://ithelp.ithome.com.tw/upload/images/20210918/20140375Hmh489IqEW.png

延伸的效果
https://ithelp.ithome.com.tw/upload/images/20210918/20140375JSh0entc66.png

  1. 修正一下回覆条和帖子的布局跟样式

https://ithelp.ithome.com.tw/upload/images/20210918/20140375yR8kkQup4a.png

  1. 修正"回到主页"按钮的样式

https://ithelp.ithome.com.tw/upload/images/20210918/20140375Z4X4163Xog.png

  1. 大致上完成, 看看整体效果

https://ithelp.ithome.com.tw/upload/images/20210918/20140375m6tPRC48Vk.png

结语

明天利用Figma的预览原型功能展示一下Blog。


<<:  [前端暴龙机,Vue2.x 进化 Vue3 ] Day9.计算属性 computed

>>:  爬虫怎麽爬 从零开始的爬虫自学 DAY4 开发环境-3 Visual Studio Code 使用设定

Day27 Plugin 从零开始到上架 - iOS instagram APIs

Modules: struct UserInfoResponse: Decodable { var ...

IT铁人DAY 22-Mediator 中介者模式

  今天要介绍的模式Mediator,与上一篇Facade的结构有点雷同,不过Mediator是属於...

【Day29】[演算法]-基数排序法Radix Sort

基数排序法(Radix Sort),与前篇的桶排序都是非比较排序,也属於「分配性」的排序方式,原理依...

Day14 逻辑斯回归实作

https://github.com/PacktPublishing/Machine-Learni...

[iT铁人赛Day13]JAVA回圈的跳离

上次说完回圈,其实还有一个回圈的范例没说到 就是巢状回圈,巢状回圈的意思是回圈叙述中又有其他回圈叙述...