Stepper

Organism

Çok adımlı ilerleme göstergesi. complete/active/error/pending durumları; horizontal ve vertical yönelim.

Horizontal

Account
2

Profile
3

Payment
4

Confirm

Vertical

Create account
Enter your email and password.
Verify email
Check your inbox.
3

Set up profile
Add your name and photo.
4

Invite your team
Optional.

With error state

Upload
Validate
3

Process

Source modules/ui/Stepper.ejs

<%
  var _steps       = locals.steps       || [];
  var _orientation = locals.orientation || 'horizontal';
  var _className   = locals.className   || '';

  var stateStyles = {
    complete: { circle: 'bg-success text-text-inverse border-success',         text: 'text-text-primary',           line: 'bg-success' },
    active:   { circle: 'bg-primary text-primary-fg border-primary',           text: 'text-text-primary font-semibold', line: 'bg-border' },
    error:    { circle: 'bg-error text-text-inverse border-error',             text: 'text-error',                  line: 'bg-border' },
    pending:  { circle: 'bg-surface-base text-text-disabled border-border',    text: 'text-text-disabled',          line: 'bg-border' },
  };
%>
<% if (_orientation === 'vertical') { %>

  <% _steps.forEach(function (step, i) { %>
  <%
    var state = step.state || 'pending';
    var s = stateStyles[state] || stateStyles.pending;
    var isLast = i === _steps.length - 1;
  %>
  
    
      
        <% if (state === 'complete') { %>
        <% } else if (state === 'error') { %>
        <% } else { %><%= i + 1 %><% } %>
      
      <% if (!isLast) { %><% } %>
    
    
      <%= step.label %>
      <% if (step.description) { %><%= step.description %><% } %>
    
  
  <% }); %>

<% } else { %>

  <% _steps.forEach(function (step, i) { %>
  <%
    var state = step.state || 'pending';
    var s = stateStyles[state] || stateStyles.pending;
    var isLast = i === _steps.length - 1;
  %>
  
    
      
        <% if (state === 'complete') { %>
        <% } else if (state === 'error') { %>
        <% } else { %><%= i + 1 %><% } %>
      
      
        <%= step.label %>
        <% if (step.description) { %><%= step.description %><% } %>
      
    
    <% if (!isLast) { %><% } %>
  
  <% }); %>

<% } %>