起---
白板網頁一年 框架網頁一年的 菜機前端工程師 之前還是寫Vue
故使用React 框架時先使用material-ui 加速排版跟樣式是相當合理的
承---
承受了各大鐵人賽的教學 總要回饋社會
轉---
轉念來說 ,就是整理筆記與各位共勉之
合---
在這個磨合期,剛好配上鐵人賽,希望能好好完賽的結局
希望在這30天內完成side project 並且能有效的幫助跟我一樣迷惘的新手期網友
有時候在排版時,常常會用卡片(Card)來做一個區塊排版 當內容過多時 會用 Accordion 去做摺疊內容,類似先顯示標題,有興趣再點開 使用handleC...
常見的圖片拼貼,或是瀑布流廣告,在Mui也有套件可以用 也常常拿來塞版面首先 import 各項組件 import * as React from "...
在很多問卷調查中,下面會有個Stepper 來顯示你做到第幾步 或是說明文件下方 讓使用者可以用來切換步驟 首先 引入 import * as React fr...
Tabs 顧名思義拿來切換頁面用選項,如IT邦幫忙的上方Tab我們可以很方便的選中想要的畫面首先 管理狀態 const [value, setValue] =...
在很多動作執行時會有等待計算或API回傳的時候此時 LoadingButton 就是很好用的東西設置 狀態的loading 讓使用者明白目前的情況 Subm...
很多使用者都會使用頭像, google新版本也會用英文名字的兩個英文字母 去簡寫作為 ICON 所以MUI在這也有個組件叫做Avatar(頭像) 元件寫法如下...
不管在手機版本或是儀表板(dashboard),都可以有一個可收合的菜單 在Css中要設定許多狀態,如今在Mui中出了一個元件,簡單管理狀態來開合組件 <...
有的時候客製化需求需要多層次彈跳視窗,以下簡稱為彈窗,這邊mui提供一個Modal 組件做疊加 可以產出下方圖片的效果其中可以用兩個狀態分別切換子母彈窗 <...
在畫面載入時,可以在元件區塊上,加上等待的loading 根據各元件的大小設定size 在用狀態flag給予切換 利用 item flag 狀態 有就顯示圖片...
最後會以這30天介紹的元件,去拼成想要的範例網站![! 例如這張截圖 用到了Mui的 MuiAppBar跟MuiToolbar <AppBar po...