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 de acuerdo a sus preferencias.

Creando un divisor​

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 los paneles más allá de los tamaños mínimos o máximos especificados, el componente splitter aplica estas restricciones, asegurando que los paneles se mantengan 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. De igual manera, el método setMasterMaxSize(String masterMaxSize) especifica el tamaño máximo para el panel maestro.

Puedes especificar tamaños usando 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 adaptados a 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.

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 del 0 al 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 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 nuevos objetos Splitter y añádelos como hijos a los componentes Splitter existentes. Esta estructura jerárquica permite crear diseños de múltiples niveles con capacidades de redimensionamiento flexibles. El programa a continuación demuestra esto:

Mostrar Código

Guardado automático​

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

Cuando configuras la opción de guardado automático, el componente Splitter almacena automáticamente el estado de los tamaños de los paneles en el almacenamiento local del navegador web. Esto asegura que los tamaños que los usuarios elijan para los paneles persistan a través de recargas de página o sesiones del navegador, reduciendo la necesidad de ajustes manuales.

Limpiando el estado​

Para revertir programáticamente el Splitter a los ajustes y dimensiones predeterminados, 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 AutoGuardado al llamar al método setAutosave. Esto asegura que los tamaños de los paneles se guarden automáticamente en el almacenamiento local. Así, al recargar el navegador, los tamaños de estos dividores 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 principal de contenido, la barra lateral debería permanecer típicamente más estrecha con un tamaño mínimo establecido para una navegación clara.

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

  • Recuerda las preferencias del usuario: Utiliza la función de AutoGuardado para recordar los ajustes del usuario a través de sesiones, mejorando la experiencia del usuario. Proporciona una opción para permitir a los usuarios restablecer a los ajustes predeterminados.