Customizing Web Components Dock Manager

    El componente Infragistics Web Components Dock Manager proporciona las propiedades necesarias para personalizar aún más el diseño y 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

    In this mode the joystick indicators are hidden and docking can be accomplished by dragging a pane close to the border of another pane. While dragging a pane, when the mouse cursor reaches the area corresponding to the dock position, a dock preview is shown. On mouse up the dragged pane is docked in the previewed location. To enable proximity docking, simply set the proximityDock property to true.

    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

    The focusPane method allows developers to dynamically and programmatically focus a specific pane within the layout by providing the contentId of the desired pane.

    this.dockManager.focusPane('content1');

    When using the focusPane method, the behavior varies depending on the state of the targeted pane. Here's how it works:

    1. Floating Panes: If the pane is floating, invoking focusPane will bring it into focus, set it as the activePane and ensure it appears on top of any other floating panes.

    2. Unpinned Panes: When the targeted pane is unpinned, focusPane will flyout the pane to its open state.

    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

    With the showPaneHeaders property of the DockManager, developers now have the flexibility to control the visibility of pane headers within the layout. By default, showPaneHeaders is set to always ensuring that pane headers are always visible. When set to onHoverOnly, all pane headers will be hidden until you hover your mouse over the top edge of a content pane. The corresponding pane header will appear and it will smoothly hide once your mouse moves away. Take a look at the example below:

    Control Inner Docking

    By default, the Dock Manager allows users to effortlessly drag and dock panes inside each other, creating tabs. To provide more control over this functionality, we've introduced two properties - allowInnerDock and acceptsInnerDock.

    By setting the acceptsInnerDock property of an IgcContentPane, developers can control docking inside specific content panes. When this property is set to false, users will be restricted from performing inner docking in the specified pane.

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

    If you wish to disable inner docking throughout the DockManager, simply set allowInnerDock to false. This property determines whether the end user is permitted to inner dock panes at all.

    this.dockManager.allowInnerDock = false;

    Control Pane Dragging

    With the containedInBoundaries property, developers can control whether the sides of floating panes are always contained within the DockManager. When set to true, pane dragging will stop once any of the sides attempt to move beyond the DockManager boundaries.

    Pruébelo en el siguiente ejemplo:

    Split Panes Fixed Size Mode

    De forma predeterminada, el tamaño de un panel es relativo a los tamaños de sus paneles del mismo nivel y el valor predeterminado es 100. Si tiene dos paneles hermanos, donde el primero tiene su tamaño establecido en 400 y el segundo en 200, el primero tendrá el doble del tamaño del segundo y estos dos paneles llenarán todo el espacio disponible.

    If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the useFixedSize of the parent split pane. When this property is set to true all children are sized in pixels, based on their size property. With that modification, the first pane will span across 400 pixels and the second one - 200 pixels. Further resizing via the splitter would change only the size of the current content pane without affecting the sizes of its siblings. Once the sum of the child panes' sizes exceeds their parent's size, a scrollbar will appear making the parent split pane scrollable.

    const splitPaneRelativeSize: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1',
            size: 400 // Size will be relative to siblings
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2',
            size: 200 // Size will be relative to siblings
        }
    ]
}

const splitPaneFixedSize: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    useFixedSize: true,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content3',
            header: 'Pane 3',
            size: 400 // Size will be applied in pixels
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content4',
            header: 'Pane 4',
            size: 200 // Size will be applied in pixels
        }
    ]
}

    Please note that when you dock a pane inside a split pane that has useFixedSize set to true the docked pane will then have the same width/height (depending on the split pane orientation) as the floating pane.

    Pruébelo usted mismo en el siguiente ejemplo:

    API References