Descripción general de Web Components Dock Manager

El Infragistics Web Components Dock Manager proporciona un medio para administrar el diseño de su aplicación a través de paneles, lo que permite a sus usuarios finales personalizarlo aún más anclando, cambiando el tamaño, moviendo, maximizando y ocultando paneles.

Web Components Dock Manager Example

Este ejemplo muestra la mayoría de las funcionalidades y opciones de acoplamiento del IgcDockManagerComponent que puede usar en su aplicación.

Para instalar el paquete Dock Manager ejecute el siguiente comando:

npm install --save igniteui-dockmanager

Luego es necesario importar y llamar a la función defineCustomElements():

import { defineCustomElements } from 'igniteui-dockmanager/loader';

defineCustomElements();

Usage

Una vez importado el Dock Manager, puedes agregarlo en la página:

<igc-dockmanager id="dockManager">
</igc-dockmanager>

[!Note] Since the Dock Manager component uses ShadowDOM and slots it is not supported on older browsers like Internet Explorer 11 and Edge 18 and below (non-Chromium versions).

Dock Manager tiene una propiedad layout que describe el diseño de los paneles. Para comenzar a definir un diseño, debe configurar la propiedad rootPane y agregar paneles secundarios. Así es como puede definir un diseño con un único panel de contenido:

import { IgcDockManagerPaneType, IgcSplitPaneOrientation, IgcDockManagerComponent } from 'igniteui-dockmanager';

// ...

this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent;
this.dockManager.layout = {
    rootPane: {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        panes: [
            {
                type: IgcDockManagerPaneType.contentPane,
                contentId: 'content1',
                header: 'Pane 1'
            }
        ]
    }
};

Para cargar el contenido de los paneles, Dock Manager utiliza ranuras. El atributo de ranura del elemento de contenido debe coincidir con el contentId del panel de contenido en la configuración de diseño. Se recomienda encarecidamente establecer el ancho y el alto de los elementos de contenido en 100 % para obtener una respuesta predecible cuando el usuario final cambia el tamaño de los paneles.

<igc-dockmanager id="dockManager">
    <div slot="content1" style="width: 100%; height: 100%;">Content 1</div>
</igc-dockmanager>

El Dock Manager define varios tipos de paneles:

Cada tipo de panel tiene una size propiedad. Dependiendo de la orientación del padre, el tamaño puede afectar tanto al ancho como a la altura del panel. Por defecto, el tamaño de un panel es relativo al tamaño de sus paneles hermanos y por defecto es 100. Si tienes dos paneles hermanos, donde el primero tiene el tamaño en 200 y el segundo en 100, el primero será el doble del tamaño del segundo y estos dos paneles ocuparían todo el espacio disponible. Si el tamaño absoluto de su progenitor es 900px, se dimensionará a 600px y 300px respectivamente. Si, para ciertos paneles, quieres especificar sus tamaños en píxeles, en lugar de depender de la distribución relativa de todo el espacio disponible, deberías establecer el useFixedSize del panel de división padre.

Para más información sobre esto, consulta el tema Modo de Tamaño Fijo de Paneles Divididos.

El usuario final puede realizar las siguientes acciones para personalizar el diseño en tiempo de ejecución:

Anclar/desanclar un panel
Cambiar el tamaño de un panel
Cerrar un panel
Arrastre un panel para hacerlo flotar
Mover un panel flotante
Acoplar un panel flotante
Maximizar un panel

Todo esto se refleja en la propiedad layout del Dock Manager.

Content Pane

IgcContentPane representa un panel con encabezado y contenido. Se puede alojar dentro de un panel dividido o un panel de grupo de pestañas. Así es como se define un panel de contenido:

const contentPane: IgcContentPane = {
    type: IgcDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1'
}

La propiedad header se utiliza para proporcionar un encabezado de texto para el panel de contenido. Este texto se representa en varios lugares: el encabezado del panel de contenido superior, el encabezado de la pestaña si el panel está en un grupo de pestañas y el encabezado no fijado si el panel no está fijado. Puede proporcionar un contenido de espacio personalizado para cada uno de estos lugares, respectivamente, utilizando las propiedades headerId, tabHeaderId y unpinnedHeaderId. Si alguna de estas propiedades no está establecida, se utiliza el texto header. A continuación se explica cómo proporcionar el contenido del espacio del encabezado de una pestaña:

<igc-dockmanager id="dockManager">
    <div slot="content1" style="width: 100%; height: 100%;">Content 1</div>
    <span slot="tabHeader1">Pane 1 Tab</span>
</igc-dockmanager>

const contentPane: IgcContentPane = {
    type: IgcDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1',
    tabHeaderId: 'tabHeader1'
}

Cuando se desancla un panel, aparece como un encabezado de pestaña en uno de los bordes del Dock Manager. Si el usuario final lo selecciona, su contenido aparece sobre los paneles anclados. Para desanclar un panel de contenido, establezca su propiedad isPinned en false.

const contentPane = {
    type: IgcDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1',
    isPinned: false
}

La propiedad isPinned afecta sólo a los paneles de contenido que están acoplados fuera de un host de documentos. Además, los paneles de contenido alojados en un panel flotante no se pueden desanclar.

De forma predeterminada, el destino para desanclar un panel de contenido se calcula automáticamente en función de la ubicación del panel en relación con el host del documento. Cuando se define más de un host de documentos, se utilizará el más cercano en la jerarquía principal del panel de contenido no fijado. Si no hay ningún host de documentos definido, se utiliza la ubicación predeterminada: Left. También es posible establecer el destino deseado del panel no fijado utilizando la propiedad unpinnedLocation.

Puede configurar qué operaciones de usuario final están permitidas para un panel de contenido utilizando sus propiedades allowClose, allowPinning, allowDocking y allowFloating.

Al definir un panel de contenido, puede establecer la propiedad documentOnly en verdadero para que el panel solo pueda acoplarse en un host de documentos.

Para restringir la interacción del usuario con el panel de contenido y su contenido, puede establecer la propiedad disabled en verdadero. Esto evitará todas las interacciones del usuario con el panel a menos que sea un único panel flotante. Este último se puede mover, maximizar o cerrar (según la configuración del panel para maximizar y cerrar), por lo que el usuario puede echar un vistazo a los elementos que se encuentran debajo pero no podrá interactuar con su contenido.

De forma predeterminada, cuando cierra un panel, se elimina del objeto layout. Sin embargo, en algunos casos querrá ocultar temporalmente el panel y volver a mostrarlo más tarde. Para hacerlo sin cambiar el objeto layout, puede usar la propiedad hidden del panel de contenido. Establecer la propiedad en verdadero la ocultará de la interfaz de usuario, pero permanecerá en el objeto layout. Para anular el comportamiento de cierre predeterminado, puede suscribirse al evento PaneClose de esta manera:

this.dockManager.addEventListener('paneClose', ev => {
    for (const pane of ev.detail.panes) {
        pane.hidden = true;
    }
    ev.preventDefault();
});

Split Pane

IgcSplitPane es un panel contenedor que apila todos sus panes secundarios horizontal o verticalmente según su propiedad orientation. Así es como se define un panel dividido horizontal con dos paneles de contenido secundario:

const splitPane: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1'
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2'
        }
    ]
}

El panel dividido puede contener paneles secundarios de todos los tipos de paneles, incluidos otros paneles divididos.

De forma predeterminada, si el panel dividido está vacío, no se muestra. Sin embargo, si desea cambiar ese comportamiento, puede establecer su propiedad allowEmpty en verdadero y el panel dividido se presentará en la interfaz de usuario incluso cuando no haya paneles dentro de él.

Tab Group Pane

IgcTabGroupPane muestra sus panes de contenido secundarios como pestañas de un componente de pestaña. Así es como se define un panel de grupo de pestañas con un panel de contenido para cada una de sus dos pestañas:

const tabGroupPane: IgcTabGroupPane = {
    type: IgcDockManagerPaneType.tabGroupPane,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1'
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2'
        }
    ]
}

Si no hay suficiente espacio para mostrar todos los encabezados de pestañas, el grupo de pestañas muestra el menú Más pestañas, que contiene las pestañas no visibles. Si hace clic en un elemento de pestaña en ese menú, la pestaña se selecciona y se mueve a la primera posición.

Las pestañas también se pueden reordenar sin separarlas del grupo de pestañas en el que se encuentran. Puede hacer clic en una pestaña de su elección y arrastrarla hacia la izquierda o hacia la derecha hasta la posición que desee. Si arrastra la pestaña seleccionada fuera del área de pestañas, se separará en un panel flotante.

En caso de que desee que el panel del grupo de pestañas se muestre en la interfaz de usuario cuando no tiene pestañas, puede establecer la propiedad allowEmpty en verdadero.

Document Host

IgcDocumentHost es un área de pestañas para documentos, similar a la de Visual Studio para edición de código y vista de diseño. A continuación se explica cómo definir un host de documentos con dos pestañas de documentos:

const docHost: IgcDocumentHost = {
    type: IgcDockManagerPaneType.documentHost,
    rootPane: {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        panes: [
            {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content1',
                        header: 'Grid'
                    },
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content4',
                        header: "List"
                    }
                ]
            }
        ]
    }
}

Floating Pane

El panel flotante es un panel dividido que se muestra sobre todos los demás en una ventana flotante. Las definiciones del panel flotante se almacenan en la propiedad floatingPanes del layout. A continuación se explica cómo agregar un panel flotante con un único panel de contenido en su interior:

const layout: IgcDockManagerLayout = {
    rootPane: {
        // ...
    },
    floatingPanes: [
        {
            type: IgcDockManagerPaneType.splitPane,
            orientation: IgcSplitPaneOrientation.horizontal,
            floatingLocation: { x: 80, y: 80 },
            floatingWidth: 200,
            floatingHeight: 150,
            floatingResizable: true,
            panes: [
                {
                    type: IgcDockManagerPaneType.contentPane,
                    contentId: 'content1',
                    header: 'Floating Pane 1'
                }
            ]
        }
    ]
};

Las propiedades floatingLocation, floatingWidth y floatingHeight representan dimensiones absolutas en píxeles. Tenga en cuenta que estas propiedades se aplican solo para los paneles divididos en la matriz floatingPanes.

Con floatingResizable y allowFloatingPanesResize puede establecer si se permite cambiar el tamaño de los paneles flotantes. allowFloatingPanesResize es una propiedad IgcDockManagerComponent, por lo que si el valor se establece en falso, no se puede cambiar el tamaño de ninguno de los paneles flotantes. La propiedad floatingResizable se puede aplicar por separado en cada panel dividido en la matriz floatingPanes y, si el valor de la propiedad no está establecido, el valor predeterminado es el valor de la propiedad allowFloatingPanesResize. Si la propiedad floatingResizable se establece para un panel específico, su valor tiene prioridad sobre el valor de la propiedad allowFloatingPanesResize.

Active Pane

El componente Dock Manager resalta el panel de contenido que contiene el foco y lo expone en su propiedad activePane. Puede cambiar mediante programación el panel activo configurando la propiedad. También puede escuchar los cambios de la propiedad activePane suscribiéndose al evento ActivePaneChanged:

this.dockManager.addEventListener('activePaneChanged', ev => {
    console.log(ev.detail.oldPane);
    console.log(ev.detail.newPane);
});

Docking

Al empezar a arrastrar un panel flotante, aparecerán diferentes indicadores de acoplamiento en función de la posición del panel arrastrado. Hay cuatro tipos principales de acoplamiento: acoplamiento raíz, acoplamiento de paneles, acoplamiento de host de documentos y acoplamiento de divisores.

Acoplamiento de raíz

En este tipo de acoplamiento, al arrastrar un panel, aparecerán cuatro indicadores de acoplamiento de flechas cerca de los cuatro bordes del administrador de acoplamiento. Una vez liberado, el panel arrastrado se convertirá en un hijo directo del rootPane Dock Manager. Visualmente, el panel recién acoplado se ajustará en su lugar en el borde respectivo y ocupará hasta la mitad del ancho o la altura del administrador de acoplamiento, desplazando todo el resto del contenido a la otra mitad.

Acoplamiento de paneles

Los indicadores de acoplamiento aparecerán en el centro de un panel de contenido o en un panel de grupo de pestañas al arrastrar el panel flotante sobre él. Una vez soltado, el panel arrastrado se ajustará en su lugar en cualquier lado del panel de destino o se agrupará con el panel de destino para crear un diseño con pestañas. En función de la combinación del diseño inicial y la posición de acoplamiento, la operación de acoplamiento puede provocar la creación dinámica de un nuevo panel de división o grupo de pestañas que se convertiría en el nuevo elemento primario de los paneles arrastrado y de destino.

Acoplamiento de host de documentos

Si el panel arrastrado está sobre un host de documento, aparecerán indicadores de acoplamiento adicionales que permitirán el acoplamiento en relación con el panel de destino o con todo el host del documento.

Acoplamiento de divisor

Al arrastrar un panel flotante, si el cursor del ratón está cerca de cualquier divisor, aparecerá un indicador de acoplamiento sobre él. Si el panel arrastrado está acoplado, se convertirá en un elemento secundario del panel dividido que tiene el divisor de destino. El acoplamiento del divisor se puede deshabilitar estableciendo la propiedad Dock Manager allowSplitterDock en false.

Update Layout

En algunos escenarios, es posible que necesites personalizar el diseño del Dock Manager agregando o eliminando un panel, cambiando la orientación, etc., por ejemplo:

const splitPane = this.dockManager.layout.rootPane.panes[0] as IgcSplitPane;
const contentPane = splitPane.panes[0] as IgcContentPane;
this.dockManager.removePane(contentPane);

Esto solo actualizará el objeto de diseño. Para activar una actualización del Dock Manager para que los cambios se reflejen en la interfaz de usuario, se debe reasignar el objeto de diseño:

this.dockManager.layout = { ...this.dockManager.layout };

Save/Load Layout

Para restaurar o conservar un diseño, simplemente debe obtener/establecer el valor de la propiedad layout. A continuación se explica cómo guardar el diseño como un JSON encadenado:

private savedLayout: string;

private saveLayout() {
    this.savedLayout = JSON.stringify(this.dockManager.layout);
}

private loadLayout() {
    this.dockManager.layout = JSON.parse(this.savedLayout);
}

Adding Panes At Runtime

Se pueden agregar contenidos y paneles al layout en tiempo de ejecución. En el siguiente ejemplo, puede ver cómo puede agregar contenido, documentos y paneles flotantes.

Eventos

El componente Dock Manager genera eventos cuando se realizan interacciones específicas con el usuario final, por ejemplo cerrar, fijar, redimensionar y arrastrar un panel. Puedes encontrar la lista completa de eventos de Dock Manager en este tema.

A continuación se explica cómo agregar un detector de eventos para el evento PaneClose:

this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));

Personalización

El componente Dock Manager ofrece la opción de personalizar todos los botones mediante ranuras y piezas. Para cambiar cualquiera de los botones simplemente tienes que definir tu propio elemento dentro del Dock Manager y establecer el atributo de ranura en el identificador correspondiente.

Utilicemos estas ranuras y piezas para crear un diseño personalizado de Dock Manager. Primero, proporcionaremos nuestros propios íconos, usando las ranuras closeButton, maximizeButton, minimizeButton, pinButton y unpinButton:

<igc-dockmanager id="dockManager">
    <div slot="content1" class="dockManagerContent">Content 1</div>
    <div slot="content2" class="dockManagerContent">Content 2</div>
    <div slot="content3" class="dockManagerContent">Content 3</div>
    <!-- ... -->

    <button slot="closeButton">x</button>

    <button slot="maximizeButton">
        <img src="https://www.svgrepo.com/show/419558/arrow-top-chevron-chevron-top.svg" alt="arrow-top-chevron-chevron-top" />
    </button>

    <button slot="minimizeButton">
        <img src="https://www.svgrepo.com/show/419557/bottom-chevron-chevron-down.svg" alt="bottom-chevron-chevron-down" />
    </button>

    <button slot="pinButton">
        <img src="https://www.svgrepo.com/show/154123/pin.svg" alt="pin" />
    </button>

    <button slot="unpinButton">
        <img src="https://www.svgrepo.com/show/154123/pin.svg" alt="pin" />
    </button>
</igc-dockmanager>

Luego, usaremos las partes expuestas en nuestra hoja de estilo. De esta manera tenemos control total del estilo del componente:

igc-dockmanager::part(unpinned-tab-area) {
    background: #bee9ec;
}

igc-dockmanager::part(unpinned-tab-area--left) {
    border-right: 1px dashed #004d7a;
}

igc-dockmanager::part(unpinned-tab-area--bottom) {
    border-top: 1px dashed #004d7a;
}

igc-dockmanager::part(tab-header-close-button),
igc-dockmanager::part(pane-header-close-button) {
    background-color: #e73c7e;
}

igc-dockmanager::part(pane-header-pin-button),
igc-dockmanager::part(pane-header-unpin-button) {
  background: rgb(218, 218, 218);
  border: none;
  width: 24px;
  height: 24px;
  color: #fff;
}

igc-dockmanager::part(tabs-maximize-button),
igc-dockmanager::part(tabs-minimize-button),
igc-dockmanager::part(pane-header-minimize-button),
igc-dockmanager::part(pane-header-maximize-button) {
  width: 24px;
  height: 24px;
  border: none;
  transition: opacity 250ms ease-in-out;
  opacity: 0.3;
  margin-right: 15px;
  margin-top: -5px;
  margin-left: 0px;
}

Si todo ha ido bien, ahora deberíamos tener un DockManager con iconos y área de pestañas personalizados. Echemos un vistazo:

A continuación puede encontrar una lista que contiene los nombres de las ranuras para todos los botones, así como el mango divisor:

Nombre de la ranura	Descripción
`closeButton`	Los botones de cierre.
`paneHeaderCloseButton`	Los botones de cierre de los encabezados del panel.
`tabHeaderCloseButton`	Los botones de cierre de los encabezados de las pestañas.
`moreTabsButton`	Cuantos más botones de pestañas.
`moreOptionsButton`	Los botones de más opciones.
`maximizeButton`	Los botones de maximizar.
`minimizeButton`	Los botones de minimizar.
`pinButton`	Los botones de alfiler.
`unpinButton`	Los botones para desanclar.
`splitterHandle`	El mango divisor.

Puede encontrar la parte correspondiente a cada ranura en las Partes CSS en la sección Estilo de esta página.

CSS Variables

La siguiente tabla describe todas las variables CSS utilizadas para diseñar el componente Dock-Manager:

variable CSS	Descripción
`--igc-background-color`	El color de fondo del encabezado dentro del componente del navegador del panel.
`--igc-accent-color`	El color de fondo de los botones dentro de la parte de acciones del encabezado del panel en foco.
`--igc-active-color`	El color del texto y de la sombra del cuadro utilizado para los componentes en estado activo.
`--igc-border-color`	El color inferior del borde del componente del encabezado del panel.
`--igc-font-family`	La familia de fuentes del componente Dock-Manager.
`--igc-dock-background`	El color de fondo de los componentes del administrador del muelle, de la pestaña y del panel flotante.
`--igc-dock-text`	El color del texto del administrador del muelle y de los componentes del panel flotante.
`--igc-pane-header-background`	El color de fondo del componente del encabezado del panel.
`--igc-pane-header-text`	El color del texto del componente del encabezado del panel.
`--igc-pane-content-background`	El color de fondo del contenido dentro del administrador del muelle y los componentes del panel de pestañas.
`--igc-pane-content-text`	El color del texto del contenido dentro del administrador del muelle y los componentes del panel de pestañas.
`--igc-tab-text`	El color del texto del componente del encabezado de la pestaña.
`--igc-tab-background`	El color de fondo del componente del encabezado de la pestaña.
`--igc-tab-border-color`	El color del borde del componente del encabezado de la pestaña.
`--igc-tab-text-active`	El color del texto del componente de encabezado de pestaña seleccionado.
`--igc-tab-background-active`	El color de fondo del componente de encabezado de pestaña seleccionado.
`--igc-tab-border-color-active`	El color del borde del componente de encabezado de pestaña seleccionado.
`--igc-pinned-header-background`	El color de fondo del componente de encabezado del panel no fijado.
`--igc-pinned-header-text`	El color del texto del componente de encabezado del panel no fijado.
`--igc-splitter-background`	El color de fondo del componente divisor.
`--igc-splitter-handle`	El color de fondo del controlador divisor.
`--igc-button-text`	El color de los botones dentro de la parte de acciones del encabezado del panel.
`--igc-flyout-shadow-color`	El color de la sombra del cuadro del componente del panel de contenido.
`--igc-joystick-background`	El color de fondo del joystick y los componentes del indicador de acoplamiento raíz.
`--igc-joystick-border-color`	El color del borde del joystick y los componentes del indicador de acoplamiento de raíz.
`--igc-joystick-icon-color`	El color del icono del joystick y los componentes del indicador de acoplamiento raíz.
`--igc-joystick-background-active`	El color de fondo al pasar el cursor sobre el joystick y los componentes del indicador de acoplamiento raíz.
`--igc-joystick-icon-color-active`	El color del icono de desplazamiento del joystick y los componentes del indicador de acoplamiento raíz.
`--igc-floating-pane-border-color`	El color del borde de los paneles flotantes.
`--igc-context-menu-background`	El color de fondo de los elementos del menú contextual.
`--igc-context-menu-background-active`	El color de fondo de los elementos del menú contextual al pasar el cursor y enfocar.
`--igc-context-menu-color`	El color del texto de los elementos del menú contextual.
`--igc-context-menu-color-active`	El color del texto de los elementos del menú contextual al pasar el cursor y enfocar.
`--igc-drop-shadow-background`	El color de fondo de la sombra paralela.
`--igc-disabled-color`	El color del texto de los componentes en estado deshabilitado.

La navegación con el teclado mejora la accesibilidad del Dock Manager y proporciona una rica variedad de interacciones para el usuario final, como navegar a través de todos los paneles, dividir la vista en múltiples direcciones acoplando el panel activo, etc.

Los atajos son los siguientes:

Docking

CMD/CTRL + SHIFT + ↑ Muelles a la cima mundial
CMD/CTRL + SHIFT + ↓ Atraca al fondo global
CMD/CTRL + SHIFT + → Atraca a la derecha global
CMD/CTRL + SHIFT + ← Se acopla a la izquierda global
SHIFT + ↑ Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada arriba
SHIFT + ↓ Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a continuación
SHIFT + → Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a la derecha
SHIFT + ← Con varias pestañas en un grupo de pestañas, divide la vista y acopla la pestaña enfocada a la izquierda

Navigating

CMD/CTRL + F6 o CMD/CTRL + → Enfoca la siguiente pestaña en el host del documento
CMD/CTRL + SHIFT + F6 CMD/CTRL o+ ← Enfoca la pestaña anterior en el host del documento
ALT + F6 Enfoca el siguiente panel de contenido
ALT + SHIFT + F6 Enfoca el panel de contenido anterior

Pane Navigator

Los siguientes atajos de teclado muestran un navegador desde el cual puede recorrer paneles y documentos.

CMD/CTRL + F7 o CMD/CTRL + F8 Comienza desde el primer documento en adelante
ALT + F7 o ALT + F8 Comienza desde el primer panel en adelante
CMD/CTRL + SHIFT +o CMD/CTRL F7 + SHIFT + F8 Comienza desde el último documento hacia atrás
ALT + SHIFT +o ALT F7 + SHIFT + F8 Comienza desde el último panel hacia atrás

Other

ALT + F3 Cierra el panel activo

Practique todas las acciones mencionadas anteriormente en la demostración de muestra.

Styling

Dock Manager utiliza un DOM oculto para encapsular sus estilos y comportamientos. Como resultado, no puedes simplemente apuntar a sus elementos internos con los selectores CSS habituales. Es por eso que exponemos partes de componentes a las que se puede apuntar con el selector CSS::part.

igc-dockmanager::part(content-pane) {
  border-radius: 10px;
}

En el siguiente ejemplo, demostramos la capacidad de personalizar Dock Manager a través de algunas de las partes CSS que hemos expuesto.

CSS Parts

Nombre de la pieza	Descripción
`content-pane`	El componente del panel de contenido.
`pane-header`	El componente de encabezado del panel de contenido.
`pane-header-content`	El área de contenido del encabezado del panel de contenido.
`pane-header-actions`	El área de acciones del encabezado del panel de contenido.
`active`	Indica un estado activo. Se aplica a`pane-header`,`pane-header-content`,`pane-header-actions`,`tab-header`.
`floating`	Indica una ubicación de panel flotante. Se aplica a`pane-header`,`pane-header-content`,`pane-header-actions`.
`window`	Indica una ubicación de ventana flotante. Se aplica a`pane-header`,`pane-header-content`,`pane-header-actions`.
`split-pane`	El componente de panel dividido.
`splitter`	El componente divisor de cambio de tamaño.
`splitter-base`	El elemento base del componente divisor.
`splitter-ghost`	El elemento fantasma del componente divisor.
`unpinned-pane-header`	El componente de encabezado del panel no fijado.
`tab-header`	El componente de encabezado de pestaña.
`tab-header-more-options-button`	El botón de más opciones en el encabezado de la pestaña.
`tab-header-close-button`	El botón de cerrar en el encabezado de la pestaña.
`selected`	Indica un estado seleccionado. Se aplica a`tab-header` y`tab-header-close-button`.
`hovered`	Indica un estado suspendido. Se aplica a`tab-header-close-button`.
`header-title`	El título de texto del encabezado de la pestaña.
`tab-strip-area`	El área de la tira de pestañas que contiene los encabezados de las pestañas.
`tab-strip-actions`	El área de la barra de pestañas que contiene las acciones de la pestaña.
`top`	Indica una posición de pestañas superiores. Se aplica a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`bottom`	Indica la posición de las pestañas inferiores. Se aplica a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`context-menu`	El componente del menú contextual.
`context-menu-item`	Un elemento en el componente del menú contextual.
`docking-preview`	El área de vista previa del acoplamiento.
`docking-indicator`	El indicador de acoplamiento no raíz.
`root-docking-indicator`	El indicador de acoplamiento de raíz.
`splitter-docking-indicator`	El indicador de acoplamiento del divisor.
`pane-navigator`	El componente del navegador de panel.
`pane-navigator-header`	El área del encabezado del navegador del panel.
`pane-navigator-body`	El área del cuerpo del navegador de panel.
`pane-navigator-items-group`	Un grupo de elementos en el componente del navegador de panel.
`pane-navigator-items-group-title`	El elemento de título de un grupo de elementos en el navegador del panel.
`pane-navigator-item`	Un elemento en el navegador del panel.
`pane-header-close-button`	El botón de cerrar en el encabezado del panel.
`pane-header-maximize-button`	El botón maximizar en el encabezado del panel.
`pane-header-minimize-button`	El botón minimizar en el encabezado del panel.
`pane-header-pin-button`	El botón de anclar en el encabezado del panel.
`pane-header-unpin-button`	El botón para desanclar en el encabezado del panel.
`tabs-maximize-button`	El botón de maximizar las pestañas.
`tabs-minimize-button`	Las pestañas minimizan el botón.
`tabs-more-button`	El botón de más pestañas.
`context-menu-unpin-button`	El botón desanclar en el menú contextual.
`context-menu-close-button`	El botón de cerrar en el menú contextual.
`splitter-handle`	El mango divisor.
`horizontal`	Indica una posición horizontal. Se aplica a`splitter-handle`.
`vertical`	Indica una posición vertical. Se aplica a`splitter-handle`.

Themes

El Dock Manager viene con un tema claro y otro oscuro. El tema claro es el predeterminado. Para cambiarlo a oscuro, solo necesita importar el archivo igc.themes.css en su CSS y agregar la clase de tema oscuro al Dock Manager o cualquiera de sus padres:

@import '~igniteui-dockmanager/dist/collection/styles/igc.themes';

<igc-dockmanager class="dark-theme">

Localización

El componente Dock Manager permite localizar las cadenas utilizadas en los menús contextuales, las descripciones emergentes y los atributos de arias. Por defecto, el Dock Manager detecta el idioma de la página buscando un atributo lang en cualquiera de sus padres. Si el atributo lang no está establecido o se asigna a un valor que el Dock Manager no soporta, el idioma por defecto utilizado es el inglés (en). El Dock Manager proporciona cadenas localizadas integradas para los siguientes idiomas: inglés (en), japonés (jp), coreano (ko) y español (es).

Para proporcionar cadenas de recursos para cualquier otro lenguaje, utilice el método addResourceStrings:

import { addResourceStrings } from 'igniteui-dockmanager';

const dockManagerStringsFr: IgcDockManagerResourceStrings = {
  close: 'Fermer',
  // ...
};

addResourceStrings('fr', dockManagerStringsFr);

Dock Manager expone la propiedad resourceStrings que le permite modificar las cadenas. Si configura la propiedad resourceStrings, Dock Manager usará sus cadenas sin importar el atributo de idioma establecido.

Descripción general de Web Components Dock Manager

Web Components Dock Manager Example

Usage

Content Pane

Split Pane

Tab Group Pane

Document Host

Floating Pane

Active Pane

Docking

Acoplamiento de raíz

Acoplamiento de paneles

Acoplamiento de host de documentos

Acoplamiento de divisor

Update Layout

Save/Load Layout

Adding Panes At Runtime

Eventos

Personalización

CSS Variables

Keyboard Navigation

Docking

Navigating

Pane Navigator

Other

Styling

CSS Parts

Themes

Localización

API References