Customizing Web Components Dock Manager

El componente Dock Manager Infragistics Web Components le proporciona las propiedades necesarias para personalizar aún más el diseño para adaptarlo a los requisitos específicos de su aplicación. ¡Profundicemos y exploremos cómo Web Components DockManager le permite crear interfaces de usuario excepcionales y mejorar la productividad de sus aplicaciones!

Proximity Dock

En este modo, los indicadores del joystick están ocultos y el acoplamiento se puede realizar arrastrando un panel cerca del borde de otro panel. Mientras arrastra un panel, cuando el cursor del mouse llega al área correspondiente a la posición del acoplamiento, se muestra una vista previa del acoplamiento. Al subir el mouse, el panel arrastrado se acopla en la ubicación de la vista previa. Para habilitar el acoplamiento por proximidad, simplemente establezca la propiedad proximityDock en verdadero.

this.dockManager.proximityDock = true;

Inner Docking

Para acoplar a la derecha un panel arrastrado 1 en el panel 2, el cursor debe estar en el área definida por el borde derecho del panel 2 y el borde derecho desplazado hacia la izquierda. La distancia de desplazamiento se especifica como un umbral de proximidad del muelle y se establece en un valor de 50 px. En los casos en que haya un divisor, el acoplamiento se puede realizar desde ambos lados del divisor.

Outer Docking

Para realizar el muelle exterior, primero debe cumplir con criterios específicos. En Dock Manager, el acoplamiento externo solo se permite dentro de un host de documentos, lo que significa que acoplará el panel de destino a las regiones exteriores del host de documentos.

Para realizar un acoplamiento superior exterior, por ejemplo, debe estar dentro de la región definida por el borde superior del host del documento y permanecer dentro del desplazamiento del borde superior. La distancia de desplazamiento se especifica como un umbral exterior del muelle de proximidad y se establece explícitamente en un valor de 25 px. El valor del umbral de acoplamiento de proximidad de 50 px permanece sin cambios, lo que esencialmente significa que en este escenario, solo hay un área de 25 px disponible para el acoplamiento interno. En los casos en los que hay un divisor dentro del alojamiento de documentos, la conexión exterior se puede realizar desde ambos lados del divisor.

NOTA: Cuando el acoplamiento por proximidad está habilitado, los usuarios no podrán realizar un acoplamiento externo para las posiciones izquierda y derecha y superior e inferior desde un solo panel. Por ejemplo, en un escenario en el que hay dos paneles divididos con un divisor entre ellos, los usuarios solo podrán realizar un acoplamiento externo izquierdo cuando el panel arrastrado esté sobre el panel dividido izquierdo y viceversa.

Pruébelo usted mismo en el siguiente ejemplo:

Focus Panes Programmatically

El método focusPane permite a los desarrolladores enfocar dinámica y programáticamente un panel específico dentro del diseño proporcionando el contentId del panel deseado.

this.dockManager.focusPane('content1');

Cuando se utiliza el método focusPane, el comportamiento varía según el estado del panel de destino. Así es como funciona:

1. Paneles flotantes: si el panel está flotante, al invocar focusPane lo enfocará, configúrelo como activePane y asegúrese de que aparezca encima de cualquier otro panel flotante.

2. Paneles no fijados: cuando el panel de destino no está fijado, focusPane desplegará el panel a su estado abierto.

3. Regular Pinned Panes: For regular pinned panes, focusPane will set the pane as the activePane.

Al utilizar este método, los desarrolladores pueden controlar sin esfuerzo la visibilidad y la posición de los paneles en función de la interacción del usuario o los eventos de la aplicación.

Pruébelo usted mismo en el siguiente ejemplo:

Auto-hide Pane Headers

Con la propiedad showPaneHeaders de DockManager, los desarrolladores ahora tienen la flexibilidad de controlar la visibilidad de los encabezados de los paneles dentro del layout. De forma predeterminada, showPaneHeaders está configurado para garantizar always que los encabezados de los paneles estén siempre visibles. Cuando se establece en onHoverOnly, todos los encabezados de los paneles se ocultarán hasta que pase el mouse sobre el borde superior de un panel de contenido. Aparecerá el encabezado del panel correspondiente y se ocultará suavemente una vez que se aleje el mouse. Eche un vistazo al siguiente ejemplo:

Control Inner Docking

De forma predeterminada, Dock Manager permite a los usuarios arrastrar y acoplar paneles uno dentro de otro sin esfuerzo, creando pestañas. Para proporcionar más control sobre esta funcionalidad, hemos introducido dos propiedades: allowInnerDock y acceptsInnerDock.

Al configurar la propiedad acceptsInnerDock de un IgcContentPane, los desarrolladores pueden controlar el acoplamiento dentro de paneles de contenido específicos. Cuando esta propiedad se establece en falso, los usuarios no podrán realizar el acoplamiento interno en el panel especificado.

{
    type: IgcDockManagerPaneType.contentPane,
    header: 'Floating 1',
    contentId: 'content3',
    acceptsInnerDock: false
}

Si desea deshabilitar el acoplamiento interno en DockManager, simplemente configure allowInnerDock en false. Esta propiedad determina si el usuario final tiene permiso para acoplar paneles internos.

this.dockManager.allowInnerDock = false;

Control Pane Dragging

Con la propiedad containedInBoundaries, los desarrolladores pueden controlar si los lados de los paneles flotantes siempre están contenidos dentro del DockManager. Cuando se establece en true, el arrastre del panel se detendrá una vez que cualquiera de los lados intente moverse más allá de los límites del DockManager.

Pruébelo en el siguiente ejemplo:

API References

• IgcDockManagerComponent
• IgcContentPane