Hojas Laterales

Superficies que contienen contenido o acciones adicionales para apoyar tareas como parte de un flujo.

Las hojas laterales tienen funcionalidades diversas, y se utilizan para la navegación, acceso rápido a funciones, personalización, visualización de información adicional y soporte para el flujo de trabajo del usuario. Mejoran la experiencia del usuario al proporcionar una organización clara y accesible de contenido y funciones relevantes dentro de la interfaz.

Estas son algunas de las características y funcionalidades clave de las hojas laterales, también conocidas como paneles laterales o cajones de navegación:

Navegación: Las hojas laterales se utilizan como un espacio dedicado para la navegación y la exploración de contenido adicional. Pueden contener enlaces, menús desplegables, categorías o filtros que permiten a los usuarios acceder a diferentes secciones, funciones o vistas de la aplicación o web.

Acceso: Las hojas laterales pueden contener accesos directos a funciones o herramientas frecuentemente utilizadas. Esto brinda a los usuarios una forma rápida y conveniente de acceder a las funcionalidades clave sin tener que navegar a través de múltiples pantallas o menús.

Visualización: Las hojas laterales pueden mostrar información adicional relacionada con el contenido principal de la pantalla. Esto podría incluir detalles, estadísticas, opciones de filtrado o cualquier otra información relevante que amplíe el contexto o brinde más detalles sobre el contenido principal.

Niveles: Las hojas laterales a menudo ofrecen la capacidad de navegar en múltiples niveles, lo que permite a los usuarios explorar jerarquías de contenido más profundas. Esto se puede lograr mediante la inclusión de menús desplegables, subcategorías o navegación en árbol.

Expansión: Las hojas laterales pueden ser diseñadas para ser ocultadas o expandidas según las necesidades del usuario. Esto permite maximizar el espacio de la pantalla cuando la hoja lateral no está en uso, y mostrarla cuando se requiere acceso a su contenido.

Hoja con encabezado una acción

Filtrar

Etiqueta

HTML

<div class="hojas-laterales" id="hoja-lateral-1">
<div class="list-horizontal">
<div>
<img id="close-hoja-lateral" src="iconos/flecha_izquierda_lineal.svg" alt="" height="32" width="32" style="cursor: pointer;">
Documento </div>
<img src="iconos/Ver_mas_horizontal_lineal.svg" alt="" height="32" width="32">
</div>
<hr class="divisor">
<div class="list-icono-horizontal">
<div class="icon-box">
<img src="iconos/enviar_lineal.svg" alt="" width="32" height="32"> </div> <div class="icon-box"> <img src="iconos/borrar_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box">
<img src="iconos/estrella_lineal.svg" alt="" width="32" height="32">
</div>
<div class="icon-box">
<img src="iconos/Compartir_lineal.svg" alt="" width="32" height="32">
</div>
</div>
<hr class="divisor">
<div class="lista">
<div class="elemento">Etiqueta <img src="iconos/deshacer_lineal.svg" alt="" width="32" height="32">
</div>
<div class="elemento">Etiqueta <img src="iconos/responder_todos_lineal.svg" alt="" width="32" height="32">
</div>
<div class="elemento">Etiqueta <img src="iconos/responder_lineal.svg" alt="" width="32" height="32"> </div> <div class="elemento">Etiqueta <img src="iconos/reenviar_lineal.svg" alt="" width="32" height="32">
</div>
<div class="elemento">Etiqueta <img src="iconos/personas_lineal.svg" alt="" width="32" height="32">
</div>
</div>
</div>

CSS

.hojas-laterales {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 10px 10px 30px;
gap: 10px;
position: fixed;
height: 100vh;
top: 0;
right: 0;
background-color: white;
transform: translateX(550px);
transition: transform 0.25s ease-in-out;
width: 300px;
background: #FFFFFF;
z-index: 99;
}
.hojas-laterales.show {
transform: translateX(0);
}

.hojas-laterales .list-horizontal {
display: flex;
gap: 10px;
width: 100%;
align-items: flex-start;
justify-content: space-between;
height: 50px;
padding: 9px 10px;
}

.hojas-laterales .list-horizontal div {
display: flex;
gap: 10px;
width: 100%;
align-items: center;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
color: #024588;
}

.hojas-laterales .list-icono-horizontal {
display: flex;
gap: 10px;
}

.hojas-laterales .list-icono-horizontal .icon-box {
display: flex;
flex-direction: row;
align-items: center;
padding: 9px 10px;

width: 52px;
height: 50px;

background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
}

.hojas-laterales .lista {
display: flex;
flex-direction: column;
align-items: center;
padding: 9px 10px;
height: 50px;
background: #FFFFFF;
mix-blend-mode: normal;
border-radius: 10px;
width: 100%;
}

.hojas-laterales .lista .elemento {
display: flex;
width: 100%;
height: 50px;
align-items: center;
padding: 9px 10px;
justify-content: space-between;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
}

JS

const showButton = document.getElementById("show-hoja-lateral");
const closeButton = document.getElementById("close-hoja-lateral");
const hojaLateral = document.getElementById("hoja-lateral-1");

showButton.addEventListener("click", function () {
hojaLateral.classList.toggle("show");
});

closeButton.addEventListener("click", function () {
hojaLateral.classList.toggle("show");
});

Hoja con encabezado con dos acciones

Documento

Etiqueta

Documento

Etiqueta