Un panel es un componente primario de FOLIO que funciona como un contenedor para que la información se muestre sin saturar la pantalla.

Pantalla con los 4 típicos paneles

Layout responsive

Contenido

Los paneles están compuestos por un header y un contenido que tiene que colocarse dentro de las 12 columnas de la grilla del layout, permitiendo que sea responsive cuando el panel se redimensiona.

Puntos de rotura

Cuando el ancho de la pantalla es mayor de 1025px, los paneles tienen que aparecer uno al lado del otro.

Cuando el ancho de la pantalla es menor que 1025px, el panel más reciente tiene que superponerse sobre el otro.

Cuando el ancho de pantalla es menor que 641px, solo el panel más reciente se mostrará.

Ver prototipo

Comportamiento

Header del panel

Este panel permite a los usuarios conocer qué tipo de información se muestra en el panel.

Permite también a los usuarios llevar a cabo acciones o esconder el panel.

Para más información sobre el panel header, puedes ir a la sección del panel header.  

Cerrar panel

Clicando en el icono de cerrar, los paneles se cierran dejando más espacio para los paneles restantes.

Transición de paneles

Los nuevos paneles se deslizan desde la derecha cuando los otros paneles se redimensionan.

El panel de Registro se redimensiona cuando el panel Notes se despliega desde la derecha.