Barra de progreso de pasos

Barra de progreso de pasos en Storybook

Uso

Descripción general

La barra de progreso de pasos muestra la cantidad de pasos que un usuario debe completar para finalizar una tarea. Por ejemplo, para completar un perfil, un usuario debe proporcionar información como calificaciones y detalles de su casa. Estos se pueden establecer como pasos obligatorios antes de que la tarea se considere completa.

Cuándo se debe utilizar

Para mostrar la cantidad de pasos necesarios para completar una tarea.

Cuándo no se debe utilizar

• Si no sabe cuántos pasos se necesitan para completar la tarea. En su lugar, use una barra de progreso simple.
• Si el proceso incluye subpasos. En su lugar, use una barra de progreso de fase.

Formato

Anatomía

La barra de progreso de pasos consta de los siguientes elementos:

1. Ícono o número de paso: Indica si un paso se ha completado, está en curso o está pendiente.
2. Barra: Indica la conexión entre los pasos, muestra los pasos completados y el paso actual.
3. Rótulo de paso: Establece el contexto y comunica lo que el usuario logrará en cada paso (por ejemplo, “Enviar pago”).

Prácticas recomendadas

• Asegúrese de que los pasos se muestren en un orden lógico, de principio a fin (de izquierda a derecha).
• Los usuarios deben poder volver a los pasos anteriores para revisar y actualizar los detalles.
• Asegúrese de que los pasos estén agrupados lógicamente, sean simples y claros para facilitar la comprensión.
• Asegúrese de que todos los pasos estén visibles.
• Mantenga los pasos a un mínimo de 3 y un máximo de 7.

Contenido

Pautas generales de redacción

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Rótulo de disposición de pasos

• Los rótulos deben ser cortos e identificar claramente el paso.
• En los rótulos, use mayúsculas como se usan en las oraciones. La primera palabra de una frase y cualquier nombre propio deber ir en mayúscula. Para obtener orientación adicional sobre cómo implementar el uso de mayúsculas y minúsculas en las oraciones, consulte la sección Uso de mayúsculas.
• Cuando se utiliza descripciones emergentes junto con una disposición de pasos, el contenido de la descripción emergente solo debe contener una o dos palabras.

Interacciones

Teclado

Cada paso activo puede recibir el foco con el uso del teclado.

Accesibilidad

La disposición de pasos comprende una serie de pasos para comunicar el estado de finalización. Utiliza la etiqueta <nav> de punto de referencia HTML5 y a cada paso del proceso se le asigna el rol WAI-ARIA de 'link'. El valor textual visual también se incluye dentro de un atributo aria-label.

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Asegúrese de que, si usa enlaces, cada paso dirija al usuario al destino correcto.

Código

<StepProgressBar
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>

Instrucción de importación

import { StepProgressBar } from '@jutro/components';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

stepsobligatorio

Tipo

{ title: IntlMessageShape, visited: bool, active: bool, disabled: bool, onClick: () => void; }

disabled

Tipo

boolean

Descripción

Indicates whether this step is disabled.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

title

Tipo

IntlMessageShape

Descripción

Title text for the component.

visited

Tipo

boolean

Descripción

Indicates whether the step has already been visited by the user.

Descripción

Steps data.

className

Tipo

string

Descripción

CSS class name for this component.

isVertical

Tipo

boolean

Descripción

If set to true, the component is oriented vertically.

Ganchos

No hay ganchos para StepProgressBar.

Claves de traducción

Los mensajes ProgressIndicator se pueden utilizar para mostrar detalles sobre el progreso actual de los usuarios:

Clave	Se usa para
jutro-components.widgets.progressIndicator.status.completed	Cuando el paso se ha completado
jutro-components.widgets.progressIndicator.status.inProgress	Cuando el paso está en curso
jutro-components.widgets.progressIndicator.progressStep.status.visited	Cuando el paso se ha visitado
jutro-components.widgets.progressIndicator.ariaLabel	aria-label formado a partir de una combinación entre progressTitle y progressLabel

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar una barra de progreso de pasos correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de barra de progreso de pasos básica

Muestra el progreso como una serie de pasos rotulados.

<StepProgressBar
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>

Ejemplo vertical

Puede mostrar el progreso como una lista vertical de pasos usando la propiedad isVertical.

<StepProgressBar
    isVertical
    steps={[
        {
            title: 'This step has been visited',
            visited: true
        },
        {
            active: true,
            title: 'This step is active',
            visited: false
        },
        {
            title: 'This step will be visited in future',
            visited: false
        },
        {
            disabled: true,
            title: 'This step is disabled',
            visited: false
        }
    ]}
/>

Registro de cambios