nili/ui
enfaartr
Tüm bileşenler

StepIndicator

Genel görünüm
20 export9 varyant ekseni34 prop4 dosya
import { Step, StepIndicator, StepIndicatorLabels, StepperDot } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Yatay

value, geçerli adımın sıfırdan başlayan dizinidir. Ondan öncekiler tamamlanmış, sonrakiler varsayılan okunur — üç durum da konumdan bedavaya çıkar.

import { StepIndicator, Step } from "@nili/ui"

export function Example() {
  return (
    <StepIndicator value={1} labels={{ root: "Checkout" }}>
      <Step label="Account" />
      <Step label="Profile" />
      <Step label="Billing" />
      <Step label={t('step.done')} />
    </StepIndicator>
  )
}

Açıklamalarla

Etiketin altında ikinci bir satır. Kısa tutun — gösterge akışın haritasıdır, akışın kendisi değil.

import { StepIndicator, Step } from "@nili/ui"

export function Example() {
  return (
    <StepIndicator value={2} labels={{ root: "Checkout" }}>
      <Step label="Account" description="Email and password" />
      <Step label="Profile" description="Name and photo" />
      <Step label="Billing" description="Card details" />
    </StepIndicator>
  )
}

Dikey

Aynı bileşen, yığılmış. Bir kenar çubuğu ya da bir satıra asla sığmayacak uzun etiketli bir akış için doğrudur.

import { StepIndicator, Step } from "@nili/ui"

export function Example() {
  return (
    <StepIndicator orientation="vertical" value={1} labels={{ root: "Setup" }}>
      <Step label="Account" description="Email and password" />
      <Step label="Profile" description="Name and photo" />
      <Step label="Billing" description="Card details" />
    </StepIndicator>
  )
}

Yeniden ziyaret edilebilir adımlar

onSelect bir adımı gerçek bir düğme yapar — önceki adımlarına dönülebilen bir sihirbaz için. Onsuz adım cansız bir metindir ki akış katı biçimde ileriye doğruysa doğrusu budur.

import { StepIndicator, Step } from "@nili/ui"

export function Example() {
  const [current, setCurrent] = useState(1)

  return (
    <StepIndicator value={current} labels={{ root: "Checkout" }}>
      {steps.map((step, index) => (
        <Step
          key={step.label}
          label={step.label}
          onSelect={index <= current ? () => setCurrent(index) : undefined}
        />
      ))}
    </StepIndicator>
  )
}

Özel işaretler ve zorlanan durum

icon sayının ya da onay işaretinin yerini alır. status, göstergenin value’sundan türeyen durumu geçersiz kılar — seyrek gerekir ama doğrulaması başarısız olup işaretli kalması gereken bir adım için vardır.

import { StepIndicator, Step, Icon } from "@nili/ui"
import { RiUser3Line, RiCheckLine } from "@remixicon/react"

export function Example() {
  return (
    <StepIndicator value={1} labels={{ root: "Setup" }}>
      <Step label={t('step.account')} icon={<Icon icon={RiCheckLine} />} />
      <Step label={t('step.profile')} icon={<Icon icon={RiUser3Line} />} />
      <Step label={t('step.billing')} status="completed" />
    </StepIndicator>
  )
}

Adım noktası

Derli toplu biçim: etiket yok, yalnızca konum. Tanıtım galerileri ve mobil sayfalar için — etiketli bir gösterge tüm ekranı yerdi.

sm
xs
import { StepperDot } from "@nili/ui"

export function Example() {
  return (
    <>
      <StepperDot count={4} value={1} label="Onboarding" />
      <StepperDot count={4} value={1} size="xs" label="Onboarding" />
    </>
  )
}