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.

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

    API References