普通文組 2.5

30天挑戰：「CSS progress bar (stepper) 」技術記錄

總結

記錄頭尾至頂至底的進度條之 HTML 結構與 CSS 設定

See the Pen stepper (justify-content-between) (::after line) by Charlie (@Charlie7779) on CodePen.

設計圖

手機版畫面

桌面版畫面

  • 手機版不顯示步驟文字
  • 步驟圖示與文字需左右頭尾滿版
  • 三個狀態階段：已完成（黑底白字配黑線）、進行中（紅底白字配紅線）、待填寫（灰框灰字配灰線條）

HTML 結構

  • 全部 stepper 的 HTML 結構都維持一致，代表日後可改用程式碼搭配迴圈動態產生 progress bar 內容
  • stepper 的步驟數字不使用 CSS 偽元素，避免分散產生內容的相關邏輯
    • 補充理由：「步驟數字不建議放到偽元素裡面，因為擴展為更多步驟，變數不好塞」、「（如果數字透過偽元素處理的話，）實務上若遇到多語系需求，或是不同數字的表達方式等等，就容易傷腦筋」
  • 使用complete、active與pending三種 CSS class name 來明確標註不同狀態，增加原始碼的好讀性

SCSS

  • 第 9 行.step-container：注意並沒有使用justify-content: space-between;
  • 第 18 行.step-item：
    • 使用flex: 1 1;讓 flex item 佔據所有空間
    • overflow-x: hidden;乃是為了配合 progress bar line，重要的伏筆（？）
  • 第 26 行.step-item:not(:first-child)：除了第一個 stepper 外，其餘 stepper 一律使用padding-left往右側退1rem
  • 第 30 行.step-item:last-child：使用flex: none;讓最後一個 stepper 完全不額外佔據任何空間 套用flex none後，最後一個stepper即可靠右置底
  • 第 34-35 行：設定.icon與.content為display: inline-block;，即可直接水平排列
  • 第 39 行.icon：
    • 設定flex: none;避免圖示本身被壓縮變形
    • 使用text-align: center;與line-height: 32px;讓文字水平垂直置中
  • 第 53 行.step-item:not(:last-child)：
    • 54 行.content設定為position: relative;作為 progress bar line 的定位基準點
    • 60 行.content::after：繪製 progress bar line，設定left: calc(100% + 1rem);讓線條往右推移，並因為第 18 行已經設定.step-item需overflow-x: hidden;，所以多餘的線條長度會直接被隱藏起來 以.content為定位基準，右推100%後，再補推1rem留下一點空間
    • 66 行width: 99999px;：直接設定一個足夠長的線段數值
  • 第 73 行.content-text：手機版時不顯示，故display: none;
  • 79-106 行：針對不同的狀態進行顏色調整
  • 第 109 行：在桌面版要顯示.content-text，將display: inline-block;加回

參考文件