Descripción general de Blazor Dock Manager
El 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 sus usuarios finales personalizarlo aún más anclando, cambiando el tamaño, moviendo, maximizando y ocultando paneles.
Blazor Dock Manager Example
This example shows most functionalities and docking options of the IgbDockManager that you can use in your application.
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.
Let's utilize these slots and parts to create a customized Dock Manager layout. First, we will provide our own icons, using the closeButton, maximizeButton, minimizeButton, pinButton and unpinButton slots:
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 + ↑ 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 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. |
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 asplitter-handle. |
vertical |
Indica una posición vertical. Se aplica asplitter-handle. |