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 opcionesIgcDockManagerComponent de acoplamiento que puedes usar en tu 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).

El Dock Manager tiene unalayout propiedad que describe la disposición de los paneles. Para empezar a definir una disposición, deberías establecer larootPane propiedad y añadir paneles hijos. Así es como puedes definir un diseño con un solo 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, el Dock Manager utiliza ranuras. El atributo de ranura del elemento de contenido debe coincidir con elcontentId del panel de contenido en la configuración de diseño. Se recomienda encarecidamente ajustar el ancho y la altura de los elementos de contenido al 100% para una respuesta predecible cuando el usuario final redimensiona 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 unasize 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 eluseFixedSize 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

Todos estos factores se reflejan en lalayout propiedad del Gestor de Muelles.

Content Pane

ElIgcContentPane representa un panel con encabezado y contenido. Puede alojarse dentro de un Panel Dividido o de un Panel de Pestañas. Así es como se define un panel de contenido:

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

Laheader propiedad se utiliza para proporcionar un encabezado de texto para el panel de contenido. Este texto se muestra en varios lugares: la cabecera del panel de contenido superior, la cabecera de tabulación si el panel está en un grupo de tabulaciones y la cabecera sin fijar si el panel está desanclado. Puedes proporcionar un contenido de tragaperras personalizado para cada uno de estos lugares usando lasheaderIdtabHeaderId propiedades yunpinnedHeaderId respectivamente. Si alguna de estas propiedades no está fijada, se utiliza elheader texto. Así es como se puede proporcionar el contenido de una ranura para encabezado de 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 un panel se desbloquea, aparece como una cabecera de tabulación en uno de los bordes del Dock Manager. Si el usuario final lo selecciona, su contenido aparece sobre los paneles fijados acoplados. Para desfijar un panel de contenido, pon suisPinned propiedad en false.

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

LaisPinned propiedad afecta solo a 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 pueden ser desfijados.

Por defecto, el destino de desenganchar para un panel de contenido se calcula automáticamente en función de la ubicación del panel respecto al anfitrión 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 sin fijar. Si no hay un host de documento definido, se utiliza la ubicación predeterminada -Left. También es posible establecer el destino deseado del panel sin fijar usando launpinnedLocation propiedad.

Puedes configurar qué operaciones de usuario final están permitidas para un panel de contenido usando susallowCloseallowPinningallowDocking propiedades yallowFloating de usuario.

Al definir un panel de contenido, puedes poner ladocumentOnly propiedad en true 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, puedes poner ladisabled propiedad en true. Esto evitará todas las interacciones del usuario con el panel a menos que sea un único panel flotante. Estos últimos podrían moverse, maximizarse o cerrarse (según la configuración del panel para maximizar y cerrar), de modo que el usuario puede ver los elementos que hay debajo pero no podrá interactuar con su contenido.

Por defecto, cuando cierras un panel, se elimina dellayout objeto. Sin embargo, en algunos casos querrías ocultar temporalmente el panel y mostrarlo más tarde. Para hacer eso sin cambiar ellayout objeto puedes usar lahidden propiedad del panel de contenido. Poner la propiedad en true la ocultará a la interfaz, pero permanecerá en ellayout objeto. Para anular el comportamiento de cierre por defecto, puedes suscribirte alPaneClose evento así:

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

Split Pane

EsIgcSplitPane un panel contenedor que apila todo su hijopanes horizontal o verticalmente según suorientation propiedad. Así es como se define un panel horizontal dividido con dos paneles de contenido hijos:

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.

Por defecto, si el panel dividido está vacío, no se muestra. Sin embargo, si quieres cambiar ese comportamiento, puedes poner suallowEmpty propiedad en true y el panel dividido se mostrará en la interfaz incluso cuando no haya paneles dentro.

Tab Group Pane

MuestraIgcTabGroupPane su contenidopanes hijo como las pestañas de un componente de pestañas. 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 quieras que el panel de grupo de pestañas se muestre en la interfaz cuando no tenga pestañas, puedes poner laallowEmpty propiedad en true.

Document Host

EsIgcDocumentHost un área de pestañas para documentos, similar a la de Visual Studio para edición de código y vista de diseño. Así es como definir un host de documentos con dos pestañas de documento:

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 representado por encima de todos los demás en una ventana flotante. Las definiciones de panel flotante se almacenan en lafloatingPanes propiedad de lalayout. Así es como añadir un panel flotante con un único panel de contenido dentro:

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

LasfloatingLocation propiedades yfloatingWidthfloatingHeight representan dimensiones absolutas en píxeles. Ten en cuenta que estas propiedades se aplican solo a los paneles divididos en elfloatingPanes array.

Con yfloatingResizableallowFloatingPanesResize puedes establecer si se permite redimensionar paneles flotantes. EsallowFloatingPanesResize una propiedad IgcDockManagerComponent, así que si el valor está configurado como falso, ninguno de los paneles flotantes puede redimensionarse. LafloatingResizable propiedad puede aplicarse por separado en cada panel dividido delfloatingPanes array y, si el valor de la propiedad no está fijado, por defecto se asigna al valor de laallowFloatingPanesResize propiedad. Si lafloatingResizable propiedad está asignada a un panel específico, su valor tiene prioridad sobre el valor de laallowFloatingPanesResize propiedad.

Active Pane

El componente Dock Manager resalta el panel de contenido que contiene el foco y lo expone en suactivePane propiedad. Puedes cambiar programáticamente el panel activo configurando la propiedad. También puedes escuchar los cambios de laactivePane propiedad suscribiéndote alActivePaneChanged evento:

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 mientras arrastras un panel, aparecerán cuatro indicadores de flecha cerca de los cuatro bordes del gestor de muelles. Una vez liberado, el panel arrastrado pasará a ser un hijo directo del GerenterootPane del Muelle. Visualmente, el panel recién acoplado encajará en su lugar en el borde correspondiente y ocupará hasta la mitad del ancho o altura del dock manager, 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

Mientras arrastras 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 hijo del panel dividido que tiene el divisor objetivo. El acoplamiento del divisor puede desactivarse configurando la propiedad del GestorallowSplitterDock de Docks 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 mantener un diseño, simplemente tienes que obtener o establecer el valor de lalayout propiedad. Así es como guardar el diseño como un JSON con estrictos:

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 añadir contenidos y paneles alayout la ejecución en tiempo. En el ejemplo siguiente, puedes ver cómo puedes añadir contenido, documento 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.

Así es como añadir un oyente para elPaneClose evento:

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 del Dock Manager. Primero, proporcionaremos nuestros propios iconos, usando lascloseButtonmaximizeButtonminimizeButtonpinButton ranuras yunpinButton slot:

<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);

El Dock Manager exponeresourceStrings propiedades que te permiten modificar las cadenas. Si configuras laresourceStrings propiedad, el Dock Manager usará tus cadenas sin importar el atributo lang que tengas 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