Steps

Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.

Uso básico

Barra de pasos simple.

Defina el atributo active con un valor de tipo Number, que indica el índice de pasos y comienza desde 0. Puede definir el atributo space cuando es necesario fijar el ancho del paso que acepta el tipo Number. La unidad del atributo space es px. Si no está configurado, es responsive. La configuración del atributo finish-status puede cambiar el estado de los pasos completados.

Step 1

Step 2

Step 3

Step bar con el estatus

Muestra el estado del step para cada paso.

Utilice el atributo title para establecer el nombre del paso, o sobrescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.

Done

Processing

Step 3

Centrado

El título y la descripción pueden estar centrados.

Step 1

Some description

Step 2

Some description

Step 3

Some description

Step bar con descripción

Puede poner una descripción para cada paso.

Step 1

Some description

Step 2

Some description

Step 3

Some description

Step bar con icono

En la barra de pasos se pueden utilizar diversos iconos personalizados.

El icono se define mediante la propiedad icon. Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.

Step 1

Step 2

Step 3

Step bar vertical

Step bar vertical.

Solo tiene que fijar el atributo direction a vertical en el elemento el-steps.

Step 1

Step 2

Step 3

Step bar simple

Step bar simple, donde se ignorará align-center, description, direction y space.

Step 1

Step 2

Step 3

Step 1

Step 2

Step 3

API de Steps

Atributos de Steps

Nombre	Descripción	Tipo	Por defecto
space	el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje.	`number` / `string`	''
direction	dirección de visualización	`enum`	horizontal
active	actual paso de activación	`number`	0
process-status	estatus del paso actual	`enum`	process
finish-status	estatus del paso final	`enum`	finish
align-center	centrado de título y descripción	`boolean`	—
simple	si aplicar un tema simple	`boolean`	—

Slots de Steps

Nombre	Descripción	Subtags
default	personaliza el contenido por defecto	Step

API de Steps

Atributos de steps

Nombre	Descripción	Tipo	Por defecto
title	titulo del paso	`string`	''
description	descripción del paso	`string`	''
icon	icono personalizado. Los iconos también se pueden pasar a través del slot con nombre	`string` / `Component`	—
status	estado actual. Se configurará automáticamente mediante Steps si no está configurado.	`enum`	''