Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de pasos

Última actualización:

Pasos CSS de Tailwind solo para CSS para asistentes de varios pasos e indicadores de progreso. Disposición horizontal y vertical, variantes de color por escalón. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de pasos visualizan procesos, guías o flujos de trabajo de varios pasos mostrando etapas secuenciales. Construidos con HTML semántico y diseños flexibles, los pasos muestran el progreso a través de asistentes de configuración, tutoriales y procedimientos complejos. El sistema de pasos de Frutjam admite múltiples tamaños, colores, estructuras y estados de finalización, ideal para asistentes de formularios, guías de instalación y seguimiento del progreso.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
stepsBaseContenedor para una lista ordenada de pasos.
stepModificadorElemento de paso individual con un marcador numerado
steps-horizontalModificadorDiseño horizontal (predeterminado)
steps-verticalModificadorDiseño apilado verticalmente
step-primaryColorMarcador de color del tema principal
step-secondaryColorMarcador de color del tema secundario
step-accentColorMarcador de color del tema de acento
step-neutralColorMarcador de color de tema neutro
step-infoColorMarcador de color semántico de información
step-successColorMarcador de color semántico de éxito.
step-warningColorMarcador de color semántico de advertencia
step-errorColorMarcador de color semántico de error

Uso básico

1
2
3
4
5
<ul class="steps">
  <li class="step">Shipping</li>
  <li class="step step-primary">Payment</li>
  <li class="step">Confirmation</li>
</ul>

1
2
3
4
5
<ul className="steps">
  <li className="step">Shipping</li>
  <li className="step step-primary">Payment</li>
  <li className="step">Confirmation</li>
</ul>

Diseño de pasos

html 
1
2
3
4
5
<ul class="steps steps-horizontal">
  <li class="step">Step 1</li>
  <li class="step step-primary">Step 2</li>
  <li class="step">Step 3</li>
</ul>

Colores de paso

html 
1
2
3
4
5
6
7
8
9
<ul class="steps">
  <li class="step step-primary">Primary</li>
  <li class="step step-secondary">Secondary</li>
  <li class="step step-accent">Accent</li>
  <li class="step step-info">Info</li>
  <li class="step step-success">Success</li>
  <li class="step step-warning">Warning</li>
  <li class="step step-error">Error</li>
</ul>

Pasos verticales

html 
1
2
3
4
5
6
<ul class="steps steps-vertical">
  <li class="step step-primary">Account setup</li>
  <li class="step step-primary">Personal info</li>
  <li class="step">Payment method</li>
  <li class="step">Confirmation</li>
</ul>

Pasos con descripción

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-4">
  <div>
    <ul class="steps w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Verify Email</li>
      <li class="step">Choose Plan</li>
      <li class="step">Complete</li>
    </ul>
    <div class="grid grid-cols-4 gap-4 mt-4 text-xs text-center">
      <div>Create account</div>
      <div>Check your inbox</div>
      <div>Select pricing</div>
      <div>Get started</div>
    </div>
  </div>
</div>

Pasos receptivos

html 
1
2
3
4
5
6
<ul class="steps w-full">
  <li class="step step-primary">Order placed</li>
  <li class="step step-primary">Processing</li>
  <li class="step">Shipped</li>
  <li class="step">Delivered</li>
</ul>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Pasos según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP