Appearance
Steps 步骤条
引导用户按照流程完成任务的导航条。用于将任务分解为若干步骤，清晰展示当前进度和状态。
CSS 代码
全部 steps 样式代码：
查看代码
css
/* HnuiIcon */
@import url('./icon.css');
/* 全局css变量 */
:root {
/* #region vars-BrandColor */
/* 品牌色 */
--hnui-brand-color: #1f78ff;
--hnui-brand-color1: #005ce5;
--hnui-brand-color2: #4b83f7;
--hnui-brand-color3: #3384ff;
--hnui-brand-color4: #599bff;
--hnui-brand-color5: #80b2ff;
--hnui-brand-color6: #b2d1ff;
--hnui-brand-color7: #cce0ff;
--hnui-brand-color8: #d9e8ff;
--hnui-brand-color9: #ebf3ff;
--hnui-brand-color10: #f2f7ff;
/* 状态颜色 */
--hnui-brand-color-normal: var(--hnui-brand-color);
--hnui-brand-color-hover: var(--hnui-brand-color3);
--hnui-brand-color-active: var(--hnui-brand-color1);
--hnui-brand-color-elected: var(--hnui-brand-color9);
--hnui-brand-color-disabled: var(--hnui-brand-color7);
--hnui-brand-color-disabled-border: var(--hnui-brand-color6);
--hnui-brand-color-disabled-bg: var(--hnui-brand-color10);
/* #endregion vars-BrandColor */
/* #region vars-DomainColor */
/* 功能色 */
--hnui-success-color: #2ba471;
--hnui-success-hover-color: #51bd90;
--hnui-success-active-color: #2ba471;
--hnui-warning-color: #faad14;
--hnui-warning-hover-color: #ffc146;
--hnui-warning-active-color: #db960b;
--hnui-danger-color: #ff4d4d;
--hnui-danger-hover-color: #ff7676;
--hnui-danger-active-color: #d82a2a;
--hnui-info-color: #8d97a6;
--hnui-info-hover-color: #b2b7c0;
--hnui-info-active-color: #707a89;
/* #endregion vars-DomainColor */
/* #region vars-NeutralColor */
/* 中性色 */
/* 标题文字 */
--hnui-neutral-color-1: #2d2e33;
/* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
--hnui-neutral-color-2: #43454d;
/* 内容文字、说明叙述文字 */
--hnui-neutral-color-3: #5d606a;
/* 提示性文字、辅助文本 */
--hnui-neutral-color-4: #9298a0;
/* 禁用文本 */
--hnui-neutral-color-5: #b7bdc7;
/* 描边格描边、输入文本描边、下拉选择描边等 */
--hnui-neutral-color-6: #dfe2e7;
/* 全局背景、禁用状态、分割线等 */
--hnui-neutral-color-7: #f0f2f5;
/* 最低颜色等 */
--hnui-neutral-color-8: #fafbfc;
/* #endregion vars-NeutralColor */
/* 默认文字颜色 */
--hnui-text-color: var(--hnui-neutral-color-2);
--hnui-info-bg: #eceff4;
--hnui-info-bg2: #e7e7e7;
--hnui-color-white: #fff;
--hnui-color-black: #000;
--hnui-border-width: 1px;
--hnui-border-dashed-width: 2px;
--hnui-border-color: var(--hnui-neutral-color-6);
--hnui-disabled-bg-color: var(--hnui-neutral-color-7);
--hnui-disabled-color: var(--hnui-neutral-color-5);
--hnui-control-height: 32px;
--hnui-control-height-sm: 24px;
--hnui-control-height-lg: 40px;
--hnui-control-transparent: transparent;
}
.dark {
--hnui-brand-color6: rgb(50, 59, 74);
--hnui-brand-color7: #30353d;
--hnui-brand-color8: #42484f;
--hnui-brand-color9: #4c4f54;
--hnui-brand-color10: #29292c;
/* 中性色 */
/* 标题文字 */
--hnui-neutral-color-1: #c4c8dc;
/* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
--hnui-neutral-color-2: #b9bed3;
/* 内容文字、说明叙述文字 */
--hnui-neutral-color-3: #afb5c7;
/* 提示性文字、辅助文本 */
--hnui-neutral-color-4: #6a6f75;
/* 禁用文本 */
--hnui-neutral-color-5: #53565b;
/* 描边格描边、输入文本描边、下拉选择描边等 */
--hnui-neutral-color-6: #59595a;
/* 全局背景、禁用状态、分割线等 */
--hnui-neutral-color-7: #343535;
/* 最低颜色等 */
--hnui-neutral-color-8: #151516;
--hnui-info-bg: #393b3d;
--hnui-color-white: #000;
--hnui-color-black: #fff;
--hnui-control-transparent: transparent;
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
color: var(--hnui-neutral-color-2);
}
/* #region vars-FontFamily */
@font-face {
font-family: 'DIN';
src: url('/fonts/D-DIN-PRO/D-DIN-PRO.woff2') format('woff2'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.woff') format('woff'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.ttf') format('truetype'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.eot') format('embedded-opentype'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/* 使用数字字体 */
.use-font {
font-family: DIN;
}
/* #endregion vars-FontFamily */
/* #region vars-BoxShadow */
/* 一级投影（默认向下） */
.hnui-box-shadow {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.18);
}
.hnui-box-shadow.hover,
.hnui-box-shadow:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.18);
}
/* 二级投影（默认向下） */
.hnui-box-shadow_l2 {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.12);
}
.hnui-box-shadow_l2.hover,
.hnui-box-shadow_l2:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.12);
}
/* 三级投影（默认向下） */
.hnui-box-shadow_l3 {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
}
.hnui-box-shadow_l3.hover,
.hnui-box-shadow_l3:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.06);
}
/* #endregion vars-BoxShadow */css
/* === 步骤条容器 === */
.hnui-steps {
display: flex;
font-size: 14px;
line-height: 22px;
}
/* 水平方向 */
.hnui-steps-horizontal {
flex-direction: row;
align-items: flex-start;
}
/* 垂直方向 */
.hnui-steps-vertical {
flex-direction: column;
}
/* === 单个步骤项 === */
.hnui-steps-item {
position: relative;
flex: 1;
display: flex;
}
/* 水平步骤项 */
.hnui-steps-horizontal .hnui-steps-item {
flex-direction: row;
align-items: flex-start;
}
/* 垂直步骤项 */
.hnui-steps-vertical .hnui-steps-item {
flex-direction: row;
min-height: 80px;
flex: none;
width: 100%;
}
.hnui-steps-vertical .hnui-steps-item:last-child {
min-height: auto;
}
/* === 步骤图标容器 === */
.hnui-steps-item-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--hnui-neutral-color-5);
background-color: transparent;
color: var(--hnui-neutral-color-5);
font-size: 12px;
font-weight: 500;
flex-shrink: 0;
transition: all 0.3s;
z-index: 1;
box-sizing: border-box;
}
.hnui-steps-item-icon .hnui-icon {
font-size: 12px;
}
.hnui-steps-item-icon-custom {
border-radius: 50%;
border: none;
font-size: 16px;
}
/* === 步骤内容 === */
.hnui-steps-item-content {
flex: 1;
}
/* 水平布局内容 */
.hnui-steps-horizontal .hnui-steps-item-content {
margin-left: 8px;
padding-right: 16px;
flex: 1;
}
/* 垂直布局内容 */
.hnui-steps-vertical .hnui-steps-item-content {
margin-left: 16px;
padding-bottom: 20px;
}
/* 步骤标题 */
.hnui-steps-item-title {
color: var(--hnui-neutral-color-4);
font-size: 14px;
line-height: 24px;
transition: color 0.3s;
}
/* 步骤描述 */
.hnui-steps-item-description {
color: var(--hnui-neutral-color-4);
font-size: 12px;
line-height: 18px;
}
/* === 连接线 === */
.hnui-steps-item-tail {
position: absolute;
background-color: var(--hnui-neutral-color-6);
transition: background-color 0.3s;
}
/* 水平连接线 */
.hnui-steps-horizontal .hnui-steps-item-tail {
position: absolute;
left: 80px;
right: 8px;
top: 11px;
height: 1px;
}
.hnui-steps-horizontal .hnui-steps-item:last-child .hnui-steps-item-tail {
display: none;
}
/* 垂直连接线 */
.hnui-steps-vertical .hnui-steps-item-tail {
left: 11px;
top: 24px;
bottom: 0;
width: 1px;
height: calc(100% - 24px);
}
.hnui-steps-vertical .hnui-steps-item:last-child .hnui-steps-item-tail {
display: none;
}
/* === 已完成状态 === */
.hnui-steps-item-finish .hnui-steps-item-icon {
border-color: var(--hnui-brand-color-normal);
background-color: transparent;
color: var(--hnui-brand-color-normal);
}
.hnui-steps-item-finish .hnui-steps-item-title {
color: var(--hnui-text-color);
}
.hnui-steps-item-finish .hnui-steps-item-tail {
background-color: var(--hnui-brand-color-normal);
}
/* === 进行中状态 === */
.hnui-steps-item-process .hnui-steps-item-icon {
border-color: var(--hnui-brand-color-normal);
background-color: var(--hnui-brand-color-normal);
color: #ffffff;
}
.hnui-steps-item-process .hnui-steps-item-icon-custom {
background-color: transparent;
color: var(--hnui-brand-color-normal);
}
.hnui-steps-item-process .hnui-steps-item-title {
color: var(--hnui-brand-color-normal);
font-weight: 500;
}
/* === 未进行状态 === */
.hnui-steps-item-wait .hnui-steps-item-icon {
border-color: var(--hnui-neutral-color-5);
background-color: transparent;
color: var(--hnui-neutral-color-5);
}
.hnui-steps-item-wait .hnui-steps-item-title {
color: var(--hnui-neutral-color-4);
}
/* === 暗色模式适配 === */
.dark .hnui-steps-item-icon {
border-color: var(--hnui-neutral-color-5);
color: var(--hnui-neutral-color-5);
}
.dark .hnui-steps-item-title {
color: var(--hnui-neutral-color-4);
}
.dark .hnui-steps-item-description {
color: var(--hnui-neutral-color-4);
}
.dark .hnui-steps-item-tail {
background-color: var(--hnui-neutral-color-6);
}
.dark .hnui-steps-item-finish .hnui-steps-item-title {
color: var(--hnui-neutral-color-2);
}水平步骤条
基础用法
带序号的水平步骤条，展示三种状态：已完成（finish）、进行中（process）、等待中（wait）。
已完成
这里是提示文字
进行中
这里是提示文字
未进行
这里是提示文字
未进行
这里是提示文字
查看代码
html
<div class="hnui-steps hnui-steps-horizontal">
<div class="hnui-steps-item hnui-steps-item-finish">
<div class="hnui-steps-item-icon">
<i class="hnui-icon-check"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">已完成</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-process">
<div class="hnui-steps-item-icon">2</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">进行中</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon">3</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">未进行</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon">4</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">未进行</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
</div>自定义图标
可以使用自定义图标替代序号。
已完成
这里是提示文字
进行中
这里是提示文字
未进行
这里是提示文字
未进行
这里是提示文字
查看代码
html
<div class="hnui-steps hnui-steps-horizontal">
<div class="hnui-steps-item hnui-steps-item-finish">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-entry"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">已完成</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-process">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-shopcart"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">进行中</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-folder"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">未进行</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-folder"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">未进行</div>
<div class="hnui-steps-item-description">这里是提示文字</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
</div>垂直步骤条
基础用法
带序号的垂直步骤条，适用于空间较窄的场景。
步骤一
这是步骤一的描述信息
步骤二
这是步骤二的描述信息
步骤三
这是步骤三的描述信息
步骤四
这是步骤四的描述信息
查看代码
html
<div class="hnui-steps hnui-steps-vertical">
<div class="hnui-steps-item hnui-steps-item-finish">
<div class="hnui-steps-item-icon">
<i class="hnui-icon-check"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤一</div>
<div class="hnui-steps-item-description">这是步骤一的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-process">
<div class="hnui-steps-item-icon">2</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤二</div>
<div class="hnui-steps-item-description">这是步骤二的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon">3</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤三</div>
<div class="hnui-steps-item-description">这是步骤三的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon">4</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤四</div>
<div class="hnui-steps-item-description">这是步骤四的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
</div>自定义图标
垂直步骤条也支持自定义图标。
步骤一
这是步骤一的描述信息
步骤二
这是步骤二的描述信息
步骤三
这是步骤三的描述信息
步骤四
这是步骤四的描述信息
查看代码
html
<div class="hnui-steps hnui-steps-vertical">
<div class="hnui-steps-item hnui-steps-item-finish">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-entry"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤一</div>
<div class="hnui-steps-item-description">这是步骤一的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-process">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-shopcart"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤二</div>
<div class="hnui-steps-item-description">这是步骤二的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-shopcart"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤三</div>
<div class="hnui-steps-item-description">这是步骤三的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
<div class="hnui-steps-item hnui-steps-item-wait">
<div class="hnui-steps-item-icon hnui-steps-item-icon-custom">
<i class="hnui-icon-shopcart"></i>
</div>
<div class="hnui-steps-item-content">
<div class="hnui-steps-item-title">步骤四</div>
<div class="hnui-steps-item-description">这是步骤四的描述信息</div>
</div>
<div class="hnui-steps-item-tail"></div>
</div>
</div>