前言
步驟條是一種用于引導用戶按照特定流程完成任務的導航條，在各種分步表單交互場景中廣泛應用。例如：在HIS系統-門診醫生站中的接診場景中，我們就可以使用步驟條來實現。她的執行步驟分別是：門診病歷=>遺囑錄入=>完成接診。
我們發現，步驟條通常由編號、名稱和引導線三個基本要素組成。接下來，我們來根據這三個基本要素來進行實現
確定結構
對于步驟條這種呈現順序的列表結構，在HTML標簽選擇上，使用ul或ol標簽可以讓語義更加清晰。
<ol class="steps"><li>注冊</li><li>域認證</li><li>身份校驗</li><li class="active">風險等級評估</li><li>開通賬號</li>
</ol>
樣式
.steps {display: flex;/* 按水平均勻分布，行首行尾兩端靠齊 */justify-content: space-between;margin: 0;padding: 0;/* 定義CSS計數器 */counter-reset: order;list-style: none;--normal-color: #666;--active-color: #5082f5;
}.steps>li {counter-increment: order;/* 彈性寬度（根據其內容來調整） */flex: auto;/* 內聯塊級彈性伸縮盒子 */display: inline-flex;align-items: center;color: var(--active-color)
}.steps>li::before {content: counter(order);width: 1.4em;line-height: 1.4em;margin-right: 0.5em;vertical-align: middle;text-align: center;border-radius: 50%;border: 1px solid;/* 布局寬度不夠時禁止收縮 */flex-shrink: 0;
}.steps>li:not(:last-child)::after {content: '';/* width: 60px; *//* 讓引導線和文本垂直居中 *//* vertical-align: middle; *//* 占滿 li 中的剩余寬度 */flex: 1;margin: 0 1em;/* 不指定顏色，則自動繼承自身color或父級color */border-bottom: 1px solid;opacity: .6;
}.steps>li:last-child {flex: none;
}
/* "已完成"和“進行中”的樣式定義 */.steps>.active {color: var(--active-color)
}.steps>.active::before {color: #fff;background: var(--active-color);border-color: var(--active-color);
}.steps>.active::after,
.steps>.active~li {/* “進行中”后面的引導線按普通色顯示 */color: var(--normal-color);
}
交互
const listItems = document.querySelectorAll(".steps li")
listItems.forEach(li => {li.addEventListener("click", () => {listItems.forEach(smalLi => {smalLi.classList.remove('active')})li.classList.toggle("active")})
})
最終效果
知識點總結
- flex容器的 justify-content: space-between; 可令子元素按顯示方向均勻分布，兩端分散對齊；
- inline-flex: 盒子既能像flex容器那樣輕松拿捏其子元素的布局，又能像行內塊元素一樣平易近人；
- flex: number; 對于寬度（或高度）能占盡占；
- flex: auto; 從自身實際情況出發應占盡占，共同富裕；
- flex-shrink: 用來設置flex元素的可壓榨基準，與它對應的是flex-basis，用來設置可膨脹基準
)