nili/ui
enfaartr
همه‌ی کامپوننت‌ها

StepIndicator

نمای کلی
۲۰ اکسپورت۹ محور واریانت۳۴ پراپ۴ فایل
import { Step, StepIndicator, StepIndicatorLabels, StepperDot } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

افقی

value اندیس گام فعلی است و از صفر شروع می‌شود. هرچه پیش از آن است کامل‌شده خوانده می‌شود و هرچه پس از آن، پیش‌فرض — هر سه حالت مجانی از روی موقعیت درمی‌آیند.

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>
  )
}

همراه با توضیح

یک خط دوم زیر برچسب. کوتاه نگهش دارید — نشانگر نقشهٔ مسیر است، نه خود مسیر.

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>
  )
}

عمودی

همان کامپوننت، روی‌هم‌چیده. برای سایدبار مناسب است، یا برای مسیری با برچسب‌های بلند که هرگز در یک ردیف جا نمی‌شوند.

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>
  )
}

گام‌های قابل‌بازگشت

onSelect یک گام را به دکمهٔ واقعی تبدیل می‌کند — برای ویزاردی که می‌شود به گام‌های قبلش برگشت. بدون آن گام فقط متنی بی‌جان است، و وقتی مسیر اکیداً رو به جلوست همین درست است.

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>
  )
}

نشانگرهای سفارشی و وضعیت تحمیلی

icon جای عدد یا تیک را می‌گیرد. status وضعیتی را که از value نشانگر درآمده بازنویسی می‌کند — به‌ندرت لازم می‌شود، ولی برای گامی هست که اعتبارسنجی‌اش شکست خورده و باید علامت‌خورده بماند.

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>
  )
}

نقطهٔ گام‌شمار

شکل فشرده: بدون برچسب، فقط موقعیت. برای کاروسل‌های آشناسازی و شیت‌های موبایل، جایی که نشانگر برچسب‌دار تمام صفحه را می‌گیرد.

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" />
    </>
  )
}