Visão geral do React Dock Manager

O Infragistics React Dock Manager 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.

React Dock Manager Example

Este exemplo mostra a maioria das funcionalidades e opções de encaixe do IgrDockManager que você pode usar em seu aplicativo.

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

Veja como adicionar um ouvinte de eventos para o evento PaneClose:

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

Customization

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 utilizar esses slots e peças para criar um layout personalizado do Dock Manager. Primeiro, forneceremos nossos próprios ícones, usando os slots closeButton, maximizeButton, minimizeButton, pinButton e unpinButton:

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 na direita global
Cmd/Ctrl + Shift + ← Encaixa na esquerda global
Shift + ↑ Com várias guias em um grupo de guias, divide a visualização e encaixa a guia focada acima
Shift + ↓ Com várias guias em um grupo de guias, divide a visualização e encaixa a guia em foco abaixo
Shift + → Com várias guias em um grupo de guias, divide a visualização e encaixa a guia em foco à direita
Shift + ← Com várias guias em um grupo de guias, divide a visualização e encaixa a guia em foco à esquerda

Navigating

Cmd/Ctrl + F6 ou Cmd/Ctrl + → Foca a próxima aba no host do documento
Cmd/Ctrl + Shift + F6 ou Cmd/Ctrl + ← Foca a aba anterior no host do documento
Alt + F6 Foca o próximo painel de conteúdo
Alt + Shift + F6 Foca o 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 do primeiro documento para a frente
Alt + F7 ou Alt + F8 Começa do primeiro painel para a frente
Cmd/Ctrl + Shift + F7 ou Cmd/Ctrl + Shift + F8 Começa do último documento para trás
Alt + Shift + F7 ou Alt + Shift + F8 Começa 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.
`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`.