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

    En este modo, los indicadores del joystick están ocultos y el acoplamiento puede realizarse arrastrando un panel cerca del borde de otro pantalón. Al arrastrar un panel, cuando el cursor del ratón llega al área correspondiente a la posición de la base, se muestra una vista previa de la base de la muestra. Al subir el ratón, el panel arrastrado está acoplado en la ubicación previsualizada. Para habilitar el acoplamiento de proximidad, simplemente pon laproximityDock propiedad en 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

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

    this.dockManager.focusPane('content1');

    Al usar elfocusPane método, el comportamiento varía según el estado del panel objetivo. Así es como funciona:

    1. Paneles flotantes: Si el panel está flotando, invocarfocusPane lo enfocará, lo configurará como el paneles activos y asegúrate de que aparezca encima de cualquier otro panel flotante.

    2. Paneles sin fijación: Cuando el panel objetivo se desclava,focusPane el panel se desplegará a su estado abierto.

    3. Paneles con alfileres normales: Para los paneles con alfileres normales,focusPane se configura el panel como elactivePane.

    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 lashowPaneHeaders propiedad del DockManager, los desarrolladores ahora tienen la flexibilidad de controlar la visibilidad de los encabezados de panel dentro de lalayout. Por defecto,showPaneHeaders está configurado paraalways asegurar que los encabezados de panel estén siempre visibles. Cuando se configura en síonHoverOnly, todos los encabezados de panel estarán ocultos hasta que pases el ratón por el borde superior de un panel de contenido. El encabezado de panel correspondiente aparecerá y se ocultará suavemente cuando el ratón se aleje. Echa un vistazo al ejemplo que aparece a continuación:

    Control Inner Docking

    Por defecto, el Dock Manager permite a los usuarios arrastrar y acoplar paneles sin esfuerzo uno dentro del otro, creando pestañas. Para proporcionar mayor control sobre esta funcionalidad, hemos introducido dos propiedades -allowInnerDockyacceptsInnerDock.

    Al establecer laacceptsInnerDock propiedad de anIgcContentPane, los desarrolladores pueden controlar el acoplamiento dentro de paneles de contenido específicos. Cuando esta propiedad se configura como falsa, los usuarios estarán restringidos para realizar el acoplamiento interno en el panel especificado.

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

    Si quieres desactivar el acoplamiento interno en todo el DockManager, simplemente ponloallowInnerDock en false. Esta propiedad determina si el usuario final puede acceder a los paneles internos del acoplamiento.

    this.dockManager.allowInnerDock = false;

    Control Pane Dragging

    Con lacontainedInBoundaries propiedad, los promotores pueden controlar si los lados de los paneles flotantes están siempre contenidos dentro del DockManager. Cuando se configura en true, el arrastre de paneles se detendrá cuando cualquiera de los lados intente avanzar más allá de los límites del DockManager.

    Pruébelo en el siguiente ejemplo:

    Highlight Resizing Panes

    When users resize panes by dragging a splitter, it is not always obvious which panes are affected, especially in more complex layouts. To make this interaction clearer, the Dock Manager can draw a border around the panes that are currently being resized. This visual cue helps users immediately understand which parts of the layout will grow or shrink as they move the splitter.

    You can enable and style this behavior by configuring the following CSS custom properties on the Dock Manager host element (or a parent element):

    • --igc-resize-target-border-color – controls the color of the resize target border.
    • --igc-resize-target-border-width – controls the thickness of the border (for example, 2px).
    • --igc-resize-target-border-style – controls the border style (for example, solid, dashed).
    igc-dockmanager {
    --igc-resize-target-border-color: #0078d4;
    --igc-resize-target-border-width: 2px;
    --igc-resize-target-border-style: solid;
}

    Once these variables are set, any pane that is impacted by a splitter drag will be wrapped with the configured border for the duration of the resize operation, giving users clear, immediate feedback about which panes are being adjusted.

    Split Panes Fixed Size Mode

    By default, each pane in a split layout receives a relative size compared to its siblings and that size defaults to 100. For example, if you have two sibling panes where the first pane has its size set to 400 and the second one to 200, the first will be twice the size of the second and together they will fill all the available space.

    If, for certain panes, you want explicit pixel-based sizing instead of relative sizing, you can turn on fixed size mode by setting the useFixedSize property of the parent split pane to true. When this property is enabled, all children are sized in pixels based on their size property. In the previous example, the first pane will span 400 pixels and the second pane 200 pixels. Resizing via the splitter changes only the size of the pane you are interacting with, without redistributing space across its siblings.

    As soon as the sum of the child panes' sizes exceeds the available size of the parent, the split pane becomes scrollable. The dock manager now also provides built-in autoscrolling to keep the user focused on their content:

    • When users drag panes toward the edges of a fixed-size root pane, the container scrolls in the direction of the drag so they can easily reach off-screen areas.
    • When users resize panes via the splitter, the container scrolls as needed to reveal newly expanded content.

    For a horizontal split pane, autoscrolling happens to the left or right; for a vertical split pane, it happens to the top or bottom, depending on the direction of the drag or resize.

    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
        }
    ]
}

    Ten en cuenta que cuando acoplas un panel dentro de un panel dividido que estáuseFixedSize configurado como verdadero, el panel acoplado tendrá el mismo ancho/altura (dependiendo de la orientación del panel dividido) que el panel flotante.

    Pruébelo usted mismo en el siguiente ejemplo:

    API References