iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

React 面 項目 看起來很好吃吧--佐material 調料 系列

起---
白板網頁一年 框架網頁一年的 菜機前端工程師 之前還是寫Vue
故使用React 框架時先使用material-ui 加速排版跟樣式是相當合理的
承---
承受了各大鐵人賽的教學 總要回饋社會
轉---
轉念來說 ,就是整理筆記與各位共勉之
合---
在這個磨合期,剛好配上鐵人賽,希望能好好完賽的結局


希望在這30天內完成side project 並且能有效的幫助跟我一樣迷惘的新手期網友

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 21

React side project--Accordion (展延式卡片)

有時候在排版時,常常會用卡片(Card)來做一個區塊排版 當內容過多時 會用 Accordion 去做摺疊內容,類似先顯示標題,有興趣再點開 使用handleC...

2022-10-05 ‧ 由 Vader 分享
DAY 22

React side project--Image list (圖片拼貼)

常見的圖片拼貼,或是瀑布流廣告,在Mui也有套件可以用 也常常拿來塞版面首先 import 各項組件 import * as React from &quot...

2022-10-06 ‧ 由 Vader 分享
DAY 23

React side project--Stepper(步驟條)

在很多問卷調查中,下面會有個Stepper 來顯示你做到第幾步 或是說明文件下方 讓使用者可以用來切換步驟 首先 引入 import * as React fr...

2022-10-07 ‧ 由 Vader 分享
DAY 24

React side project--Tabs (選項卡)

Tabs 顧名思義拿來切換頁面用選項,如IT邦幫忙的上方Tab我們可以很方便的選中想要的畫面首先 管理狀態 const [value, setValue] =...

2022-10-08 ‧ 由 Vader 分享
DAY 25

React side project--LoadingButton (等待加載中)

在很多動作執行時會有等待計算或API回傳的時候此時 LoadingButton 就是很好用的東西設置 狀態的loading 讓使用者明白目前的情況 Subm...

2022-10-09 ‧ 由 Vader 分享
DAY 26

React side project--Avatar(頭像)

很多使用者都會使用頭像, google新版本也會用英文名字的兩個英文字母 去簡寫作為 ICON 所以MUI在這也有個組件叫做Avatar(頭像) 元件寫法如下...

2022-10-10 ‧ 由 Vader 分享
DAY 27

React side project--Speed dial(快速菜單)

不管在手機版本或是儀表板(dashboard),都可以有一個可收合的菜單 在Css中要設定許多狀態,如今在Mui中出了一個元件,簡單管理狀態來開合組件 <...

2022-10-11 ‧ 由 Vader 分享
DAY 28

React side project--Modal(子母彈窗)

有的時候客製化需求需要多層次彈跳視窗,以下簡稱為彈窗,這邊mui提供一個Modal 組件做疊加 可以產出下方圖片的效果其中可以用兩個狀態分別切換子母彈窗 &lt...

2022-10-12 ‧ 由 Vader 分享
DAY 29

React side project--Skeleton (元件 Loding)

在畫面載入時,可以在元件區塊上,加上等待的loading 根據各元件的大小設定size 在用狀態flag給予切換 利用 item flag 狀態 有就顯示圖片...

2022-10-13 ‧ 由 Vader 分享
DAY 30

React side project--Final Sample(組合餐點)

最後會以這30天介紹的元件,去拼成想要的範例網站![! 例如這張截圖 用到了Mui的 MuiAppBar跟MuiToolbar <AppBar po...

2022-10-14 ‧ 由 Vader 分享