iT邦幫忙

鐵人檔案

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

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

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

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

Day11:Ant Design 裡的下拉選單 Dropdown

網頁導覽列上(navbar)總是會有大分類選單,用來指引我們快速切換至需要的頁面上,如果你過往經驗覺得只能用 <div> 搭配 flex 與 jus...

2022-09-26 ‧ 由 Annie 分享
DAY 12

Day12:Ant Design 裡的 icon

鐵人賽進行到將近一半了,發現好像都沒有介紹到 ANTD 的 icon 怎麼使用,所以今天馬上補上!如果你開發的專案,有自行製做的圖標,或者大多是不太需要 ico...

2022-09-27 ‧ 由 Annie 分享
DAY 13

Day13:Ant Design 裡的 Table(part1)

  今天要來介紹 ANTD 裡個人覺得使用上數一數二複雜與廣泛運用的「表格」了!在 html 裡寫表格要不斷重複寫tr, td、在純 JavaScript 裡頂...

2022-09-28 ‧ 由 Annie 分享
DAY 14

Day14:Ant Design 裡的 Table(part2)

  看完上一篇初步簡單的 Table 應用原裡還有參數後,從這篇開始想分享 Table 的一些酷功能,我覺得在後台開發上超級無敵實用! 一、Table 的 se...

2022-09-29 ‧ 由 Annie 分享
DAY 15

Day15:Ant Design 裡的 Table(part3)

  今天要介紹的是兩層以上的數據在表格完整呈現的方式,其實之前我也沒想過原來樹型結構的資料,也可以使用折合按鈕在表格內展示,直到翻文件學習到就覺得也太實用了吧!...

2022-09-30 ‧ 由 Annie 分享
DAY 16

Day16:Ant Design 裡的 Table(part4)

是的,當你發現可以在表格裡想呈現越來越多的資料後,你一定會想知道,咦可不可以有些介面上的優化呢?以下就介紹幾種方式讓大家參考使用。 一、將 Table 的表頭固...

2022-10-01 ‧ 由 Annie 分享
DAY 17

Day17:Ant Design 裡的 Table(part5)

  在前面的章節中,我們學會了如何把大量的資料整齊地放到表格做呈現,雖然已經知道可以搭配表頭固定、某個指定欄位固定或加上延展子層與細節內容的 expandabl...

2022-10-02 ‧ 由 Annie 分享
DAY 18

Day18:Ant Design 超實用的 Badge

  呼~用了五天的篇幅介紹了幾個 ANTD table 裡個人覺得好用的功能,今天介紹大家在網站上最常看到的「badge」吧!突然聽到 badge 這個名詞,你...

2022-10-03 ‧ 由 Annie 分享
DAY 19

Day19:Ant Design 不再單調的分頁(Tabs與Segmented)

  網頁上你常看到一些開關或切換分頁的方式,ANTD 裡也提供了兩種實用的 component 給我們選擇,分別是 Tabs 與 Segmented。Tabs...

2022-10-04 ‧ 由 Annie 分享
DAY 20

Day20:Ant Design 的 Avatar

  網頁開發時常會遇到照片置放的需求,一般像是電商網站的商品照片、旅遊網的景點照片或官方網站的全景與物品照片,使用四方形的照片呈現都是較適合且常見的。但若是放置...

2022-10-05 ‧ 由 Annie 分享