Descripción general del administrador de muelle React
Infragistics React 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 personalizarla aún más fijando, cambiando el tamaño, moviendo, maximizando y ocultando paneles.
React Dock Manager Example
Este ejemplo muestra la mayoría de las funcionalidades y opciones de acoplamiento de IgrDockManager 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();
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));
Customization
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:
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. |
Keyboard Navigation
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 + ↑ Se acopla al top global
- Cmd/Ctrl + Shift + ↓ Se acopla al fondo global
- Cmd/Ctrl + Shift + → Se acopla 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 debajo
- 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 o Cmd/Ctrl + ← 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 + F7 o Cmd/Ctrl + Shift + F8 Comienza desde el último documento hacia atrás
- Alt + Shift + F7 o Alt + 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 apane-header,pane-header-content,pane-header-actions,tab-header. |
floating |
Indica una ubicación de panel flotante. Se aplica apane-header,pane-header-content,pane-header-actions. |
window |
Indica una ubicación de ventana flotante. Se aplica apane-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 atab-header ytab-header-close-button. |
hovered |
Indica un estado suspendido. Se aplica atab-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 atab-header,tab-strip-area,tab-strip-actions. |
bottom |
Indica la posición de las pestañas inferiores. Se aplica atab-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. |
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 asplitter-handle. |
vertical |
Indica una posición vertical. Se aplica asplitter-handle. |