Stepper

Organism

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

Horizontal

Preview

Account
2

Profile
3

Payment
4

Confirm

Code

<%- include('modules/ui/Stepper', {
  steps: [
    { label: 'Account', state: 'complete' },
    { label: 'Profile', state: 'active' },
    { label: 'Payment', state: 'pending' },
    { label: 'Confirm', state: 'pending' },
  ]
}) %>

Vertical

Preview

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.

Code

<%- include('modules/ui/Stepper', {
  orientation: 'vertical',
  steps: [
    { label: 'Create account',   description: 'Enter your email and password.', state: 'complete' },
    { label: 'Verify email',     description: 'Check your inbox.',              state: 'complete' },
    { label: 'Set up profile',   description: 'Add your name and photo.',       state: 'active' },
    { label: 'Invite your team', description: 'Optional.',                      state: 'pending' },
  ]
}) %>

With error state

Preview

Upload
Validate
3

Process

Code

<%- include('modules/ui/Stepper', {
  steps: [
    { label: 'Upload',   state: 'complete' },
    { label: 'Validate', state: 'error' },
    { label: 'Process',  state: 'pending' },
  ]
}) %>

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) { %><% } %>
  
  <% }); %>

<% } %>