iT邦幫忙

鐵人檔案

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

那些年我用 Ant Design 做過的網頁元件 系列

大家耳熟能詳的前端函式庫(Library), 大部分都是 Bootstrap 和 Tailwind CSS 吧?那大家有聽過 Ant Design 嗎?
我已經使用它開發將近一年的時間了,個人認為使用它來製作後台系統是很方便的助手,它擁有豐富的表單功能與簡單的React元件、樣式的客製化也很容易上手、甚至官方的 API 文件都提供中文,對於前端新手來說,相對超好入門!
如果有興趣的話,可以訂閱我的鐵人賽文章,觀看我累積的小小使用經驗唷!

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

Day21:Ant Design 裡的 Pagination

  先前介紹 Table 時有稍微介紹過 ANTD 的 Pagination,它就是字面上的頁碼沒錯,實際在網頁開發時,我們很常會遇到有大量 data 的狀況,...

2022-10-06 ‧ 由 Annie 分享
DAY 22

Day22:Ant Design 裡的 Tag

  今天要分享的是現在網頁和聊天軟體都很常見的 Tag,現在像是 Facebook, Instagram, Line 或是網路文章與問答,還有現在我們使用的 I...

2022-10-07 ‧ 由 Annie 分享
DAY 23

Day23:Ant Design 裡的 Form 表單(part1)

  Form 表單這系列的文章在 Day04~08 時(註1~4)有分享了比較常見的表單元件,為了將ANTD表單完整功能做個統整,從今天開始大約會花2~3篇文章...

2022-10-08 ‧ 由 Annie 分享
DAY 24

Day24:Ant Design 裡的 Form 表單(part2)

  看完上一篇的介紹,稍微理解 Form 的架構後,今天開始認識它的細節功能。因為表單的應用大至數據的收集、小至簡單的登入,都非常常見,所以希望以案例分享的方式...

2022-10-09 ‧ 由 Annie 分享
DAY 25

Day25:Ant Design 裡的 Form 表單(part3)

  學完 Form 的基本功能後,今天介紹一下表單元素的使用方式,搭配先前的文章一起學習,將會更熟悉如何運用唷! 狀況一:如何根據不同情形給予每個輸入框不同提示...

2022-10-10 ‧ 由 Annie 分享
DAY 26

Day26:Ant Design 的 Modal

  想必大家都常在網頁中看到彈窗(modal),舉凡像是廣告置入、登入表單或訂閱通知等都常以 modal 的方式呈現,通常會水平垂直置中的放在網頁正中間,用來吸...

2022-10-11 ‧ 由 Annie 分享
DAY 27

Day27:Ant Design 裡的 Steps

  今天要介紹的是最近我新學習的步驟元件,原本是自己苦刻?,用超多js的判斷式讓方向在不同的螢幕尺寸下有水平與垂直效果、也花不少時間處理文字和步驟圖示的位置對應...

2022-10-12 ‧ 由 Annie 分享
DAY 28

Day28:Ant Design 裡的 Collapse

  今天要介紹的元件,個人覺得比較少見,但先前也有專案嚐試做過這樣的效果,所以也特別拉一篇文章出來跟大家分享。Collapse 在英文中有折疊的意思,較適合用在...

2022-10-13 ‧ 由 Annie 分享
DAY 29

Day29:Ant Design 裡的 Calendar

  今天介紹的元件是月曆,比較常見於後台類型的專案,像是任務列表或行程規劃、工作會議等都很適合使用,雖然ANTD裡的 Calendar 提供的功能不是很多、但已...

2022-10-14 ‧ 由 Annie 分享
DAY 30

Day30:鐵人練成之用 Ant Design 做一個登入表單吧!

  今天終於是2022年鐵人賽挑戰的最後一天,首先感謝 IT 鐵人邦每年舉辦這個比賽,讓 IT 人可以不斷成長、累積、分享與學習更多相關技能,再來當然是感謝自己...

2022-10-15 ‧ 由 Annie 分享