Stepper - JavaScript

Stepper

ReactVueJS + CSS

Struktur HTML

Copy

<div class="ina-stepper ina-stepper--horizontal ina-stepper--horizontal-responsive">
  <div class="ina-stepper__item ina-stepper__item--completed">
    <div class="ina-stepper__icon-wrapper">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="ina-stepper__check-icon"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        stroke-width="2.5"
        stroke="currentColor"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M5 12l5 5l10 -10" />
      </svg>
    </div>
    <div class="ina-stepper__label">Step 1</div>
  </div>
  <div class="ina-stepper__separator ina-stepper__separator--completed"></div>
  <div class="ina-stepper__item ina-stepper__item--active">
    <div class="ina-stepper__icon-wrapper">
      <span class="ina-stepper__step-number">2</span>
    </div>
    <div class="ina-stepper__label">Step 2</div>
  </div>
  <div class="ina-stepper__separator"></div>
  <div class="ina-stepper__item">
    <div class="ina-stepper__icon-wrapper">
      <span class="ina-stepper__step-number">3</span>
    </div>
    <div class="ina-stepper__label">Step 3</div>
  </div>
</div>

Contoh Penggunaan

Contoh 1 - Horizontal Stepper

Preview Code

Step 1

2

Step 2

3

Step 3

4

Step 4

Previous Next

Copy

<div style="padding: 20px">
  <div
    class="ina-stepper ina-stepper--horizontal ina-stepper--horizontal-responsive"
    id="stepper-horizontal"
  >
    <!-- Step 1 - Completed -->
    <div class="ina-stepper__item ina-stepper__item--completed">
      <div class="ina-stepper__icon-wrapper">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ina-stepper__check-icon"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          stroke-width="2.5"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M5 12l5 5l10 -10"></path>
        </svg>
      </div>
      <div class="ina-stepper__label">Step 1</div>
    </div>
    <div class="ina-stepper__separator ina-stepper__separator--completed"></div>

    <!-- Step 2 - Active -->
    <div class="ina-stepper__item ina-stepper__item--active">
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">2</span>
      </div>
      <div class="ina-stepper__label">Step 2</div>
    </div>
    <div class="ina-stepper__separator"></div>

    <!-- Step 3 - Inactive -->
    <div class="ina-stepper__item">
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">3</span>
      </div>
      <div class="ina-stepper__label">Step 3</div>
    </div>
    <div class="ina-stepper__separator"></div>

    <!-- Step 4 - Inactive -->
    <div class="ina-stepper__item">
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">4</span>
      </div>
      <div class="ina-stepper__label">Step 4</div>
    </div>
  </div>

  <div class="mt-14">
    <button
      type="button"
      class="ina-button ina-button--secondary ina-button--md"
      id="stepper-horizontal-prev"
      data-stepper-prev="stepper-horizontal"
    >
      Previous
    </button>
    <button
      type="button"
      class="ina-button ina-button--primary ina-button--md"
      id="stepper-horizontal-next"
      style="margin-left: 8px"
      data-stepper-next="stepper-horizontal"
    >
      Next
    </button>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.InaUI && typeof window.InaUI.initStepper === 'function') {
      window.InaUI.initStepper();
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && typeof window.InaUI.initStepper === 'function') {
      window.InaUI.initStepper();
    }
  });
</script>

Contoh 2 - Vertical Stepper

Preview Code

Step 1

Step 2

3

Step 3

4

Step 4

Previous Next

Copy

<div style="padding: 20px">
  <div class="ina-stepper ina-stepper--vertical" id="stepper-vertical">
    <!-- Step 1 - Completed -->
    <div class="ina-stepper__item ina-stepper__item--completed">
      <div class="ina-stepper__icon-wrapper">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ina-stepper__check-icon"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          stroke-width="2.5"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M5 12l5 5l10 -10"></path>
        </svg>
      </div>
      <div class="ina-stepper__label">Step 1</div>
    </div>
    <div class="ina-stepper__separator ina-stepper__separator--completed"></div>

    <!-- Step 2 - Completed -->
    <div class="ina-stepper__item ina-stepper__item--completed">
      <div class="ina-stepper__icon-wrapper">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ina-stepper__check-icon"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          stroke-width="2.5"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M5 12l5 5l10 -10"></path>
        </svg>
      </div>
      <div class="ina-stepper__label">Step 2</div>
    </div>
    <div class="ina-stepper__separator ina-stepper__separator--completed"></div>

    <!-- Step 3 - Active -->
    <div class="ina-stepper__item ina-stepper__item--active">
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">3</span>
      </div>
      <div class="ina-stepper__label">Step 3</div>
    </div>
    <div class="ina-stepper__separator"></div>

    <!-- Step 4 - Inactive -->
    <div class="ina-stepper__item">
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">4</span>
      </div>
      <div class="ina-stepper__label">Step 4</div>
    </div>
  </div>

  <div class="mt-14">
    <button
      type="button"
      class="ina-button ina-button--secondary ina-button--md"
      id="stepper-vertical-prev"
      data-stepper-prev="stepper-vertical"
    >
      Previous
    </button>
    <button
      type="button"
      class="ina-button ina-button--primary ina-button--md"
      id="stepper-vertical-next"
      style="margin-left: 8px"
      data-stepper-next="stepper-vertical"
    >
      Next
    </button>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.InaUI && typeof window.InaUI.initStepper === 'function') {
      window.InaUI.initStepper();
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && typeof window.InaUI.initStepper === 'function') {
      window.InaUI.initStepper();
    }
  });
</script>

Contoh 3 - Clickable Stepper

Preview Code

Step 1

2

Step 2

3

Step 3

4

Step 4

Current Step: 2

Copy

<div style="padding: 20px">
  <div
    class="ina-stepper ina-stepper--horizontal ina-stepper--horizontal-responsive"
    id="stepper-clickable"
    data-display-target="stepper-clickable-current"
    data-current-step="1"
  >
    <!-- Step 1 - Completed -->
    <div
      class="ina-stepper__item ina-stepper__item--completed ina-stepper__item--clickable"
      data-step-index="0"
    >
      <div class="ina-stepper__icon-wrapper">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ina-stepper__check-icon"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          stroke-width="2.5"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M5 12l5 5l10 -10"></path>
        </svg>
      </div>
      <div class="ina-stepper__label">Step 1</div>
    </div>
    <div class="ina-stepper__separator ina-stepper__separator--completed"></div>

    <!-- Step 2 - Active -->
    <div
      class="ina-stepper__item ina-stepper__item--active ina-stepper__item--clickable"
      data-step-index="1"
    >
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">2</span>
      </div>
      <div class="ina-stepper__label">Step 2</div>
    </div>
    <div class="ina-stepper__separator"></div>

    <!-- Step 3 - Inactive -->
    <div class="ina-stepper__item ina-stepper__item--clickable" data-step-index="2">
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">3</span>
      </div>
      <div class="ina-stepper__label">Step 3</div>
    </div>
    <div class="ina-stepper__separator"></div>

    <!-- Step 4 - Inactive -->
    <div class="ina-stepper__item ina-stepper__item--clickable" data-step-index="3">
      <div class="ina-stepper__icon-wrapper">
        <span class="ina-stepper__step-number">4</span>
      </div>
      <div class="ina-stepper__label">Step 4</div>
    </div>
  </div>

  <div style="margin-top: 20px">
    <p class="mt-3 text-content-primary font-medium text-sm p-2" id="stepper-clickable-current">
      Current Step: 2
    </p>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.InaUI && typeof window.InaUI.initStepper === 'function') {
      window.InaUI.initStepper();
    }
  });

  document.addEventListener('astro:page-load', () => {
    if (window.InaUI && typeof window.InaUI.initStepper === 'function') {
      window.InaUI.initStepper();
    }
  });
</script>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan