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