orn-ui
← Todos los componentes
Ver como Markdown
Organism

Wizard

Requiere <UIProvider> — Primeros pasos →

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add wizard

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Wizard } from 'orn-ui/wizard';
Depende de:core (theme + icons)stepsbuttontransition

Uso

  • cuándo usarlo — Un flujo de varios pasos con navegación. Para solo mostrar el avance, alcanza Steps.
  • current / onStepChange — Opcionales: sin ellos el Wizard maneja su propio estado, que cubre la mayoría de los flujos.
  • canGoNext — Validación por paso — el paso declara si deja avanzar.
  • allowStepNavigation — Permite volver a un paso completado desde el indicador.
  • scrollableContent — En `false` solo si un paso renderiza su propia lista virtualizada.
Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

A simple 3-step flow — Wizard tracks the current step itself

<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} onFinish={() => {}} />
</View>

orientation="vertical" — the step list runs down the side

<View style={{ height: 380 }}>
  <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
</View>

completedIndicator="number" — count instead of a check

<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
</View>

A real signup — Next stays disabled until the step is valid

<View style={{ height: 340 }}>
  <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
</View>

Custom labels — rename Back / Next / Finish

<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
</View>
Código completo del demo
const variants: VariantDef[] = [
  {
    label: 'A simple 3-step flow — Wizard tracks the current step itself',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'orientation="vertical" — the step list runs down the side',
    content: (
      <View style={{ height: 380 }}>
        <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'completedIndicator="number" — count instead of a check',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'A real signup — Next stays disabled until the step is valid',
    content: (
      <View style={{ height: 340 }}>
        <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'Custom labels — rename Back / Next / Finish',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;

Props

NombreTipoPor defectoDescripción
stepsWizardStep[]——
current?number—Paso actual (controlado). Si se omite, el Wizard maneja su propio estado.
onStepChange?(index: number) => void——
onFinish?() => void——
orientation?'horizontal' | 'vertical'horizontal—
completedIndicator?'number' | 'check'check—
allowStepNavigation?booleantruePermite volver a un paso ya completado tocándolo en el indicador.
backLabel?stringBack—
nextLabel?stringNext—
finishLabel?stringFinish—
scrollableContent?booleantrueEl contenido del paso scrollea cuando no entra. Ponelo en false solo si un paso renderiza su propia lista virtualizada (anidar una VirtualizedList dentro de un ScrollView rompe la virtualización).
animated?booleantrueEl contenido del paso entra deslizándose en el sentido de la navegación. Solo opacity y transform, así que la animación corre en el hilo nativo.
style?StyleProp<ViewStyle>——
AnteriorToastSiguienteAvatar