Stepper

Çok adımlı bir akıştaki ilerlemeyi gösteren, salt okunur bir gösterge.

import { Stepper } from "@merid/react";

const STATUS_LABELS = { complete: "Tamamlandı", current: "Geçerli adım", upcoming: "Başlanmadı" };

export function Example() {
  return (
    <Stepper.Root current={1} aria-label="Ödeme adımları">
      <Stepper.Step title="Hesap" statusLabels={STATUS_LABELS} />
      <Stepper.Step title="Teslimat" statusLabels={STATUS_LABELS} />
      <Stepper.Step title="Ödeme" statusLabels={STATUS_LABELS} />
      <Stepper.Step title="Özet" statusLabels={STATUS_LABELS} />
    </Stepper.Root>
  );
}

Import

import { Stepper } from "@merid/react";

Anatomi

<Stepper.Root current={0}>
  <Stepper.Step title="…" description="…" />
</Stepper.Root>

• Stepper.Root: sıralı bir liste. current, aktif adımın sıfırdan başlayan index'idir; önceki adımlar tamamlanmış, sonrakiler sırada bekliyor sayılır.
• Stepper.Step: numaralı bir işaret (tamamlandığında onay işareti), bir başlık ve isteğe bağlı bir açıklamadan oluşan tek adım.

Örnekler

Açıklamalarla dikey

<Stepper.Root current={2} orientation="vertical" aria-label="Hesap kurulumu">
  <Stepper.Step title="Çalışma alanı oluştur" description="Ad ve bölge" statusLabels={STATUS_LABELS} />
  <Stepper.Step title="Ekibi davet et" description="En fazla 10 kişi ekle" statusLabels={STATUS_LABELS} />
  <Stepper.Step title="Veriyi bağla" description="CSV'den ya da bir API'den import et" statusLabels={STATUS_LABELS} />
  <Stepper.Step title="Yayına al" statusLabels={STATUS_LABELS} />
</Stepper.Root>

Responsive davranış

Yatay yönde başlıklar ve açıklamalar tek satırda kalır, sığmayınca üç noktayla kısalır; string başlıklar tam metni bir title attribute'unda saklar. Stepper kendi genişliğini ölçer (viewport'u değil, bir CSS container query'si kullanır): 560px'in altında kompakt bir layout'a geçer; yalnızca geçerli adım başlığını gösterir, diğerleri numaralı ya da onaylı işaretlerine küçülür. Küçülen başlıklar erişilebilirlik ağacında kalır; ekran okuyucular her iki durumda da tüm adımları duyurur, dar kolonlar da JavaScript ya da yön değişikliği gerektirmez.

API referansı

Stepper.Root

<ol> render'lar ve onun tüm HTML attribute'larını kabul eder.

Stepper.Step

<li> render'lar ve title dışındaki HTML attribute'larını kabul eder. Stepper.Root'un doğrudan child'ı olmalı.

Stil verme

• .mrd-stepper[data-orientation]: kök liste, horizontal ya da vertical.
• .mrd-stepper__step[data-state]: complete, current ya da upcoming.
• .mrd-stepper__marker: 28px'lik daire; sıradaki adımda --mrd-tray, geçerli adımda 1,5px'lik --mrd-accent halka, tamamlanmış adımda --mrd-accent-soft.
• .mrd-stepper__title / .mrd-stepper__description: metin; geçerli adımda başlık --mrd-ink rengine döner.
• .mrd-stepper__step::after: adımlar arasındaki 1px'lik --mrd-line bağlayıcı.

Erişilebilirlik

Stepper'lar için bir APG deseni yok. Stepper statik, sıralı bir listedir; APG landmark ve liste rehberinin yapılandırılmış içerik için önerdiği yapının aynısı. Etkileşimli değildir.

• Liste varsayılan olarak "Progress" adını alır; akışı anlatan bir aria-label ver.
• Geçerli adım aria-current="step" taşır.
• Her adım görsel olarak gizli bir durum kelimesiyle biter ("Completed", "Current step", "Not started"); yerelleştirme için statusLabels ile değiştirilebilir.
• İşaretler aria-hidden'dır; numara listedeki sırayla aktarılır.

Adımlar focus almaz, bu yüzden klavye etkileşimi yoktur. Kullanıcı bir adıma geri dönebiliyorsa adımın içeriğine link ya da buton koy.

Kullanım ilkeleri

İlgili sayfalar

• Progress
• Tabs
• Pagination