Migas de pan
Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los elementos técnicos:
Breadcrumbs son una cadena de enlaces que representan la ruta en la estructura del servicio desde la página raíz hasta la página actual, permitiendo a los usuarios navegar a cualquier página intermedia. Ayudan al usuario a determinar en qué parte del servicio se encuentra y a retroceder rápidamente uno o varios niveles.
Cuándo usar
- Usa el componente Breadcrumbs para páginas anidadas.
- No es necesario usar breadcrumbs en la página de inicio.
- Los breadcrumbs suelen colocarse en la barra de acciones, en la parte superior de la página.
Estructura
1 - Página actual.
2 - Página anterior. Es mejor mostrarla primero, si el ancho del contenedor lo permite.
3 - Página raíz del servicio.
4 - Divisor. Por defecto se usa "/", pero ">" también es aceptable.
5 - Icono de desbordamiento. Aparece cuando los títulos de las páginas no caben en el ancho del contenedor. Las páginas que ocupan más espacio del disponible se acceden a través de un menú desplegable, que se revela al hacer clic en los puntos suspensivos.
Tamaños
El tamaño de fuente básico en los breadcrumbs es body-1. El tamaño del icono es de 16x16 px.
Estados
Por defecto - estado predeterminado.
Hover - al pasar el ratón por encima del título de la página.
Deshabilitado - no se puede hacer clic. Se puede usar para la página actual o para páginas que no tienen enlace.
Cargando - el componente puede mostrar el contenido del elemento pasando una función a través del parámetro renderItemContent. Por ejemplo, mostrar Skeleton si los datos del elemento del crumb aún no se han cargado.
Modificaciones
Los breadcrumbs pueden contener los siguientes elementos adicionales:
- Icono de acción - como añadir a favoritos, copiar el título de la página o menú contextual.
- Etiqueta — un estado u otro atributo asociado a la página.
- Selector — al hacer clic en el elemento te permite elegir entre varias opciones.
- Texto adicional— ID, contador de cantidad y otros atributos de la página.
Se puede usar un icono de casa en lugar de la palabra "Principal" para indicar el regreso a la página de inicio.
Personalización
Puedes cambiar los colores, los divisores y los estilos de hover. Recuerda mantener un resaltado más brillante en la página actual y suficiente contraste entre los elementos.
