iT邦幫忙

2022 iThome 鐵人賽

DAY 27
1
自我挑戰組

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

Day27:Ant Design 裡的 Steps

  • 分享至 

  • xImage
  •  

  今天要介紹的是最近我新學習的步驟元件,原本是自己苦刻?,用超多js的判斷式讓方向在不同的螢幕尺寸下有水平與垂直效果、也花不少時間處理文字和步驟圖示的位置對應,後來才發現原來自己用的 ANTD 就有提供這樣的元件可以運用在專案上,所以打鐵趁熱、也適逢鐵人賽期間,就撥一篇篇福來簡單介紹一下它!

https://ithelp.ithome.com.tw/upload/images/20221012/20140920HPUB35VICb.jpg
在 pinterest 找到的範例圖(註1)

一、最基本的使用方式:引用與呼叫它

  今天挑選這種範例來做說明,使用的重點就是外層用<Steps>tag,包住內層的<Step>tag,通常<Step>tag會使用map迴圈去呈現。

https://ithelp.ithome.com.tw/upload/images/20221012/201409209yXkddLvP6.png
ANTD 的 Steps 範例圖(註2)
import { Steps } from 'antd';

const App = () => (
  <Steps progressDot current={1}>
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
  </Steps>
);

export default App;  

二、ANTD 的 Steps (外層/父層)可添加的屬性

  下面列出幾項我目前開發時用過的屬性,也可以點此連結去看更多官方 api 文件

  • responsive 這個屬性我個人沒有使用,因為官方定義的 532px 不太符合我專案需求,所以我是在direction屬性中加判斷,例如要在ipad air以下呈現直式可以這樣寫:direction={screenWidth < 768 ? 'vertical' : 'horizontal'},供大家參考。
  • 如果要自定義每個流程的圖標,可以由外層/父層的 Steps 屬性或內層/子層的 Step 去處理。
屬性名稱 可以使用的值 說明
direction horizontal 或 vertical 設定流程圖的方向,預設是水平(horizontal)。
responsive true 或 false 設定當螢幕寬度小於532px時,是否要自動開啟響應式的,預設是true。
progressDot true 或 false 或 (iconDot, {index, status, title, description}) => ReactNode 簡單來說是可以自定義步驟的點點樣式,也可以選擇是否顯示。

三、ANTD 的 Step (內層/子層)可添加的屬性

  下面列出幾項我目前開發時用過的屬性,也可以點此連結去看更多官方 api 文件

屬性名稱 可以使用的值 說明
title ReactNode 該步驟的標題
subTitle ReactNode 該步驟的子標題
description ReactNode 該步驟的描述
status wait 或 process 或 finish 或 error 要用字串格式,定義該步驟的狀態,會影響到呈現的樣式。預設是wait。
icon ReactNode 簡單來說是可以自定義步驟的點點樣式,如果沒有設定此屬性則會呈現點點的樣式。

四、今天的元件練習

  如文章開頭所述,個人是最近在開發購物網站時,要顯示訂單狀態給消費者看,所以才有機會學習到此元件,在看完上面簡單的介紹後,下面提供我這次的實作範例截圖,若大家有興趣也可以到線上編輯器裡玩玩看唷!

https://ithelp.ithome.com.tw/upload/images/20221012/20140920vTjXKu9Gk9.png
專案元件應用示意圖

  因為做這個元件時也上網參考過很多樣式,這邊也附上tailwindCSS 的 StepsMaterial 的 Stepper ,還有 Bootstrap4 的 steppers 給使用這些 library 的人參考,若想手刻的話,也可以觀摩一下這些樣式的做法與呈現效果。

註1:在pinterest找到的(範例圖)(原處連結)
註2:ANTD 的 Steps 範例


上一篇
Day26:Ant Design 的 Modal
下一篇
Day28:Ant Design 裡的 Collapse
系列文
那些年我用 Ant Design 做過的網頁元件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言