p-steps: When is "ui-steps-complete" styleClass applied?

[Qrious]

Hi,

I am trying to use the p-steps component in PrimeNG. I want to have different styling for the completed and not-completed steps. That is, if the user is currently at step 3, then step 1 & 2 are completed, and the greyed out or disabled look doesn't suit them well.

In the documentation (Styling section in https://www.primefaces.org/primeng/#/steps) , I can see the classes "ui-steps-complete" & "ui-steps-incomplete" mentioned. But all steps except the current step have the "ui-steps-incomplete" class only applied. No steps are assigned the "ui-steps-complete" class.

I do not find any reference to "ui-steps-complete" in https://github.com/primefaces/primeng/b ... s/steps.ts also.

So the question is: What is the ui-steps-complete class meant for? How can I apply it to some of the steps in my p-steps component?

My implementation of the component is pretty basic. Exactly as given in the PrimeNG demo.

Code: Select all

<p-steps [model]="items" [(activeIndex)]="activeIndex"></p-steps>

Thank you

[yigitfindikli]

Hi,

I am trying to use the p-steps component in PrimeNG. I want to have different styling for the completed and not-completed steps. That is, if the user is currently at step 3, then step 1 & 2 are completed, and the greyed out or disabled look doesn't suit them well.

In the documentation (Styling section in https://www.primefaces.org/primeng/#/steps) , I can see the classes "ui-steps-complete" & "ui-steps-incomplete" mentioned. But all steps except the current step have the "ui-steps-incomplete" class only applied. No steps are assigned the "ui-steps-complete" class.

I do not find any reference to "ui-steps-complete" in https://github.com/primefaces/primeng/b ... s/steps.ts also.

So the question is: What is the ui-steps-complete class meant for? How can I apply it to some of the steps in my p-steps component?

My implementation of the component is pretty basic. Exactly as given in the PrimeNG demo.

Code: Select all

<p-steps [model]="items" [(activeIndex)]="activeIndex"></p-steps>

Thank you

Hi,

You can style completed steps with ui-state-complete. There is example for you https://stackblitz.com/edit/github-xhkcm7 .
I suppose documentation needs update, i'll take care of this. Thanks for the reporting this!

Best Regards.

[anclancy]

This answer only applies to primeng version 7. If you look at the package.json on the StackBlitz primeng version is 7( "primeng": "7.1.0",). In version 10 ui-steps-complete or ui-steps-incomplete doesn't seem to be present. We are upgrading our build from version 7 to version 10. The p-steps component elements(UI-steps-complete or ui-steps-incomplete) seems to have been deprecated from the component. The documentation(https://www.primefaces.org/primeng/v10-lts/#/steps/seat) displays p-steps
container elements.

• p-steps-item Menuitem element.
  p-steps-current Active item.
  p-steps-incomplete Inactive item.
  p-steps-complete Completed item.
  p-steps-number Number of menuitem.
  p-steps-title Label of menuitem.

But it doesn't seem to exist or work when we changed the UI-steps-complete, ui-steps-incomplete to p-steps-complete, p-steps-incomplete. Please advise, I have searched the internet and got mixed documentation on this matter?
Below is steps-custom scss of usage in v7 that we are trying upgrade to v10:

Code: Select all

  &.ui-state-completed <= replaced w p-steps-complete {
        & .p-steps-number {
          position: relative;
          background-color: green !important;
          z-index: 10;
          &:before {
            color: white;
            content: '\2713';
            font-size: 1.7rem;
            height: 100%;
            left: 0;
            position: absolute;
            text-indent: 0;
            top: 1px;
            width: 100%;
          }
        }
      }
       &.ui-steps-incomplete  <= replaced w p-steps-incomplete {
        .p-steps-number {
          background-color: grey !important;
          position: relative;
          z-index: 10;
        }
      }
      

Thanks

[PhilHuhn]

ui- CSS styles were removed in version 10. I ported to using bootstrap at that time. You can decide differently and use PrimeNG's flex, or something else...

In general, I did a global search and replace as follows:
ui-grid-row -> row
nsg-content -> container
ui-grid-col- -> col-md-
ui-button- -> p-button-
ui-inputgroup -> ''
ui-inputtext -> ''
ui-grid ui-grid-responsive ui-fluid -> ''
ui-dialog -> p-dialog

[ChenRvn]

i notice that there is no class for completed.

Not it PrimeNG or on Prime React

please advise, how can we solve that?

Thanks