iT邦幫忙

鐵人檔案

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

Material UI in React 系列

Material UI 的應用,由於工作的關係有接觸到使用該套件,發現中文文章的資源很少,來來回回在stackOverflow穿梭各個版本還有套件相容的問題,也想順便紀錄一下自己對這個Framework的認知,也希望能幫助大家快速理解這個Framework的應用。

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

Material UI in React [DAY 1] 簡介

因為工作的關係,在專案上接觸到Material UI的Framework,也讓我理解到為什麼這套UI庫可以這麼受歡迎,雖然一開始接觸的時候門檻還挺高的,但克服之...

2021-09-02 ‧ 由 LucianoLee 分享
DAY 2

Material UI in React [Day 2] Layout (Container & Box)

今天會介紹Material UI 的排版系統,可以進入官網從側邊欄可以看到以下畫面: Container 我們先從Container的組件開始講解,從命名來說...

2021-09-03 ‧ 由 LucianoLee 分享
DAY 3

Material UI in React [Day 3] Layout (Grid & ThemeProvider)

Grid 今天要講解的是Grid排版的部分,如果是有使用過bootstrap的經驗的朋友,其實它的邏輯就和class="row" || &q...

2021-09-04 ‧ 由 LucianoLee 分享
DAY 4

Material UI in React [Day4] Theme (自訂主題 Palette & Typography)

繼昨天 ThemeProvider 的部分今天來講解一下 Material UI 的 Theme,大家可以從側邊欄的這個位置 去查看詳細。 我們可以先從Ove...

2021-09-05 ‧ 由 LucianoLee 分享
DAY 5

Material UI in React [Day5] Theme ( Spacing & Breakpoints & z-index)

今天會接續昨天的部分繼續講解 Theme 的 Spacing,這部分其實很簡單各位可以透過這裡直接引用官網的範例即可。 Spacing 自定義的話可以用以下幾種...

2021-09-06 ‧ 由 LucianoLee 分享
DAY 6

Material UI in React [Day 6] Theme (Globals) & Inputs (Buttons)

Globals 這裡先提一下 key: overrides,當組件間相互傳遞的 key: props 預設值,它可以讓你能夠自定義組件類型的所有實例的外觀。 i...

2021-09-07 ‧ 由 LucianoLee 分享
DAY 7

Material UI in React [ Day 7 ] Inputs (Button Group & Floating action button) & Styles

今天會接續Button的部分做個總結。 Button Group ButtonGroup 組件可用於對相關按鈕進行分組: <ButtonGroup col...

2021-09-08 ‧ 由 LucianoLee 分享
DAY 8

Material UI in React [ Day 8 ] Inputs(Checkbox) 多選

現在就讓我們回到Inputs的部分繼續講解,今天會講解表單中常用的多選(checkbox)的作法。 Checkbox 大家可以搭配官方文件一起使用,如果列表中出...

2021-09-09 ‧ 由 LucianoLee 分享
DAY 9

Material UI in React [Day9] Inputs (Radio) 單選 & (Switch) 開關

Radio 當用戶需要查看所有可用選項時使用單選按鈕,如果可用選項可以折疊,請考慮使用下拉菜單(Select),因為它佔用的空間更少,官方文件。 RadioGr...

2021-09-10 ‧ 由 LucianoLee 分享
DAY 10

Material UI in React [Day 10] Inputs (Text Field) 文本輸入框

Text Field TextField 包裝組件是一個完整的表單控件,包括標籤、輸入和幫助文本,它支持標準、輪廓和填充樣式。簡單來說它是一個整合了 FormC...

2021-09-11 ‧ 由 LucianoLee 分享