Saltar al contenido principal

Drawer

Abrir en ChatGPT
Sombra 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 navegación lateral, menús de filtros, configuraciones de usuario o notificaciones compactas que necesitan aparecer temporalmente sin interrumpir la interfaz principal.

Apilamiento​

Los drawers se apilan automáticamente cuando se abren varios, 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 drawer de navegación activado por el menú de 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 independientemente, demostrando cómo los drawers pueden integrarse dentro de componentes de diseño o utilizarse como elementos independientes.

Mostrar Código

Autofocus​

El componente Drawer admite el autofocus, que establece automáticamente el enfoque en el primer elemento enfocable cuando se abre el Drawer. Esto mejora la usabilidad al atraer la atención directamente al primer elemento accionable.

Mostrar Código

Etiqueta​

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

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

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

Tamaño​

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

Puede definir el valor utilizando cualquier unidad CSS válida, como un 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, utilice --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;
}

Colocación​

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

Opciones de colocación disponibles:

  • SUPERIOR: Posiciona el drawer en el borde superior de la ventana gráfica.
  • SUPERIOR_CENTRO: Alinea el drawer horizontalmente centrado en la parte superior de la ventana gráfica.
  • INFERIOR: Coloca el drawer en la parte inferior de la ventana gráfica.
  • INFERIOR_CENTRO: Centra horizontalmente el drawer en la parte inferior de la ventana gráfica.
  • IZQUIERDO: Posiciona el drawer a lo largo del borde izquierdo de la ventana gráfica.
  • DERECHO: Posiciona el drawer a lo largo del borde derecho de la ventana gráfica.
Mostrar Código

Manejo de eventos​

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

Eventos admitidos:

  • DrawerOpenEvent: Se dispara cuando el drawer está completamente abierto.
  • DrawerCloseEvent: Se dispara cuando el drawer está completamente cerrado.

Puede 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 drawer abierto
});

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

Ejemplo: Selector de contactos​

El componente Drawer expone contenido adicional sin interrumpir la vista actual. Este ejemplo coloca un drawer en el centro inferior, que contiene una lista de contactos desplazable.

Cada contacto muestra un avatar, nombre, ubicación y un 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. Puede agregar tareas, marcarlas 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

Estilo​

Loading...