Saltar al contenido principal

AppLayout

Abrir en ChatGPT
Sombra dwc-app-layout 23.06
Java API

El componente AppLayout te proporciona una estructura de página lista para usar con un encabezado y un pie fijos, un cajón que se desliza hacia dentro y hacia fuera, y un área de contenido desplazable. Juntas, estas secciones cubren las necesidades de diseño de paneles de control, paneles administrativos y la mayoría de las interfaces de múltiples secciones.

Características​

El diseño de aplicación webforJ es un componente que permite construir diseños comunes de aplicaciones.

  • Fácil de usar y personalizar
  • Diseño responsivo
  • Múltiples opciones de diseño
  • Funciona con el Modo Oscuro de webforJ

Proporciona un encabezado, pie, cajón y sección de contenido todo creado en un componente responsivo que se puede personalizar fácilmente para construir rápidamente diseños comunes de aplicaciones como un panel de control. El encabezado y el pie son fijos, el cajón se desliza dentro y fuera de la ventana gráfica, y el contenido es desplazable.

Cada parte del diseño es un Div, que puede contener cualquier control válido de webforJ. Para obtener los mejores resultados, la aplicación debe incluir una etiqueta meta de ventana gráfica que contenga viewport-fit=cover. La etiqueta meta hace que la ventana gráfica se escale para llenar la pantalla del dispositivo.

@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")

Resumen​

El siguiente ejemplo de código dará como resultado una aplicación con una barra lateral colapsable que contiene un logotipo y pestañas para varias opciones de contenido y un encabezado. La demostración utiliza el componente web dwc-icon-button para crear un botón de alternancia del cajón. El botón tiene el atributo data-drawer-toggle que instruye a DwcAppLayout para escuchar eventos de clic provenientes de ese componente para alternar el estado del cajón.

Mostrar Código

Barra de navegación de ancho completo​

Por defecto, el AppLayout renderiza el encabezado y el pie en modo fuera de pantalla. El modo fuera de pantalla significa que la posición del encabezado y el pie se desplazará para ajustarse al lado del cajón abierto. Deshabilitar este modo hará que el encabezado y el pie ocupen el espacio completo disponible y ajusten la posición superior e inferior del cajón para encajar con el encabezado y el pie.

AppLayout myApp = new AppLayout();

myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Mostrar Código

Múltiples barras de herramientas​

La barra de navegación no tiene límite en la cantidad de barras de herramientas que puedes agregar. Una Toolbar es un componente de contenedor horizontal que sostiene un conjunto de botones de acción, íconos u otros controles. Para agregar una barra de herramientas adicional, simplemente utiliza el método addToHeader() para agregar otro componente Toolbar.

La siguiente demostración muestra cómo usar dos barras de herramientas. La primera alberga el botón de alternancia del cajón y el título de la aplicación. La segunda barra de herramientas alberga un menú de navegación secundaria.

Mostrar Código

Barras de herramientas adhesivas​

Una barra de herramientas adhesiva es una barra de herramientas que permanece visible en la parte superior de la página cuando el usuario se desplaza hacia abajo, pero la altura de la barra de navegación se colapsa para hacer más espacio disponible para el contenido de la página. Por lo general, este tipo de barra de herramientas contiene un menú de navegación fijo que es relevante para la página actual.

Es posible crear barras de herramientas adhesivas utilizando la propiedad CSS personalizada --dwc-app-layout-header-collapse-height y la opción AppLayout.setHeaderReveal().

Cuando se llama AppLayout.setHeaderReveal(true), el encabezado será visible en la primera renderización y luego se ocultará cuando el usuario comience a desplazarse hacia abajo. Una vez que el usuario comience a desplazarse hacia arriba nuevamente, el encabezado será revelado.

Con la ayuda de la propiedad CSS personalizada --dwc-app-layout-header-collapse-height, es posible controlar cuánto del encabezado de la barra de navegación será oculto.

Mostrar Código

Diseño de navegación móvil​

La barra de navegación inferior se puede utilizar para proporcionar una versión diferente de la navegación en la parte inferior de la aplicación. Este tipo de navegación es especialmente popular en aplicaciones móviles.

Nota cómo el cajón está oculto en la siguiente demostración. El widget AppLayout admite tres posiciones de cajón: DrawerPlacement.LEFT, DrawerPlacement.RIGHT y DrawerPlacement.HIDDEN.

Al igual que AppLayout.setHeaderReveal(), se admite AppLayout.setFooterReveal(). Cuando se llama a AppLayout.setFooterReveal(true), el pie estará visible en la primera renderización y luego se ocultará cuando el usuario comience a desplazarse hacia arriba. Una vez que el usuario comience a desplazarse hacia abajo nuevamente, el pie será revelado.

Por defecto, cuando el ancho de la pantalla es de 800px o menos, el cajón se cambiará a modo de popover. Esto se llama el punto de quiebre. El modo de popover significa que el cajón se superpondrá al área de contenido con una superposición. Es posible configurar el punto de quiebre utilizando el método setDrawerBreakpoint() y el punto de quiebre debe ser una consulta de medios válida.

Mostrar Código

Utilidades del cajón​

Las utilidades del cajón AppLayout están diseñadas para navegación integrada y menús contextuales dentro del diseño de la aplicación principal, mientras que los componentes Drawer independientes ofrecen paneles deslizables flexibles que se pueden usar en cualquier lugar de tu aplicación para contenido adicional, filtros o notificaciones. Esta sección se centra en las características y utilidades del cajón integradas proporcionadas por AppLayout.

Punto de quiebre del cajón​

Por defecto, cuando el ancho de la pantalla es de 800px o menos, el cajón se cambiará a modo de popover. Esto se llama el punto de quiebre. El modo de popover significa que el cajón se superpondrá al área de contenido con una superposición. Es posible configurar el punto de quiebre utilizando el método setDrawerBreakpoint() y el punto de quiebre debe ser una consulta de medios válida.

Por ejemplo, en el siguiente ejemplo, el punto de quiebre del cajón se configura en 500px o menos.

AppLayout demo = new AppLayout();
demo.setDrawerBreakpoint("(max-width:500px)");

Título del cajón​

El componente AppLayout proporciona un método addToDrawerTitle() para definir un título personalizado para mostrar en el encabezado del cajón.

layout.addToDrawerTitle(new Div("Menú"));

Acciones del cajón​

El componente AppLayout te permite colocar componentes personalizados como botones o íconos en el área de acciones del encabezado del cajón utilizando el método addToDrawerHeaderActions().

layout.addToDrawerHeaderActions(
  new IconButton(TablerIcon.create("bell")),
);

Es posible pasar múltiples componentes como argumentos:

layout.addToDrawerHeaderActions(
  new IconButton(TablerIcon.create("bell")),
  new Button("Perfil")
);

Las acciones del cajón aparecen en la sección alineada a la derecha del encabezado del cajón.

Mostrar Código

AppDrawerToggle 24.12​

El componente AppDrawerToggle es una clase webforJ del lado del servidor que representa un botón utilizado para alternar la visibilidad de un cajón de navegación en un AppLayout. Se mapea al elemento del lado del cliente <dwc-app-drawer-toggle> y se estiliza por defecto para comportarse como un ícono tradicional de menú hamburguesa, este comportamiento se puede personalizar.

Resumen​

El AppDrawerToggle extiende IconButton y utiliza el ícono "menu-2" del conjunto de íconos Tabler por defecto. Aplica automáticamente el atributo data-drawer-toggle para integrarse con el comportamiento del cajón del lado del cliente.

// No se requiere registro de eventos:
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// El interruptor de cajón funcionará sin problemas—no se necesitan oyentes de eventos manuales.

Estilos​

Loading...