系列文章
【Day11】數據展示元件 - Badge
元件介紹 Badge 可以讓我們在其 children element 的右上角(預設位置)顯示一個小徽章，通常用來表示需要處理的訊息數量，透過醒目的視覺形式來...
【Day12】數據展示元件 - Tooltip
元件介紹 Tooltip 是一個文字彈出提醒元件，當 active 狀態時，會顯示對該子元件描述的文字。 參考設計 & 屬性分析 位置 相對於被包覆的子...
【Day13】數據展示元件 - Accordion/Collapse 摺疊面板
元件介紹 Accordion 是一個可折疊/展開內容區域的元件。主要是針對顯示內容複雜或很多的頁面進行分區塊的顯示及隱藏。 參考設計 & 屬性分析 元件...
【Day14】數據展示元件 - Card
元件介紹 Card 是一個可以顯示單個主題內容及操作的元件，通常這個主題內容包含圖片、標題、描述或是一些操作。 例如在電商網站，一個商品或需要包含商品圖片、商品...
【Day15】數據展示元件 - Carousel
元件介紹 Carousel 是一個像旋轉木馬一樣會輪流轉的輪播元件。在一個內容空間有限的可視範圍中進行內容的輪播展示。通常適用於一組圖片或是卡片的輪播。 Car...
【Day16】數據展示元件 - Table
元件介紹 Table 顧名思義就是一個表格元件，用來整齊的顯示行列數據。 參考設計 & 屬性分析 我自己覺得 table 是一個還蠻繁瑣的元件，要組成一...
【Day17】數據展示元件 - Infinite scroll
元件介紹 Infinite scroll 能在面對多筆資料時，讓捲軸滑動到底部時再載入下一頁面的資料。 由於一次性向後端取得大批的資料，對於後端的資料計算、資料...
【Day18】導航元件 - Breadcrumb
元件介紹 Breadcrumb 是一個導航元件，用於顯示當前系統層級結構中的路徑位置，並且點擊路徑能返回之前的頁面。在系統有多個層級架構，並且希望能幫助用戶清楚...
【Day19】導航元件 - Dropdown
元件介紹 Dropdown 是一個下拉選單元件，當頁面上的選項過多時，可以用這個元件來收納選項，透過滑鼠事件來觸發選單彈出，點擊選項會執行相對應的命令。 參考設...
【Day20】導航元件 - Select
元件介紹 Select 是一個下拉選擇器。觸發時能夠彈出一個菜單讓用戶選擇操作。 這個元件我們底層就能夠使用我們上一篇所提到的 Dropdown 來實作。 參考...