Saltar al contenido principal

SidePanel

SidePanel en Storybook

Uso​

Descripción general​

El panel lateral organiza la estructura del contenido y proporciona contexto para orientar a los usuarios. Sirve como navegación secundaria, ya que ofrece acceso a herramientas, configuraciones o secciones adicionales. Ubicado en el lado izquierdo de la pantalla, se extiende verticalmente desde el encabezado hasta la parte inferior de la página y empuja el contenido, en lugar de superponerse a él.

Cuándo se debe utilizar​

  • La aplicación tiene varias secciones entre las que los usuarios deben moverse con frecuencia.
  • Los usuarios necesitan un menú coherente que permanezca visible en todas las páginas.
  • Se requiere una estructura jerárquica, con secciones y subsecciones.
  • La navegación debe ser accesible con un mínimo de clics.
  • Desea permitir que los usuarios contraigan la navegación para ahorrar espacio y, a la vez, mantenerla disponible.

Anatomía​

Imagen que ilustra la anatomía del panel lateral con contenedor, lista de elementos y botón de ícono contraíble

  1. Contenedor de panel: Estructura principal que contiene todos los componentes del panel lateral.
  2. Lista de elementos: Una lista de elementos seleccionables.
  3. Botón de ícono contraíble: Botón de flecha que indica si el panel se puede contraer o expandir. Al hacer clic en él, se cambia el estado del panel lateral.

No todos los elementos son obligatorios. Incluya solo lo necesario para su caso de uso específico. El panel lateral es un panel abierto y flexible que puede incluir varios elementos en función de casos de uso específicos. Los equipos pueden personalizarlo agregando diferentes componentes y funcionalidades según sea necesario, al tiempo que mantienen una experiencia optimizada.

Comportamiento​

  • Aparece en el lado izquierdo de la pantalla y se extiende desde el encabezado hasta la parte inferior de la página.
  • Puede contraerse o persistir, según las necesidades de la aplicación.
  • Empuja el contenido en lugar de superponerse a él, lo que garantiza una disposición clara y estructurada.
  • Proporciona acceso rápido a la navegación secundaria, las herramientas o las acciones contextuales sin interrumpir el flujo de trabajo principal.

Ejemplos de uso​

Ejemplos de uso del panel lateral, que muestran su naturaleza abierta y flexible.

Panel lateral con indicador de progreso Panel lateral con indicador de progreso de composición en pasos


Panel lateral con vista de árbol Panel lateral con componente de vista de árbol