企业官网建设流程全解析

daisyUI steps：注册向导里一眼看懂的进度指示器

【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

daisyUI steps 组件是多步骤表单和注册流程的进度条，解决"用户不知道总共几步、自己走到哪一步"的问题。如果你在 Tailwind CSS 项目里要写注册向导或结账流程，它可以直接拿来用。下面把它的结构、业务写法和状态配色一次讲清。

30 秒看懂 steps 长什么样

steps是一个ul容器，每一步是一个li。圆圈里的编号由 CSS 计数器自动生成，不用手动写数字。默认横向排布，连线也是自动渲染的，你只需要决定每步用什么颜色。

<!-- 横向步骤条，编号自动生成 --> <ul class="steps"> <li class="step step-primary">注册</li> <li class="step step-primary">选择套餐</li> <li class="step">支付</li> <li class="step">完成</li> </ul>

注意：圆圈的颜色由li上的颜色类决定，容器ul只负责排布方向。

按真实业务场景拆解 steps 组件

同一套类名在不同业务里的用法并不一样，下面是最典型的四种写法。

在注册向导里标记"做到第几步了"

注册向导里用户只关心三件事：做完了什么、正在做什么、还剩什么。把这三种状态映射成三种颜色即可，不需要额外样式。

<!-- 移动端纵向，桌面端横向；已完成用绿色、进行中用主题色 --> <ul class="steps steps-vertical lg:steps-horizontal"> <li class="step step-success">创建账号</li> <li class="step step-primary">填写地址</li> <li class="step">支付</li> <li class="step">完成</li> </ul>

这里要注意：横竖切换靠断点类实现，基础写steps-vertical、大屏加lg:steps-horizontal，不要复制两套组件。

订单状态流转怎么表示

"已发货、运输中、待取件、已签收"这类订单状态不是简单的完成与否，每个状态都该有独立语义色，让用户扫一眼就知道包裹卡在哪。

<!-- 每个订单状态一个语义色 --> <ul class="steps"> <li class="step step-success">已发货</li> <li class="step step-info">运输中</li> <li class="step step-warning">待取件</li> <li class="step">已签收</li> </ul>

这里要注意：状态驱动的进度条应由后端返回的状态渲染类名，别在前端把"当前状态"写死。

步骤过多时怎么收纳不溢出

流程超过 5 步后，横向布局在小屏上会被挤压甚至撑破版心，给外层加一个可滚动容器就行。

<!-- 外层包滚动容器，小屏可左右滑动 --> <div class="overflow-x-auto"> <ul class="steps"> <li class="step">开始</li> <li class="step step-secondary">2</li> <li class="step step-secondary">3</li> <li class="step">4</li> <li class="step step-accent">5</li> </ul> </div>

这里要注意：steps默认按1fr网格均分，不加包裹时步骤只会缩成一团小圆点，overflow-x-auto外层才是它真正能滚动的前提。

用符号替换编号表示完成

审批链这类场景里，光看数字太干，可以用data-content把圆内编号换成 ✓、! 这类符号。

<!-- contenteditable="false">【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui