Hojas Inferiores

Son superficies con contenido suplementario, ancladas en la parte inferior de la pantalla.

Las hojas inferiores, también conocidas como bottom sheets, se despliegan desde la parte inferior de la pantalla y proporcionan funcionalidades adicionales o información detallada, ofrecen acceso rápido a funciones y proporcionan opciones de configuración o detalles contextuales. Mejoran la experiencia del usuario al brindar contenido relevante de forma accesible y sin interrumpir la visualización principal.

Estas son algunas de las características y funcionalidades clave de las hojas inferiores:

Contenido: Las hojas inferiores se utilizan para mostrar contenido adicional que complementa la pantalla principal. Pueden contener opciones de navegación, acciones contextuales, filtros, detalles de elementos o cualquier otro contenido que sea relevante y necesario en el contexto actual.

Accesibilidad: Las hojas inferiores permiten un acceso rápido a funciones o información adicional sin tener que abandonar la pantalla principal. Esto mejora la eficiencia y la fluidez de la interacción del usuario al brindarles una forma conveniente de acceder a opciones relevantes sin cambiar de pantalla.

Interacción: Las hojas inferiores pueden tener diferentes modos de interacción, como deslizar hacia arriba o hacia abajo, tocar o hacer clic en elementos interactivos, o incluso permitir la interacción mediante gestos. Esto proporciona flexibilidad al usuario y les permite interactuar con el contenido de la hoja inferior de la manera más cómoda para ellos.

Contexto: Las hojas inferiores pueden adaptarse al contexto actual y mostrar contenido específico basado en la pantalla o acción previa del usuario. Por ejemplo, si se selecciona un elemento en la pantalla principal, la hoja inferior puede mostrar detalles adicionales sobre ese elemento.

Personalización: Las hojas inferiores también pueden incluir opciones de personalización y configuración para que los usuarios ajusten la experiencia de la aplicación según sus preferencias. Esto puede incluir cambios en la visualización, ajustes de notificaciones, preferencias de cuenta, entre otros.

Cierre: Las hojas inferiores generalmente se pueden cerrar tocando fuera de la hoja, deslizando hacia abajo o seleccionando una opción de cierre específica.

Tarjeta Grande

Etiqueta

HTML

CSS

.bottom-sheet {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 10px 10px 30px;
gap: 10px;
position: fixed;
bottom: 0;
left: 50%;
background-color: white;
transform: translate(-50%, 100%);
transition: transform 0.3s ease-in-out;
width: 300px;
height: 429px;
background: #FFFFFF;
border-radius: 10px 10px 0px 0px;
z-index: 99;
}

.bottom-sheet .barra {
width: 100px;
border-top: 5px solid #D7E5F4;
background: #D7E5F4;
border-radius: 20px;
cursor: pointer;
}

.bottom-sheet.show {
transform: translate(-50%, 0);
}

JS

const showButton = document.getElementById("show-bottom-sheet");
const closeButton = document.getElementById("close-bottom-sheet");

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

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