• Public
  • Public/Protected
  • All

A specialized tab bar for side areas.




  • new SideTabBar(options?: IOptions<Widget> & Options): SideTabBar


collapseRequested: Signal<SideTabBar, Title<Widget>> = ...

Side panels can be collapsed by clicking on the currently selected tab. This signal is emitted when the mouse is released on the selected tab without initiating a drag.

mouseData?: { mouseDownTabIndex: number; pressX: number; pressY: number }

Type declaration

  • mouseDownTabIndex: number
  • pressX: number
  • pressY: number
scrollBar?: PerfectScrollbar
tabAdded: Signal<SideTabBar, { title: Title<Widget> }> = ...

Emitted when a tab is added to the tab bar.

toCancelViewContainerDND: DisposableCollection = ...
toDispose: DisposableCollection = ...


  • get hiddenContentNode(): HTMLUListElement
  • Tab bars of the left and right side panel are arranged vertically by rotating their labels. Rotation is realized with the CSS transform property, which disrupts the browser's ability to arrange the involved elements automatically. Therefore the elements are arranged explicitly by the TabBarRenderer using inline height and top styles. However, the size of labels must still be computed by the browser, so the rendering is performed in two steps: first the tab bar is rendered horizontally inside a hidden content node, then it is rendered again vertically inside the proper content node. After the first step, size information is gathered from all labels so it can be applied during the second step.

    Returns HTMLUListElement

  • get scrollbarHost(): HTMLElement


  • cancelViewContainerDND(): void
  • dispose(): void
  • handleEvent(event: Event): void
  • The following event processing is used to generate collapseRequested signals when the mouse goes up on the currently selected tab without too much movement between mousedown and mouseup. The movement threshold is the same that is used by the superclass to detect a drag event. The allowDeselect option of the TabBar constructor cannot be used here because it is triggered when the mouse goes down, and thus collides with dragging.


    • event: Event

    Returns void

  • insertTab(index: number, value: Title<Widget> | IOptions<Widget>): Title<Widget>
  • onAfterAttach(msg: Message): void
  • onAfterDetach(msg: Message): void
  • onBeforeDetach(msg: Message): void
  • onDragEnter(event: IDragEvent): void
  • onDragOver(event: IDragEvent): void
  • onMouseDown(event: MouseEvent): void
  • onMouseMove(event: MouseEvent): void
  • onMouseUp(event: MouseEvent): void
  • onResize(msg: ResizeMessage): void
  • onUpdateRequest(msg: Message): void
  • renderTabBar(): void
  • Render the tab bar in the hidden content node (see hiddenContentNode for explanation), then gather size information for labels and render it again in the proper content node.

    Returns void

  • revealTab(index: number): Promise<void>