Visão geral Web Components Dock Manager

O Dock Manager Infragistics Web Components fornece um meio de gerenciar o layout do seu aplicativo por meio de painéis, permitindo que seus usuários finais o personalizem ainda mais fixando, redimensionando, movendo, maximizando e ocultando painéis.

Web Components Dock Manager Example

Este exemplo mostra a maioria das funcionalidades e opçõesIgcDockManagerComponent de docking que você pode usar na sua aplicação.

Para instalar o pacote Dock Manager, execute o seguinte comando:

npm install --save igniteui-dockmanager

Então é necessário importar e chamar a função defineCustomElements():

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

defineCustomElements();

Usage

Depois que o Dock Manager for importado, você pode adicioná-lo à 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).

O Dock Manager possui umalayout propriedade que descreve o layout dos painéis. Para começar a definir um layout, você deve definir arootPane propriedade e adicionar painéis filhos. Veja como você pode definir um layout com um único painel de conteúdo:

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 carregar o conteúdo dos painéis, o Dock Manager usa slots. O atributo slot do elemento de conteúdo deve corresponder aocontentId do painel de conteúdo na configuração de layout. É altamente recomendado definir a largura e a altura dos elementos de conteúdo para 100% para resposta previsível quando o usuário final estiver redimensionando os painéis.

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

O Dock Manager define vários tipos de painéis:

Cada tipo de vidro tem umasize propriedade. Dependendo da orientação dos pais, o tamanho pode afetar tanto a largura quanto a altura do painel. Por padrão, o tamanho de um painel é relativo ao tamanho de seus painéis irmãos e por padrão é 100. Se você tem dois painéis irmãos, onde o primeiro tem tamanho definido para 200 e o segundo - tamanho para 100, o primeiro será o dobro do tamanho do segundo e esses dois painéis ocupariam todo o espaço disponível. Se o tamanho absoluto do pai deles for 900px, eles serão dimensionados para 600px e 300px, respectivamente. Se, para certos painéis, você quiser especificar seus tamanhos em pixels, em vez de depender da distribuição relativa de todo o espaço disponível, você deve definir ouseFixedSize do painel de divisão pai.

Para mais informações sobre isso, consulte o tópico Modo de Tamanho Fixo de Painéis Divididos.

O usuário final pode executar as seguintes ações para personalizar o layout em tempo de execução:

Fixar/desfixar um painel
Redimensionar um painel
Fechar um painel
Arraste um painel para fazê-lo flutuar
Mover um painel flutuante
Encaixe um painel flutuante
Maximizar um painel

Todos esses fatores estão refletidos nalayout propriedade do Gerente do Cais.

Content Pane

OIgcContentPane representa um painel com cabeçalho e conteúdo. Ele pode ser hospedado dentro de um Painel Dividido ou de um Painel de Aba. Veja como um painel de conteúdo é definido:

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

Aheader propriedade é usada para fornecer um cabeçalho de texto para o painel de conteúdo. Esse texto é renderizado em vários lugares: o cabeçalho do painel de conteúdo superior, o cabeçalho tab se o painel estiver em um grupo tab e o cabeçalho sem fixação se o painel estiver desfixado. Você pode fornecer um conteúdo personalizado para cada um desses lugares, respectivamente, usando asheaderIdtabHeaderId propriedades eunpinnedHeaderId. Se alguma dessas propriedades não estiver definida, oheader texto é usado. Veja como fornecer o conteúdo de um slot de cabeçalho de aba:

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

Quando um painel é desfixado, ele aparece como um cabeçalho tab em uma das bordas do Dock Manager. Se o usuário final o selecionar, seu conteúdo aparece sobre os painéis fixados no dock. Para desfixar um painel de conteúdo, defina suaisPinned propriedade como false.

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

AisPinned propriedade afeta apenas painéis de conteúdo que estão acoplados fora de um host de documentos. Além disso, painéis de conteúdo hospedados em um painel flutuante não podem ser desfixados.

Por padrão, o destino de desfixação de um painel de conteúdo é calculado automaticamente com base na localização do painel em relação ao host do documento. Quando mais de um host de documento é definido, o mais próximo na hierarquia pai do painel de conteúdo não fixado será usado. Se não houver um host de documento definido, a localização padrão é usada -Left. Também é possível definir o destino desejado do painel sem fixação usando aunpinnedLocation propriedade.

Você pode configurar quais operações do usuário final são permitidas para um painel de conteúdo usando suasallowCloseallowPinningallowDocking propriedades e .allowFloating

Ao definir um painel de conteúdo, você pode definir adocumentOnly propriedade como true para que o painel só possa ser acoplado em um host de documento.

Para restringir a interação do usuário com o painel de conteúdo e seu conteúdo, você pode definir adisabled propriedade como true. Isso impedirá todas as interações do usuário com o painel, a menos que seja um único painel flutuante. Estes últimos podem ser movidos, maximizados ou fechados (de acordo com as configurações do painel para maximizar e fechar), de modo que o usuário pode ver os elementos abaixo, mas não poderá interagir com seu conteúdo.

Por padrão, quando você fecha um painel, ele é removido dolayout objeto. No entanto, em alguns casos, você gostaria de esconder temporariamente o painel e mostrá-lo novamente depois. Para fazer isso sem mudar olayout objeto, você pode usar ahidden propriedade do painel de conteúdo. Definir a propriedade como true vai escondê-la da interface, mas ela permanecerá nolayout objeto. Para sobrescrever o comportamento padrão de fechamento, você pode assinar oPaneClose evento assim:

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

Split Pane

ÉIgcSplitPane um painel de contêiner que empilha todo o seu filhopanes horizontal ou verticalmente de acordo com suaorientation propriedade. Veja como um painel horizontal dividido com dois painéis de conteúdo filhos é definido:

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

O painel dividido pode conter painéis filho de todos os tipos de painéis, incluindo outros painéis divididos.

Por padrão, se o painel dividido estiver vazio, ele não é exibido. Ainda assim, se quiser mudar esse comportamento, pode definir aallowEmpty propriedade para true e o painel dividido será apresentado na interface mesmo quando não houver painéis dentro dele.

Tab Group Pane

EleIgcTabGroupPane exibe seu conteúdopanes filho como as abas de um componente de tabulação. Aqui está como um painel de grupo de abas com um painel de conteúdo para cada uma de suas duas abas é definido:

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

Se não houver espaço suficiente para exibir todos os cabeçalhos de guia, o grupo de guias mostra o menu Mais guias, que contém as guias não visíveis. Se você clicar em um item de guia nesse menu, a guia será selecionada e movida para a primeira posição.

As abas também podem ser reordenadas sem serem destacadas do grupo de abas em que estão localizadas. Você pode clicar em uma aba de sua escolha e arrastá-la para a esquerda ou direita para a posição que você quer que ela fique. Se você arrastar a aba selecionada para fora da área de abas, ela será destacada em um painel flutuante.

Caso você queira que o painel do grupo de abas seja exibido na interface quando ele não tem abas deles, você pode definir aallowEmpty propriedade como true.

Document Host

ÉIgcDocumentHost uma área de abas para documentos, semelhante à do Visual Studio para edição de código e visualização de design. Aqui está como definir um host de documentos com duas abas 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

O painel flutuante é um painel dividido renderizado acima de todos os outros em uma janela flutuante. As definições de painéis flutuantes são armazenadas nafloatingPanes propriedade de olayout. Aqui está como adicionar um painel flutuante com um único painel de conteúdo 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'
                }
            ]
        }
    ]
};

AsfloatingLocationfloatingWidth propriedades efloatingHeight representam dimensões absolutas em pixels. Por favor, note que essas propriedades são aplicadas apenas aos split panes nofloatingPanes array.

Com ofloatingResizable eallowFloatingPanesResize você pode definir se redimensionar painéis flutuantes é permitido. ÉallowFloatingPanesResize uma propriedade IgcDockManagerComponent, então se o valor for definido como falso, nenhum dos painéis flutuantes pode ser redimensionado. AfloatingResizable propriedade pode ser aplicada separadamente em cada painel dividido dofloatingPanes array e, se o valor da propriedade não estiver definido, ela passa a ser o valor daallowFloatingPanesResize propriedade. Se afloatingResizable propriedade for definida para um painel específico, seu valor tem precedência sobre oallowFloatingPanesResize valor da propriedade.

Active Pane

O componente Dock Manager destaca o painel de conteúdo que contém o foco e o expõe em suaactivePane propriedade. Você pode mudar programaticamente o painel ativo definindo a propriedade. Você também pode ouvir as mudanças daactivePane propriedade assinando oActivePaneChanged evento:

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

Docking

Quando você começa a arrastar um painel flutuante, diferentes indicadores de encaixe serão exibidos, dependendo da posição do painel arrastado. Existem quatro tipos principais de encaixe - encaixe raiz, encaixe de painel, encaixe de host de documento e encaixe de divisor.

Encaixe raiz

Nesse tipo de acoplamento, enquanto se arrasta um painel, quatro indicadores de acoplamento em seta aparecerão próximos às quatro bordas do gerenciador de doca. Uma vez liberado, o painel arrastado se tornará filho direto do GerenterootPane do Cais. Visualmente, o painel recém-acoplado encaixa na borda respectiva e ocupa até metade da largura ou altura do dock manager, transferindo todo o restante conteúdo para a outra metade.

Encaixe de painel

Os indicadores de encaixe aparecerão no centro de um painel de conteúdo ou de um painel de grupo de guias ao arrastar o painel flutuante sobre ele. Uma vez liberado, o painel arrastado se encaixará no lugar em qualquer lado do painel de destino ou será agrupado com o painel de destino para criar um layout com guias. Com base na combinação do layout inicial e da posição de encaixe, a operação de encaixe pode causar a criação dinâmica de um novo painel de divisão ou grupo de guias que se tornaria o novo pai dos painéis arrastado e de destino.

Encaixe do Host do Documento

Se o painel arrastado estiver sobre um host de documento, aparecerão indicadores de encaixe adicionais que permitirão o encaixe em relação ao painel de destino ou a todo o host do documento.

Acoplamento do divisor

Ao arrastar um painel flutuante, se o cursor do mouse estiver próximo a qualquer divisor, um indicador de acoplamento aparecerá sobre ele. Se o painel arrastado for acoplado, ele se tornará filho do painel dividido que tem o divisor direcionado. O docking do divisor pode ser desativado configurando a propriedade DockallowSplitterDock Manager como falso.

Update Layout

Em alguns cenários, pode ser necessário personalizar o layout do Dock Manager adicionando ou removendo um painel, alterando a orientação, etc., por exemplo:

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

Isso atualizará apenas o objeto de layout. Para disparar uma atualização do Dock Manager para que as alterações sejam refletidas na UI, o objeto de layout deve ser reatribuído:

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

Save/Load Layout

Para restaurar ou manter um layout, você só precisa obter ou definir o valor dolayout imóvel. Aqui está como salvar o layout como um JSON stringed:

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

Conteúdos e painéis podem ser adicionados aolayout tempo de execução. No exemplo abaixo, você pode ver como adicionar conteúdo, documento e painéis flutuantes.

Eventos

O componente Dock Manager gera eventos quando interações específicas do usuário final são realizadas, por exemplo, fechando, fixando, redimensionando e arrastando um painel. Você pode encontrar a lista completa de eventos do Dock Manager neste tópico.

Veja como adicionar um ouvinte para oPaneClose evento:

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

Personalização

O componente Dock Manager fornece a opção de personalizar todos os botões usando slots e peças. Para alterar qualquer um dos botões, você simplesmente precisa definir seu próprio elemento dentro do Dock Manager e definir o atributo slot para o identificador correspondente.

Vamos usar esses slots e peças para criar um layout personalizado do Dock Manager. Primeiro, vamos fornecer nossos próprios ícones, usando oscloseButton slots:maximizeButtonminimizeButtonpinButtonunpinButton

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

Então, usaremos as partes expostas em nossa folha de estilo. Dessa forma, temos controle total do estilo do 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;
}

Se tudo correu bem, agora devemos ter um DockManager com ícones e área de abas personalizados. Vamos dar uma olhada:

Abaixo você pode encontrar uma lista contendo os nomes dos slots para todos os botões, bem como a alça divisora:

Nome do slot	Descrição
`closeButton`	Os botões de fechar.
`paneHeaderCloseButton`	Os botões de fechar dos cabeçalhos do painel.
`tabHeaderCloseButton`	Os botões de fechar dos cabeçalhos das guias.
`moreTabsButton`	Quanto mais botões de abas.
`moreOptionsButton`	Quanto mais botões de opções.
`maximizeButton`	Os botões de maximizar.
`minimizeButton`	Os botões de minimizar.
`pinButton`	Os botões de alfinetes.
`unpinButton`	Os botões de desafixar.
`splitterHandle`	A alça divisora.

Você pode encontrar a parte correspondente de cada slot nas Partes CSS na seção Estilo desta página.

CSS Variables

A tabela a seguir descreve todas as variáveis CSS usadas para estilizar o componente dock-manager:

Variável CSS	Descrição
`--igc-background-color`	A cor de fundo do cabeçalho dentro do componente do navegador do painel.
`--igc-accent-color`	A cor de fundo dos botões dentro da parte de ações do cabeçalho do painel em foco.
`--igc-active-color`	A cor do texto e da sombra da caixa usada para os componentes no estado ativo.
`--igc-border-color`	A cor inferior da borda do componente de cabeçalho do painel.
`--igc-font-family`	A família de fontes do componente dock-manager.
`--igc-dock-background`	A cor de fundo dos componentes do gerenciador de dock, guia e painel flutuante.
`--igc-dock-text`	A cor do texto do gerenciador de docks e dos componentes do painel flutuante.
`--igc-pane-header-background`	A cor de fundo do componente de cabeçalho do painel.
`--igc-pane-header-text`	A cor do texto do componente de cabeçalho do painel.
`--igc-pane-content-background`	A cor de fundo do conteúdo dentro dos componentes do gerenciador de docks e do painel de guias.
`--igc-pane-content-text`	A cor do texto do conteúdo dentro dos componentes do gerenciador de dock e do painel de guias.
`--igc-tab-text`	A cor do texto do componente de cabeçalho da guia.
`--igc-tab-background`	A cor de fundo do componente do cabeçalho da guia.
`--igc-tab-border-color`	A cor da borda do componente do cabeçalho da guia.
`--igc-tab-text-active`	A cor do texto do componente de cabeçalho da guia selecionada.
`--igc-tab-background-active`	A cor de fundo do componente de cabeçalho da guia selecionada.
`--igc-tab-border-color-active`	A cor da borda do componente de cabeçalho da guia selecionada.
`--igc-pinned-header-background`	A cor de fundo do componente de cabeçalho do painel não fixado.
`--igc-pinned-header-text`	A cor do texto do componente de cabeçalho do painel não fixado.
`--igc-splitter-background`	A cor de fundo do componente divisor.
`--igc-splitter-handle`	A cor de fundo da alça do divisor.
`--igc-button-text`	A cor dos botões dentro da parte de ações do cabeçalho do painel.
`--igc-flyout-shadow-color`	A cor da sombra da caixa do componente do painel de conteúdo.
`--igc-joystick-background`	A cor de fundo do joystick e dos componentes do indicador de encaixe raiz.
`--igc-joystick-border-color`	A cor da borda do joystick e dos componentes do indicador de encaixe raiz.
`--igc-joystick-icon-color`	A cor do ícone do joystick e os componentes do indicador de encaixe raiz.
`--igc-joystick-background-active`	A cor de fundo do hover do joystick e os componentes do indicador de encaixe raiz.
`--igc-joystick-icon-color-active`	A cor do ícone de foco do joystick e os componentes do indicador de encaixe raiz.
`--igc-floating-pane-border-color`	A cor da borda dos painéis flutuantes.
`--igc-context-menu-background`	A cor de fundo dos itens do menu de contexto.
`--igc-context-menu-background-active`	A cor de fundo dos itens do menu de contexto ao passar o mouse e focar.
`--igc-context-menu-color`	A cor do texto dos itens do menu de contexto.
`--igc-context-menu-color-active`	A cor do texto dos itens do menu de contexto ao passar o mouse e focar.
`--igc-drop-shadow-background`	A cor de fundo da sombra projetada.
`--igc-disabled-color`	A cor do texto dos componentes no estado desabilitado.

A navegação pelo teclado melhora a acessibilidade do Dock Manager e fornece uma grande variedade de interações ao usuário final, como navegar por todos os painéis, dividir a visualização em várias direções por meio do encaixe do painel ativo, etc.

Os atalhos são os seguintes:

Docking

CMD/CTRL + SHIFT + ↑ Encaixa no topo global
CMD/CTRL + SHIFT + ↓ Encaixa na parte inferior global
CMD/CTRL + SHIFT + → Encaixa à direita global
CMD/CTRL + SHIFT + ← Encaixa à esquerda global
SHIFT + ↑ Com várias guias em um grupo de guias, divide a exibição e encaixa a guia focada acima
SHIFT + ↓ Com várias guias em um grupo de guias, divide a exibição e encaixa a guia focada abaixo
SHIFT + → Com várias guias em um grupo de guias, divide a exibição e encaixa a guia focada à direita
SHIFT + ← Com várias guias em um grupo de guias, divide a exibição e encaixa a guia focada à esquerda

Navigating

CMD/CTRL + F6 ou CMD/CTRL + → Foca a próxima guia no host do documento
CMD/CTRL + SHIFT + F6 ou CMD/CTRL + ← Concentra a guia anterior no host do documento
ALT + F6 Foca no próximo painel de conteúdo
ALT + SHIFT + F6 Foca no painel de conteúdo anterior

Pane Navigator

Os atalhos de teclado a seguir mostram um navegador a partir do qual você pode iterar por painéis e documentos.

CMD/CTRL + F7 ou CMD/CTRL + F8 Começa a partir do primeiro documento
ALT + F7 ou ALT + F8 Inicia do primeiro painel para a frente
CMD/CTRL + SHIFT +ou CMD/CTRL F7 + SHIFT +Começa F8 do último documento de trás para frente
ALT + SHIFT + F7 ou ALT + SHIFT +Começa F8 do último painel para trás

Other

ALT + F3 Fecha o painel ativo

Pratique todas as ações mencionadas acima na demonstração de exemplo.

Styling

O Dock Manager usa um shadow DOM para encapsular seus estilos e comportamentos. Como resultado, você não pode simplesmente mirar seus elementos internos com os seletores CSS usuais. É por isso que expomos partes de componentes que podem ser miradas com o seletor CSS::part.

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

No exemplo a seguir, demonstramos a capacidade de personalizar o Dock Manager por meio de algumas das partes CSS que expusemos.

CSS Parts

Nome da peça	Descrição
`content-pane`	O componente do painel de conteúdo.
`pane-header`	O componente de cabeçalho do painel de conteúdo.
`pane-header-content`	A área de conteúdo do cabeçalho do painel de conteúdo.
`pane-header-actions`	A área de ações do cabeçalho do painel de conteúdo.
`active`	Indica um estado ativo. Aplica-se a`pane-header`,`pane-header-content`,`pane-header-actions`,`tab-header`.
`floating`	Indica um posicionamento de painel flutuante. Aplica-se a`pane-header`,`pane-header-content`,`pane-header-actions`.
`window`	Indica um posicionamento de janela flutuante. Aplica-se a`pane-header`,`pane-header-content`,`pane-header-actions`.
`split-pane`	O componente do painel dividido.
`splitter`	O componente divisor de redimensionamento.
`splitter-base`	O elemento base do componente divisor.
`splitter-ghost`	O elemento fantasma do componente divisor.
`unpinned-pane-header`	O componente de cabeçalho do painel não fixado.
`tab-header`	O componente de cabeçalho da guia.
`tab-header-more-options-button`	O botão mais opções no cabeçalho da guia.
`tab-header-close-button`	O botão fechar no cabeçalho da aba.
`selected`	Indica um estado selecionado. Aplica-se a`tab-header` e`tab-header-close-button`.
`hovered`	Indica um estado pairado. Aplica-se a`tab-header-close-button`.
`header-title`	O título do texto do cabeçalho da guia.
`tab-strip-area`	A área da faixa de guias que contém os cabeçalhos das guias.
`tab-strip-actions`	A área da faixa de guias que contém as ações da guia.
`top`	Indica uma posição de abas superiores. Aplica-se a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`bottom`	Indica uma posição de abas inferiores. Aplica-se a`tab-header`,`tab-strip-area`,`tab-strip-actions`.
`context-menu`	O componente do menu de contexto.
`context-menu-item`	Um item no componente do menu de contexto.
`docking-preview`	Área de pré-visualização do encaixe.
`docking-indicator`	O indicador de encaixe não raiz.
`root-docking-indicator`	O indicador de encaixe da raiz.
`splitter-docking-indicator`	O indicador de encaixe do divisor.
`pane-navigator`	O componente do navegador de painéis.
`pane-navigator-header`	A área de cabeçalho do navegador de painéis.
`pane-navigator-body`	A área do corpo do navegador de painéis.
`pane-navigator-items-group`	Um grupo de itens no componente do navegador de painéis.
`pane-navigator-items-group-title`	O elemento de título de um grupo de itens no navegador de painéis.
`pane-navigator-item`	Um item no navegador de painéis.
`pane-header-close-button`	O botão Fechar no cabeçalho do painel.
`pane-header-maximize-button`	O botão maximizar no cabeçalho do painel.
`pane-header-minimize-button`	O botão minimizar no cabeçalho do painel.
`pane-header-pin-button`	O botão de fixação no cabeçalho do painel.
`pane-header-unpin-button`	O botão de desafixar no cabeçalho do painel.
`tabs-maximize-button`	O botão de maximizar as guias.
`tabs-minimize-button`	O botão de minimizar guias.
`tabs-more-button`	O botão mais abas.
`context-menu-unpin-button`	O botão de desafixar no menu de contexto.
`context-menu-close-button`	O botão Fechar no menu de contexto.
`splitter-handle`	A alça divisora.
`horizontal`	Indica uma posição horizontal. Aplica-se a`splitter-handle`.
`vertical`	Indica uma posição vertical. Aplica-se a`splitter-handle`.

Themes

O Dock Manager vem com um tema claro e um escuro. O tema claro é o padrão. Para alterá-lo para escuro, você só precisa importar o arquivo igc.themes.css no seu css e adicionar a classe dark-theme ao Dock Manager ou qualquer um dos seus pais:

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

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

Localização

O componente Dock Manager suporta a localização das strings usadas nos menus de contexto, dicas de ferramentas e atributos de ária. Por padrão, o Dock Manager detecta o idioma da página procurando um atributo lang em qualquer um de seus pais. Se o atributo lang não estiver definido ou for definido para um valor que o Dock Manager não suporta, o idioma padrão usado é o inglês (en). O Dock Manager fornece strings localizadas embutidas para os seguintes idiomas: inglês (en), japonês (japonês), coreano (ko) e espanhol (es).

Para fornecer strings de recursos para qualquer outra linguagem, use o método addResourceStrings:

import { addResourceStrings } from 'igniteui-dockmanager';

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

addResourceStrings('fr', dockManagerStringsFr);

O Dock Manager expõeresourceStrings propriedades que permitem modificar as strings. Se você definir aresourceStrings propriedade, o Dock Manager vai usar suas strings independentemente do atributo lang definido.

Visão geral Web Components Dock Manager

Web Components Dock Manager Example

Usage

Content Pane

Split Pane

Tab Group Pane

Document Host

Floating Pane

Active Pane

Docking

Encaixe raiz

Encaixe de painel

Encaixe do Host do Documento

Acoplamento do divisor

Update Layout

Save/Load Layout

Adding Panes At Runtime

Eventos

Personalização

CSS Variables

Keyboard Navigation

Docking

Navigating

Pane Navigator

Other

Styling

CSS Parts

Themes

Localização

API References