Step

用於顯示流程步驟。使用類別名稱為 .step 並以此為子元件前綴詞。每一個步驟是一個 .step_item,每個步驟有四種狀態:當前 .is:on、已完成、未執行、錯誤 .is:danger。每一個 .step_item 預設都是已完成樣式,.is:on 之後則是未執行,因此這兩種狀態不需要另外加上類別名稱。


預設樣式

每一個 Item 可設置一個標題與內文。


先用冷水小力地沖傷口20~30分鐘,同時打119

輕脫掉傷口上的衣褲,脫不下來不勉強

冷水泡20~30分鐘就好,若碰到化學藥劑,不可以泡水

蓋上乾淨的紗布、衣服或毛巾在傷口上

快送到醫院進行治療

<div class="step"> <div class="step_item"> <h5 class="step_title"></h5> <p class="step_txt"></p> </div> <div class="step_item is:on"> <h5 class="step_title"></h5> <p class="step_txt"></p> </div> ... </div>

危險狀態

當一個流程有錯誤訊息或是未通過驗證時,可在當下的步驟由 .is:on 改為 .is:danger

先用冷水小力地沖傷口20~30分鐘,同時打119

輕脫掉傷口上的衣褲,脫不下來不勉強

冷水泡20~30分鐘就好,若碰到化學藥劑,不可以泡水

蓋上乾淨的紗布、衣服或毛巾在傷口上

快送到醫院進行治療

<div class="step"> <div class="step_item"></div> <div class="step_item is:danger"></div> ... </div>

垂直排列

Step 預設為垂直排列,直到符合 Breakpoint 的 md 規則時才會顯示為水平排列。若是要一直維持垂直排列,則可以在 .step 追加 .:vertical

先用冷水小力地沖傷口20~30分鐘,同時打119

輕脫掉傷口上的衣褲,脫不下來不勉強

冷水泡20~30分鐘就好,若碰到化學藥劑,不可以泡水

蓋上乾淨的紗布、衣服或毛巾在傷口上

快送到醫院進行治療

<div class="step :vertical"></div>

水平排列

Step 預設為垂直排列,若要一直維持水平排列,則可以在 .step 追加 .:inline。在小螢幕裝置為了避免排列過度擁擠甚至資料擺放不下,除了 .is:on 狀態的 Item 訊息都會被隱藏,只顯示當下步驟的內容。

先用冷水小力地沖傷口20~30分鐘,同時打119

輕脫掉傷口上的衣褲,脫不下來不勉強

冷水泡20~30分鐘就好,若碰到化學藥劑,不可以泡水

蓋上乾淨的紗布、衣服或毛巾在傷口上

快送到醫院進行治療

<div class="step :inline"></div>

顯示步驟序號

除了預設符號之外,另外提供每一個步驟使用數字來表示步驟順序,在 .step 加上 .:ordered 就行了。已執行狀態則會顯示打勾圖示。


先用冷水小力地沖傷口20~30分鐘,同時打119

輕脫掉傷口上的衣褲,脫不下來不勉強

冷水泡20~30分鐘就好,若碰到化學藥劑,不可以泡水

蓋上乾淨的紗布、衣服或毛巾在傷口上

快送到醫院進行治療


先用冷水小力地沖傷口20~30分鐘,同時打119

輕脫掉傷口上的衣褲,脫不下來不勉強

冷水泡20~30分鐘就好,若碰到化學藥劑,不可以泡水

蓋上乾淨的紗布、衣服或毛巾在傷口上

快送到醫院進行治療

<div class="step :ordered"></div>

卡片樣式

Step 能以卡片樣式呈現,只需要在 .step 加上 .:card 就行了。同時可搭配 .:ordered

購物車

確認購物清單是否正確。

付款設定

選擇您的付款方式。

完成購買

恭喜您完成購物流程。


購物車

確認購物清單是否正確。

付款設定

選擇您的付款方式。

完成購買

恭喜您完成購物流程。


購物車

確認購物清單是否正確。

付款設定

選擇您的付款方式。

完成購買

恭喜您完成購物流程。

<div class="step :card"></div>

客製化圖示

在卡片樣式中若是希望使用客製化圖示,例如 Symbol 或是 Iconfont 等,可在每一個 .step_item 內設置 .step_append,然後將你所希望的圖示置入其中。

購物車

確認購物清單是否正確。

付款設定

選擇您的付款方式。

完成購買

恭喜您完成購物流程。

<div class="step :card"> <div class="step_item"> <span class="step_append"> <i class="icon"></i> </span> <h5 class="step_title"></h5> <p class="step_txt"></p> </div> </div>