Descripción general del administrador de muelle Blazor

Infragistics Blazor Dock Manager proporciona un medio para administrar el diseño de su aplicación a través de paneles, lo que permite a los usuarios finales personalizarla aún más fijando, cambiando el tamaño, moviendo, maximizando y ocultando paneles.

Blazor Dock Manager Example

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

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.

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