Saltar al contenido principal

Drawer

Abrir en ChatGPT
Shadow dwc-drawer 24.00
Java API

El componente Drawer en webforJ crea un panel deslizante que aparece desde el borde de la pantalla, revelando contenido adicional sin abandonar la vista actual. Se utiliza comúnmente para la navegación lateral, menús de filtros, configuraciones de usuario o notificaciones compactas que necesitan aparecer temporalmente sin interrumpir la interfaz principal.

Los Drawers se apilan automáticamente cuando se abren múltiples, lo que los convierte en una opción flexible para interfaces con espacio limitado.

El ejemplo a continuación muestra este comportamiento dentro del componente AppLayout. El cajón de navegación activado por el menú hamburguesa está integrado en AppLayout, mientras que el popup de bienvenida en la parte inferior utiliza una instancia de Drawer independiente. Ambos coexisten y se apilan de manera independiente, demostrando cómo los Drawers pueden integrarse dentro de componentes de diseño o usarse como elementos independientes.

Mostrar Código

Autofocus​

El componente Drawer soporta el autofoco, que establece automáticamente el foco en el primer elemento enfocador cuando se abre el Drawer. Esto mejora la usabilidad al atraer la atención directamente hacia el primer elemento accionable.

Mostrar Código

Label​

El método setLabel() puede proporcionar una descripción significativa del contenido dentro de un Drawer. Cuando se establece una etiqueta, tecnologías asistivas como lectores de pantalla pueden anunciarla, ayudando a los usuarios a entender el propósito del Drawer sin ver su contenido visual.

Drawer drawer = new Drawer();
drawer.setLabel("Gestor de Tareas");
Etiquetas Descriptivas

Usa etiquetas concisas y descriptivas que reflejen el propósito del Drawer. Evita términos genéricos como “Menú” o “Panel” cuando se puede usar un nombre más específico.

Size​

Para controlar el tamaño de un Drawer, establece un valor para la propiedad CSS personalizada --dwc-drawer-size. Esto establece el ancho del Drawer para colocaciones izquierda/derecha o la altura para colocaciones superior/inferior.

Puedes definir el valor usando cualquier unidad CSS válida como porcentaje, píxeles o vw/vh, utilizando Java o CSS:

// Java
drawer.setStyle("--dwc-drawer-size", "40%");
/* CSS */
dwc-drawer {
  --dwc-drawer-size: 40%;
}

Para evitar que el Drawer crezca demasiado, usa --dwc-drawer-max-size junto con él:

// Java
drawer.setStyle("--dwc-drawer-size", "40%");
drawer.setStyle("--dwc-drawer-max-size", "800px");
/* CSS */
dwc-drawer {
  --dwc-drawer-size: 40%;
  --dwc-drawer-max-size: 800px;
}

Placement​

El método setPlacement() controla dónde aparece el Drawer en la ventana gráfica.

Opciones de colocación disponibles:

  • TOP: Posiciona el cajón en el borde superior de la ventana gráfica.
  • TOP_CENTER: Alinea el cajón horizontalmente centrado en la parte superior de la ventana gráfica.
  • BOTTOM: Coloca el cajón en la parte inferior de la ventana gráfica.
  • BOTTOM_CENTER: Centra horizontalmente el cajón en la parte inferior de la ventana gráfica.
  • LEFT: Posiciona el cajón a lo largo del borde izquierdo de la ventana gráfica.
  • RIGHT: Posiciona el cajón a lo largo del borde derecho de la ventana gráfica.
Mostrar Código

Event handling​

El componente Drawer emite eventos de ciclo de vida que pueden usarse para activar la lógica de la aplicación en respuesta a cambios en su estado abierto o cerrado.

Eventos soportados:

  • DrawerOpenEvent: Se dispara cuando el cajón está completamente abierto.
  • DrawerCloseEvent: Se dispara cuando el cajón está completamente cerrado.

Puedes adjuntar oyentes a estos eventos para ejecutar lógica cuando cambia el estado del Drawer.

Drawer drawer = new Drawer();

drawer.addOpenListener(e -> {
  // Manejar el evento de cajón abierto
});

drawer.addCloseListener(e -> {
  // Manejar el evento de cajón cerrado
});

Ejemplo: Selector de contactos​

El componente Drawer expone contenido adicional sin interrumpir la vista actual. Este ejemplo coloca un cajón en el centro inferior, conteniendo una lista de contactos desplazable.

Cada contacto muestra un avatar, nombre, ubicación y botón de acción para acceder rápidamente a detalles o comunicación. Este enfoque funciona bien para construir herramientas compactas como selectores de contactos, paneles de configuración o notificaciones.

Mostrar Código

Ejemplo: Gestor de tareas​

Este ejemplo utiliza un Drawer como gestor de tareas. Puedes agregar tareas, marcarlas como completadas y borrar las completadas. El pie del Drawer incluye controles de formulario para interactuar con la lista de tareas, y el botón “Agregar Tarea” Button se desactiva si se alcanzan 50 tareas.

Mostrar Código

Styling​

Loading...