今天來說說 Steps
在申請表單中也是很常用

tsx

import React, { useState } from 'react'; 
import { Steps } from 'primereact/steps';
import { MenuItem } from 'primereact/menuitem';

const StepsCompnent:React.FC = ()=> {
    const [activeIndex, setActiveIndex] = useState<number>(0);

    const itemRenderer = (item:MenuItem, itemIndex:number) => {
        const isActiveItem = activeIndex >= itemIndex;
        const backgroundColor = isActiveItem ? 'var(--primary-color)' : 'var(--surface-b)';
        const textColor = isActiveItem ? 'var(--surface-b)' : 'var(--text-color-secondary)';

        return (
            <span
                style={{ backgroundColor: backgroundColor, color: textColor}}
                onClick={() => setActiveIndex(itemIndex)}
            >
                <i className={`${item.icon} text-xl`} />
            </span>
        );
    };

    const items: MenuItem[] = [
        {
            icon: 'pi pi-user',
            className:activeIndex>0?'p-active':'',
            template: (item) => itemRenderer(item, 0)
        },
        {
            icon: 'pi pi-calendar',
            className:activeIndex>1?'p-active':'',
            template: (item) => itemRenderer(item, 1)
        },
        {
            icon: 'pi pi-check',
            className:activeIndex>2?'p-active':'',
           template: (item) => itemRenderer(item, 2)
        }
    ];
    return (
        <div>
            <Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />
        </div>
    )
}
export default StepsCompnent;

我想在之前點亮的步驟都點亮，所以修改一下判斷

className:activeIndex>1?'p-active':''

添加p-active給線做判斷

const isActiveItem = activeIndex >= itemIndex;

在判斷上做一個修改，讓前面的步驟也一起點亮

因為原樣式不是很喜歡 所以用css 魔改了一下
scss

.p-steps {
    .p-steps-item {
        span{
            width: 40px;
            height:40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            border-radius: 50%;
        }
        display: flex;
        justify-content: start;
        &:last-child{
            flex:none;
        }
        &::before{
            display: none;
        }
        &:not(:last-child){
            &::after{
                content: "";
                border-top: 2px solid var(--surface-b);
                width: calc(100% - 40px);
                position: relative;
                top: 50%;
            }
            &.p-active{
                &::after {
                    content: "";
                    border-top: 2px solid var(--primary-color);
                    width: calc(100% - 40px);
                    position: relative;
                    top: 50%;
                    display: block;
                }
            }
        }
    }
}

也可以做一些花式判斷，例如steps 添加 readOnly
做一些驗證表單通過後才可以用按鈕點下一步(上例就是用setActiveIndex)

也可以利用Router做一些控制，既然我都用了react-router-dom
不如明天就來說說用router 控制的部分吧

好了 今天就先這樣
明天見!