Saltar al contenido principal

Splitter

Abrir en ChatGPT
Sombra dwc-splitter 24.00
Java API

El componente Splitter, diseñado para dividir y redimensionar contenido dentro de tu aplicación, encapsula dos componentes redimensionables: el componente maestro y el componente de detalle. Un divisor separa estos componentes, permitiendo a los usuarios ajustar dinámicamente el tamaño de cada componente según sus preferencias.

Creando un splitter​

Crea un Splitter pasando dos componentes a su constructor. El primero se convierte en el panel maestro y el segundo en el panel de detalle.

Mostrar Código

Tamaño mínimo y máximo​

El componente Splitter proporciona métodos para establecer tamaños mínimo y máximo para sus paneles, permitiéndote controlar el comportamiento de redimensionamiento de los componentes dentro del Splitter. Cuando los usuarios intentan redimensionar paneles más allá de los tamaños mínimo o máximo especificados, el componente splitter aplica estas restricciones, asegurando que los paneles permanezcan dentro de los límites definidos.

Estableciendo tamaños​

El método setMasterMinSize(String masterMinSize) especifica el tamaño mínimo para el panel maestro del splitter. Asimismo, el método setMasterMaxSize(String masterMaxSize) especifica el tamaño máximo para el panel maestro.

Puedes especificar tamaños utilizando cualquier unidad CSS válida, como se muestra a continuación:

Mostrar Código

Orientación​

Puedes configurar la orientación en el componente Splitter, permitiéndote crear diseños personalizados para requisitos de diseño específicos. Al especificar la orientación, el componente organiza los paneles horizontal o verticalmente, proporcionando versatilidad en el diseño del layout.

Para configurar la orientación, utiliza el Enum de orientaciones admitidas para especificar si el Splitter debe renderizarse horizontal o verticalmente:

Mostrar Código

Posición relativa​

Para establecer la posición inicial de la barra divisoria en el componente Splitter, utiliza setPositionRelative. Este método toma un valor numérico de 0 a 100 que representa el porcentaje del espacio dado en el Splitter, y muestra el divisor en el porcentaje dado del ancho total:

Mostrar Código

Anidamiento​

El anidamiento de Splitter te permite crear diseños complejos con niveles de paneles redimensionables. Permite la creación de interfaces de usuario sofisticadas con control granular sobre la disposición y el redimensionamiento del contenido.

Para anidar componentes Splitter, instancia nuevas instancias de Splitter y añádelas como hijos a los componentes Splitter existentes. Esta estructura jerárquica permite la creación de diseños de múltiples niveles con capacidades de redimensionamiento flexibles. El siguiente programa demuestra esto:

Mostrar Código

Auto guardar​

El componente Splitter incluye una opción de AutoGuardar, que guarda el estado de los tamaños de paneles en el almacenamiento local para mantener dimensiones consistentes entre recargas.

Cuando configuras la opción de auto-guardar, el componente Splitter almacena automáticamente el estado de los tamaños de paneles en el almacenamiento local del navegador web. Esto asegura que los tamaños elegidos por los usuarios para los paneles persistan entre recargas de página o sesiones del navegador, reduciendo la necesidad de ajustes manuales.

Limpiando el estado​

Para revertir programáticamente el Splitter a la configuración y dimensiones predeterminadas, llama al método cleanState() para eliminar cualquier dato de estado guardado relacionado con el componente Splitter del almacenamiento local del navegador web.

Mostrar Código

En la demostración anterior, cada instancia de Splitter activa la función de AutoGuardar al llamar al método setAutosave. Esto asegura que los tamaños de los paneles se guarden automáticamente en el almacenamiento local. Por lo tanto, al recargar el navegador, los tamaños de estos splitters permanecen iguales.

Al hacer clic en el botón "Limpiar Estado" se llama al método cleanState() y se actualiza la ventana del navegador para mostrar las dimensiones originales.

Estilo​

Loading...

Mejores prácticas​

Para asegurar una experiencia de usuario óptima al usar el componente Splitter, considera las siguientes mejores prácticas:

  • Ajustar según el contenido: Al decidir sobre la orientación y los tamaños iniciales de los paneles, considera la prioridad del contenido. Por ejemplo, en un diseño con una barra lateral de navegación y un área de contenido principal, la barra lateral debería mantenerse normalmente más estrecha con un tamaño mínimo establecido para una navegación clara.

  • Anidamiento estratégico: Anidar splitters puede crear diseños versátiles pero puede complicar la interfaz de usuario e impactar en el rendimiento. Planifica tus diseños anidados para asegurarte de que sean intuitivos y mejoren la experiencia del usuario.

  • Recuerda las preferencias del usuario: Usa la función de AutoGuardar para recordar los ajustes del usuario a lo largo de las sesiones, mejorando la experiencia del usuario. Proporciona una opción para permitir a los usuarios restablecer a la configuración predeterminada.