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

constructor

Properties

Protected breadcrumbsContainer

breadcrumbsContainer: HTMLElement

Protected Readonly breadcrumbsRenderer

breadcrumbsRenderer: BreadcrumbsRenderer

Protected Readonly breadcrumbsRendererFactory

breadcrumbsRendererFactory: BreadcrumbsRendererFactory

Protected contentContainer

contentContainer: HTMLElement

Protected Optional Readonly options

options: IOptions<Widget> & Options

Protected Optional scrollBar

scrollBar: PerfectScrollbar

Protected Readonly tabBarToolbarFactory

tabBarToolbarFactory: () => TabBarToolbar

Type declaration

Protected Readonly tabBarToolbarRegistry

tabBarToolbarRegistry: TabBarToolbarRegistry

Protected Readonly toDispose

toDispose: DisposableCollection = ...

Protected toolbar

toolbar: undefined | TabBarToolbar

Protected topRow

topRow: HTMLElement

Accessors

contentNode

  • get contentNode(): HTMLUListElement

Protected scrollbarHost

  • get scrollbarHost(): HTMLElement

Protected tabBarContainer

  • get tabBarContainer(): HTMLElement

Methods

dispose

  • dispose(): void

handleEvent

  • handleEvent(event: Event): void

Protected onAfterAttach

  • onAfterAttach(msg: Message): void

Protected onBeforeDetach

  • onBeforeDetach(msg: Message): void

Protected onResize

  • onResize(msg: ResizeMessage): void

Protected onUpdateRequest

  • onUpdateRequest(msg: Message): void

revealTab

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

Protected rewireDOM

  • 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

Protected updateBreadcrumbs

  • updateBreadcrumbs(): Promise<void>

Protected updateToolbar

  • updateToolbar(): void