Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ToolbarAwareTabBar

Specialized scrollable tab-bar which comes with toolbar support. Instead of the following DOM structure.

+-------------------------+ |[TAB_0][TAB_1][TAB_2][TAB| +-------------Scrollable--+

There is a dedicated HTML element for toolbar which does not contained in the scrollable element.

+-------------------------+-----------------+ |[TAB_0][TAB_1][TAB_2][TAB| Toolbar | +-------------Scrollable--+-Non-Scrollable-+

Hierarchy

Index

Constructors

Properties

breadcrumbsContainer: HTMLElement
breadcrumbsRenderer: BreadcrumbsRenderer
breadcrumbsRendererFactory: BreadcrumbsRendererFactory
contentContainer: HTMLElement
options?: IOptions<Widget> & Options
scrollBar?: PerfectScrollbar
tabBarToolbarFactory: (() => TabBarToolbar)

Type declaration

tabBarToolbarRegistry: TabBarToolbarRegistry
toDispose: DisposableCollection = ...
toolbar: undefined | TabBarToolbar
topRow: HTMLElement

Accessors

  • get contentNode(): HTMLUListElement
  • get scrollbarHost(): HTMLElement
  • get tabBarContainer(): HTMLElement

Methods

  • dispose(): void
  • handleEvent(event: Event): void
  • onAfterAttach(msg: Message): void
  • onBeforeDetach(msg: Message): void
  • onResize(msg: ResizeMessage): void
  • onUpdateRequest(msg: Message): void
  • revealTab(index: number): Promise<void>
  • rewireDOM(): void
  • Restructures the DOM defined in PhosphorJS.

    By default the tabs (li) are contained in the this.contentNode (ul) which is wrapped in a div (this.node). Instead of this structure, we add a container for the this.contentNode and for the toolbar. The scrollbar will only work for the ul part but it does not affect the toolbar, so it can be on the right hand-side.

    Returns void

  • updateBreadcrumbs(): Promise<void>
  • updateToolbar(): void