DockManager

The DockManager component is a user interface element that manages the layout and docking of child components or panels within an application.

Sass Variables

The Telerik and Kendo UI DockManager is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar Sass variables, as well as the Sass variables provided by the Splitter, and TabStrip components.

VariableDefault ValueComputed ValueValue
kendo-dock-manager-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the DockManager component.
kendo-dock-manager-border-stylesolidsolidDefault: solidComputed: solid
Description: The style of the border around the DockManager component.
kendo-dock-manager-border$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-base-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The color of the border around the DockManager component.
kendo-dock-manager-pane-header-padding-yk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the pane header in the DockManager component.
kendo-dock-manager-pane-header-padding-xk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the pane header in the DockManager component.
kendo-dock-manager-pane-header-border-width$kendo-dock-manager-border-width1pxDefault: $kendo-dock-manager-border-widthComputed: 1px
Description: The width of the border around the pane header in the DockManager component.
kendo-dock-manager-pane-header-border-stylesolidsolidDefault: solidComputed: solid
Description: The style of the border around the pane header in the DockManager component.
kendo-dock-manager-pane-header-bg$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-component-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the pane header in the DockManager component.
kendo-dock-manager-pane-title-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the pane title in the DockManager component.
kendo-dock-manager-pane-title-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the pane title in the DockManager component.
kendo-dock-manager-pane-title-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the pane title in the DockManager component.
kendo-dock-manager-pane-title-font-sizevar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit)
Description: The font size of the pane title in the DockManager component.
kendo-dock-manager-pane-title-line-heightvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)Default: var( --kendo-line-height-sm, normal )Computed: var(--kendo-line-height-sm, normal)
Description: The line height of the pane title in the DockManager component.
kendo-dock-manager-pane-title-font-weightvar( --kendo-font-weight-normal, normal )var(--kendo-font-weight-normal, normal)Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal)
Description: The font weight of the pane title in the DockManager component.
kendo-dock-manager-pane-content-padding-x$kendo-dock-manager-pane-header-padding-xvar(--kendo-spacing-4, 1rem)Default: $kendo-dock-manager-pane-header-padding-xComputed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the pane content in the DockManager component.
kendo-dock-manager-pane-content-padding-y$kendo-dock-manager-pane-header-padding-xvar(--kendo-spacing-4, 1rem)Default: $kendo-dock-manager-pane-header-padding-xComputed: var(--kendo-spacing-4, 1rem)
Description: The vertical padding of the pane content in the DockManager component.
kendo-dock-manager-tabbed-pane-padding-yk-spacing(3.5)var(--kendo-spacing-3\.5, 0.875rem)Default: k-spacing(3.5)Computed: var(--kendo-spacing-3\.5, 0.875rem)
Description: The horizontal padding of the tabbed pane in the DockManager component.
kendo-dock-manager-tabbed-pane-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the tabbed pane in the DockManager component.
kendo-dock-manager-unpinned-container-width300px300pxDefault: 300pxComputed: 300px
Description: The width of the unpinned pane container in the DockManager component.
kendo-dock-manager-unpinned-container-bg$kendo-color-white #ffffffDefault: $kendo-color-whiteComputed: #ffffff
Description: The background-color of the unpinned pane container in the DockManager component.
kendo-dock-manager-unpinned-container-shadow4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)(4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03))Default: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)Computed: (4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03))
Description: The box shadow of the unpinned pane container in the DockManager component.
kendo-dock-indicator-paddingk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The padding of the dock indicator in the DockManager component.
kendo-dock-indicator-bg #f5f5f5 #f5f5f5Default: #f5f5f5Computed: #f5f5f5
Description: The background color of the dock indicator in the DockManager component.
kendo-dock-indicator-text$kendo-color-primaryvar(--kendo-color-primary, #ff6358)Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358)
Description: The text color of the dock indicator in the DockManager component.
kendo-dock-indicator-outline-width1px1pxDefault: 1pxComputed: 1px
Description: The outline width of the dock indicator in the DockManager component.
kendo-dock-indicator-outline-stylesolidsolidDefault: solidComputed: solid
Description: The outline style of the dock indicator in the DockManager component.
kendo-dock-indicator-outline$kendo-dock-indicator-textvar(--kendo-color-primary, #ff6358)Default: $kendo-dock-indicator-textComputed: var(--kendo-color-primary, #ff6358)
Description: The outline color of the dock indicator in the DockManager component.
kendo-dock-indicator-shadowdrop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) )(drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2)))Default: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) )Computed: (drop-shadow(0px 1px 18px rgba(0, 0, 0, 0.12)) drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2)))
Description: The box shadow of the dock indicator in the DockManager component.
kendo-dock-indicator-hover-bg$kendo-color-primaryvar(--kendo-color-primary, #ff6358)Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358)
Description: The background color of the hovered dock indicator in the DockManager component.
kendo-dock-indicator-hover-text$kendo-color-white #ffffffDefault: $kendo-color-whiteComputed: #ffffff
Description: The text color of the hovered dock indicator in the DockManager component.
kendo-dock-manager-dock-preview-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the dropping area in the DockManager component.
kendo-dock-manager-dock-preview-border-styledasheddashedDefault: dashedComputed: dashed
Description: The style of the border around the dropping area in the DockManager component.
kendo-dock-manager-dock-preview-border-radiusk-border-radius(sm)var(--kendo-border-radius-sm, 0.125rem)Default: k-border-radius(sm)Computed: var(--kendo-border-radius-sm, 0.125rem)
Description: The border radius of the dropping area in the DockManager component.
kendo-dock-manager-dock-preview-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 ))color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent)Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 ))Computed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent)
Description: The background color of the dropping area in the DockManager component.
kendo-dock-manager-dock-preview-border$kendo-color-primaryvar(--kendo-color-primary, #ff6358)Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358)
Description: The border color of the dropping area in the DockManager component.
Feedback