TabPanel | @lumino/widgets

A widget which combines a TabBar and a StackedPanel. The namespace for the TabPanel class statics.

Notes

This is a simple panel which handles the common case of a tab bar placed next to a content area. The selected tab controls the widget which is shown in the content area.

For use cases which require more control than is provided by this panel, the TabBar widget may be used independently.

Hierarchy

Widget
- TabPanel

Implements

IMessageHandler
IObservableDisposable

Index

Modules

Enumerations

Classes

Interfaces

Type aliases

TabPlacement

Constructors

constructor

Properties

Accessors

Methods

Type aliases

Static TabPlacement

TabPlacement: "top" | "left" | "right" | "bottom"

A type alias for tab placement in a tab bar.

Constructors

constructor

new TabPanel(options?: IOptions): TabPanel

Overrides Widget.constructor
- Defined in widgets/src/tabpanel.ts:35
Construct a new tab panel.

Parameters
- Default value options: IOptions = {}
  
  The options for initializing the tab panel.
Returns TabPanel

Properties

Private _addRequested

_addRequested: Signal<this, TabBar<Widget>> = new Signal<this, TabBar<Widget>>(this)

Private _currentChanged

_currentChanged: Signal<this, ICurrentChangedArgs> = new Signal<this, TabPanel.ICurrentChangedArgs>(this)

Private _tabPlacement

_tabPlacement: TabPlacement

node

node: HTMLElement

Get the DOM node owned by the widget.

stackedPanel

stackedPanel: StackedPanel

The stacked panel used by the tab panel.

Notes

Modifying the panel directly can lead to undefined behavior.

tabBar

tabBar: TabBar<Widget>

The tab bar used by the tab panel.

Notes

Modifying the tab bar directly can lead to undefined behavior.

Accessors

addButtonEnabled

get addButtonEnabled(): boolean
set addButtonEnabled(value: boolean): void

- Defined in widgets/src/tabpanel.ts:175
Get the whether the add button is enabled.

Returns boolean
- Defined in widgets/src/tabpanel.ts:183
Set the whether the add button is enabled.

Parameters
- value: boolean
Returns void

addRequested

get addRequested(): ISignal<this, TabBar<Widget>>

- Defined in widgets/src/tabpanel.ts:228
A signal emitted when the add button on a tab bar is clicked.

Returns ISignal<this, TabBar<Widget>>

currentChanged

get currentChanged(): ISignal<this, ICurrentChangedArgs>

- Defined in widgets/src/tabpanel.ts:106
A signal emitted when the current tab is changed.

Notes

This signal is emitted when the currently selected tab is changed either through user or programmatic interaction.

Notably, this signal is not emitted when the index of the current tab changes due to tabs being inserted, removed, or moved. It is only emitted when the actual current tab node is changed.

Returns ISignal<this, ICurrentChangedArgs>

currentIndex

get currentIndex(): number
set currentIndex(value: number): void

- Defined in widgets/src/tabpanel.ts:116
Get the index of the currently selected tab.

Notes

This will be -1 if no tab is selected.

Returns number
- Defined in widgets/src/tabpanel.ts:126
Set the index of the currently selected tab.

Notes

If the index is out of range, it will be set to -1.

Parameters
- value: number
Returns void

currentWidget

get currentWidget(): Widget | null
set currentWidget(value: Widget | null): void

- Defined in widgets/src/tabpanel.ts:136
Get the currently selected widget.

Notes

This will be null if there is no selected tab.

Returns Widget | null
- Defined in widgets/src/tabpanel.ts:147
Set the currently selected widget.

Notes

If the widget is not in the panel, it will be set to null.

Parameters
- value: Widget | null
Returns void

dataset

get dataset(): DOMStringMap

Inherited from Widget.dataset
- Defined in widgets/src/widget.ts:168
The dataset for the widget's DOM node.

Returns DOMStringMap

disposed

get disposed(): ISignal<this, void>

Inherited from Widget.disposed
- Defined in widgets/src/widget.ts:95
A signal emitted when the widget is disposed.

Returns ISignal<this, void>

hiddenMode

get hiddenMode(): HiddenMode
set hiddenMode(value: HiddenMode): void

Inherited from Widget.hiddenMode
- Defined in widgets/src/widget.ts:175
Get the method for hiding the widget.

Returns HiddenMode
Inherited from Widget.hiddenMode
- Defined in widgets/src/widget.ts:182
Set the method for hiding the widget.

Parameters
- value: HiddenMode
Returns void

id

get id(): string
set id(value: string): void

Inherited from Widget.id
- Defined in widgets/src/widget.ts:154
Get the id of the widget's DOM node.

Returns string
Inherited from Widget.id
- Defined in widgets/src/widget.ts:161
Set the id of the widget's DOM node.

Parameters
- value: string
Returns void

isAttached

get isAttached(): boolean

Inherited from Widget.isAttached
- Defined in widgets/src/widget.ts:114
Test whether the widget's node is attached to the DOM.

Returns boolean

isDisposed

get isDisposed(): boolean

Inherited from Widget.isDisposed
- Defined in widgets/src/widget.ts:107
Test whether the widget has been disposed.

Returns boolean

isHidden

get isHidden(): boolean

Inherited from Widget.isHidden
- Defined in widgets/src/widget.ts:121
Test whether the widget is explicitly hidden.

Returns boolean

isVisible

get isVisible(): boolean

Inherited from Widget.isVisible
- Defined in widgets/src/widget.ts:132
Test whether the widget is visible.

Notes

A widget is visible when it is attached to the DOM, is not explicitly hidden, and has no explicitly hidden ancestors.

Returns boolean

layout

get layout(): Layout | null
set layout(value: Layout | null): void

Inherited from Widget.layout
- Defined in widgets/src/widget.ts:248
Get the layout for the widget.

Notes

The layout is single-use only. It cannot be changed after the first assignment.

The layout is disposed automatically when the widget is disposed.

Returns Layout | null
Inherited from Widget.layout
- Defined in widgets/src/widget.ts:261
Set the layout for the widget.

Notes

The layout is single-use only. It cannot be changed after the first assignment.

The layout is disposed automatically when the widget is disposed.

Parameters
- value: Layout | null
Returns void

parent

get parent(): Widget | null
set parent(value: Widget | null): void

Inherited from Widget.parent
- Defined in widgets/src/widget.ts:209
Get the parent of the widget.

Notes

Children are typically added to a widget by using a layout, which means user code will not normally set the parent widget directly.

The widget will be automatically removed from its old parent.

This is a no-op if there is no effective parent change.

Returns Widget | null
Inherited from Widget.parent
- Defined in widgets/src/widget.ts:224
Set the parent of the widget.

Notes

Children are typically added to a widget by using a layout, which means user code will not normally set the parent widget directly.

The widget will be automatically removed from its old parent.

This is a no-op if there is no effective parent change.

Parameters
- value: Widget | null
Returns void

tabPlacement

get tabPlacement(): TabPlacement
set tabPlacement(value: TabPlacement): void

- Defined in widgets/src/tabpanel.ts:193
Get the tab placement for the tab panel.

Notes

This controls the position of the tab bar relative to the content.

Returns TabPlacement
- Defined in widgets/src/tabpanel.ts:203
Set the tab placement for the tab panel.

Notes

This controls the position of the tab bar relative to the content.

Parameters
- value: TabPlacement
Returns void

tabsMovable

get tabsMovable(): boolean
set tabsMovable(value: boolean): void

- Defined in widgets/src/tabpanel.ts:157
Get the whether the tabs are movable by the user.

Notes

Tabs can always be moved programmatically.

Returns boolean
- Defined in widgets/src/tabpanel.ts:167
Set the whether the tabs are movable by the user.

Notes

Tabs can always be moved programmatically.

Parameters
- value: boolean
Returns void

title

get title(): Title<Widget>

Inherited from Widget.title
- Defined in widgets/src/widget.ts:147
The title object for the widget.

Notes

The title object is used by some container widgets when displaying the widget alongside some title, such as a tab panel or side bar.

Since not all widgets will use the title, it is created on demand.

The owner property of the title is set to this widget.

Returns Title<Widget>

widgets

get widgets(): ReadonlyArray<Widget>

- Defined in widgets/src/tabpanel.ts:251
A read-only array of the widgets in the panel.

Returns ReadonlyArray<Widget>

Methods

Private _onCurrentChanged

_onCurrentChanged(sender: TabBar<Widget>, args: ICurrentChangedArgs<Widget>): void

- Defined in widgets/src/tabpanel.ts:304
Handle the currentChanged signal from the tab bar.

Parameters
- sender: TabBar<Widget>
- args: ICurrentChangedArgs<Widget>
Returns void

Private _onTabActivateRequested

_onTabActivateRequested(sender: TabBar<Widget>, args: ITabActivateRequestedArgs<Widget>): void

- Defined in widgets/src/tabpanel.ts:349
Handle the tabActivateRequested signal from the tab bar.

Parameters
- sender: TabBar<Widget>
- args: ITabActivateRequestedArgs<Widget>
Returns void

Private _onTabAddRequested

_onTabAddRequested(sender: TabBar<Widget>, args: void): void

- Defined in widgets/src/tabpanel.ts:342
Handle the tabAddRequested signal from the tab bar.

Parameters
- sender: TabBar<Widget>
- args: void
Returns void

Private _onTabCloseRequested

_onTabCloseRequested(sender: TabBar<Widget>, args: ITabCloseRequestedArgs<Widget>): void

- Defined in widgets/src/tabpanel.ts:359
Handle the tabCloseRequested signal from the tab bar.

Parameters
- sender: TabBar<Widget>
- args: ITabCloseRequestedArgs<Widget>
Returns void

Private _onTabMoved

_onTabMoved(sender: TabBar<Widget>, args: ITabMovedArgs<Widget>): void

- Defined in widgets/src/tabpanel.ts:369
Handle the tabMoved signal from the tab bar.

Parameters
- sender: TabBar<Widget>
- args: ITabMovedArgs<Widget>
Returns void

Private _onWidgetRemoved

_onWidgetRemoved(sender: StackedPanel, widget: Widget): void

- Defined in widgets/src/tabpanel.ts:379
Handle the widgetRemoved signal from the stacked panel.

Parameters
- sender: StackedPanel
- widget: Widget
Returns void

activate

activate(): void

Inherited from Widget.activate
- Defined in widgets/src/widget.ts:399
Post an 'activate-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void

addClass

addClass(name: string): void

Inherited from Widget.addClass
- Defined in widgets/src/widget.ts:329
Add a class name to the widget's DOM node.

Parameters
- name: string
  
  The class name to add to the node.
  
  Notes
  
  If the class name is already added to the node, this is a no-op.
  
  The class name must not contain whitespace.
Returns void

addWidget

addWidget(widget: Widget): void

- Defined in widgets/src/tabpanel.ts:265
Add a widget to the end of the tab panel.

Parameters
- widget: Widget
  
  The widget to add to the tab panel.
  
  Notes
  
  If the widget is already contained in the panel, it will be moved.
  
  The widget's title is used to populate the tab.
Returns void

children

children(): IIterator<Widget>

Inherited from Widget.children
- Defined in widgets/src/widget.ts:288
Create an iterator over the widget's children.

Returns IIterator<Widget>

A new iterator over the children of the widget.

Notes

The widget must have a populated layout in order to have children.

If a layout is not installed, the returned iterator will be empty.

clearFlag

clearFlag(flag: Flag): void

Inherited from Widget.clearFlag
- Defined in widgets/src/widget.ts:511
Clear the given widget flag.

Notes

This will not typically be called directly by user code.

Parameters
- flag: Flag
Returns void

close

close(): void

Inherited from Widget.close
- Defined in widgets/src/widget.ts:409
Send a 'close-request' message to the widget.

Notes

This is a simple convenience method for sending the message.

Returns void

contains

contains(widget: Widget): boolean

Inherited from Widget.contains
- Defined in widgets/src/widget.ts:299
Test whether a widget is a descendant of this widget.

Parameters
- widget: Widget
  
  The descendant widget of interest.
Returns boolean

true if the widget is a descendant, false otherwise.

dispose

dispose(): void

Inherited from Widget.dispose
- Defined in widgets/src/widget.ts:60
Dispose of the widget and its descendant widgets.

Notes

It is unsafe to use the widget after it has been disposed.

All calls made to this method after the first are a no-op.

Returns void

fit

fit(): void

Inherited from Widget.fit
- Defined in widgets/src/widget.ts:389
Post a 'fit-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void

hasClass

hasClass(name: string): boolean

Inherited from Widget.hasClass
- Defined in widgets/src/widget.ts:315
Test whether the widget's DOM node has the given class name.

Parameters
- name: string
  
  The class name of interest.
Returns boolean

true if the node has the class, false otherwise.

hide

hide(): void

Inherited from Widget.hide
- Defined in widgets/src/widget.ts:449
Hide the widget and make it hidden to its parent widget.

Notes

This causes the isHidden property to be true.

If the widget is explicitly hidden, this is a no-op.

Returns void

insertWidget

insertWidget(index: number, widget: Widget): void

- Defined in widgets/src/tabpanel.ts:281
Insert a widget into the tab panel at a specified index.

Parameters
- index: number
  
  The index at which to insert the widget.
- widget: Widget
  
  The widget to insert into to the tab panel.
  
  Notes
  
  If the widget is already contained in the panel, it will be moved.
  
  The widget's title is used to populate the tab.
Returns void

Protected notifyLayout

notifyLayout(msg: Message): void

Inherited from Widget.notifyLayout
- Defined in widgets/src/widget.ts:609
Invoke the message processing routine of the widget's layout.

Parameters
- msg: Message
  
  The message to dispatch to the layout.
  
  Notes
  
  This is a no-op if the widget does not have a layout.
  
  This will not typically be called directly by user code.
Returns void

Protected onActivateRequest

onActivateRequest(msg: Message): void

Inherited from Widget.onActivateRequest
- Defined in widgets/src/widget.ts:659
A message handler invoked on an 'activate-request' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onAfterAttach

onAfterAttach(msg: Message): void

Inherited from Widget.onAfterAttach
- Defined in widgets/src/widget.ts:707
A message handler invoked on an 'after-attach' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onAfterDetach

onAfterDetach(msg: Message): void

Inherited from Widget.onAfterDetach
- Defined in widgets/src/widget.ts:723
A message handler invoked on an 'after-detach' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onAfterHide

onAfterHide(msg: Message): void

Inherited from Widget.onAfterHide
- Defined in widgets/src/widget.ts:691
A message handler invoked on an 'after-hide' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onAfterShow

onAfterShow(msg: Message): void

Inherited from Widget.onAfterShow
- Defined in widgets/src/widget.ts:675
A message handler invoked on an 'after-show' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onBeforeAttach

onBeforeAttach(msg: Message): void

Inherited from Widget.onBeforeAttach
- Defined in widgets/src/widget.ts:699
A message handler invoked on a 'before-attach' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onBeforeDetach

onBeforeDetach(msg: Message): void

Inherited from Widget.onBeforeDetach
- Defined in widgets/src/widget.ts:715
A message handler invoked on a 'before-detach' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onBeforeHide

onBeforeHide(msg: Message): void

Inherited from Widget.onBeforeHide
- Defined in widgets/src/widget.ts:683
A message handler invoked on a 'before-hide' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onBeforeShow

onBeforeShow(msg: Message): void

Inherited from Widget.onBeforeShow
- Defined in widgets/src/widget.ts:667
A message handler invoked on a 'before-show' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onChildAdded

onChildAdded(msg: ChildMessage): void

Inherited from Widget.onChildAdded
- Defined in widgets/src/widget.ts:731
A message handler invoked on a 'child-added' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: ChildMessage
Returns void

Protected onChildRemoved

onChildRemoved(msg: ChildMessage): void

Inherited from Widget.onChildRemoved
- Defined in widgets/src/widget.ts:739
A message handler invoked on a 'child-removed' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: ChildMessage
Returns void

Protected onCloseRequest

onCloseRequest(msg: Message): void

Inherited from Widget.onCloseRequest
- Defined in widgets/src/widget.ts:621
A message handler invoked on a 'close-request' message.

Notes

The default implementation unparents or detaches the widget.

Parameters
- msg: Message
Returns void

Protected onFitRequest

onFitRequest(msg: Message): void

Inherited from Widget.onFitRequest
- Defined in widgets/src/widget.ts:651
A message handler invoked on a 'fit-request' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

Protected onResize

onResize(msg: ResizeMessage): void

Inherited from Widget.onResize
- Defined in widgets/src/widget.ts:635
A message handler invoked on a 'resize' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: ResizeMessage
Returns void

Protected onUpdateRequest

onUpdateRequest(msg: Message): void

Inherited from Widget.onUpdateRequest
- Defined in widgets/src/widget.ts:643
A message handler invoked on an 'update-request' message.

Notes

The default implementation of this handler is a no-op.

Parameters
- msg: Message
Returns void

processMessage

processMessage(msg: Message): void

Inherited from Widget.processMessage
- Defined in widgets/src/widget.ts:523
Process a message sent to the widget.

Parameters
- msg: Message
  
  The message sent to the widget.
  
  Notes
  
  Subclasses may reimplement this method as needed.
Returns void

removeClass

removeClass(name: string): void

Inherited from Widget.removeClass
- Defined in widgets/src/widget.ts:343
Remove a class name from the widget's DOM node.

Parameters
- name: string
  
  The class name to remove from the node.
  
  Notes
  
  If the class name is not yet added to the node, this is a no-op.
  
  The class name must not contain whitespace.
Returns void

setFlag

setFlag(flag: Flag): void

Inherited from Widget.setFlag
- Defined in widgets/src/widget.ts:501
Set the given widget flag.

Notes

This will not typically be called directly by user code.

Parameters
- flag: Flag
Returns void

setHidden

setHidden(hidden: boolean): void

Inherited from Widget.setHidden
- Defined in widgets/src/widget.ts:477
Show or hide the widget according to a boolean value.

Parameters
- hidden: boolean
  
  true to hide the widget, or false to show it.
  
  Notes
  
  This is a convenience method for hide() and show().
Returns void

show

show(): void

Inherited from Widget.show
- Defined in widgets/src/widget.ts:421
Show the widget and make it visible to its parent widget.

Notes

This causes the isHidden property to be false.

If the widget is not explicitly hidden, this is a no-op.

Returns void

testFlag

testFlag(flag: Flag): boolean

Inherited from Widget.testFlag
- Defined in widgets/src/widget.ts:491
Test whether the given widget flag is set.

Notes

This will not typically be called directly by user code.

Parameters
- flag: Flag
Returns boolean

toggleClass

toggleClass(name: string, force?: undefined | false | true): boolean

Inherited from Widget.toggleClass
- Defined in widgets/src/widget.ts:361
Toggle a class name on the widget's DOM node.

Parameters
- name: string
  
  The class name to toggle on the node.
- Optional force: undefined | false | true
  
  Whether to force add the class (true) or force remove the class (false). If not provided, the presence of the class will be toggled from its current state.
Returns boolean

true if the class is now present, false otherwise.

Notes

The class name must not contain whitespace.

update

update(): void

Inherited from Widget.update
- Defined in widgets/src/widget.ts:379
Post an 'update-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void

Static attach

attach(widget: Widget, host: HTMLElement, ref?: HTMLElement | null): void

- Defined in widgets/src/widget.ts:1088
Attach a widget to a host DOM node.

Parameters
- widget: Widget
  
  The widget of interest.
- host: HTMLElement
  
  The DOM node to use as the widget's host.
- Default value ref: HTMLElement | null = null
  
  The child of host to use as the reference element. If this is provided, the widget will be inserted before this node in the host. The default is null, which will cause the widget to be added as the last child of the host.
  
  Notes
  
  This will throw an error if the widget is not a root widget, if the widget is already attached, or if the host is not attached to the DOM.
Returns void

Static detach

detach(widget: Widget): void

- Defined in widgets/src/widget.ts:1116
Detach the widget from its host DOM node.

Parameters
- widget: Widget
  
  The widget of interest.
  
  Notes
  
  This will throw an error if the widget is not a root widget, or if the widget is not attached to the DOM.
Returns void

Notes

Hierarchy

Implements

Index

Modules

Enumerations

Classes

Interfaces

Type aliases

Constructors

Properties

Accessors

Methods

Type aliases

Static TabPlacement

Constructors

constructor

Parameters

Default value options: IOptions = {}

Returns TabPanel

Properties

Private _addRequested

Private _currentChanged

Private _tabPlacement

node

stackedPanel

Notes

tabBar

Notes

Accessors

addButtonEnabled

Returns boolean

Parameters

value: boolean

Returns void

addRequested

Returns ISignal<this, TabBar<Widget>>

currentChanged

Notes

Returns ISignal<this, ICurrentChangedArgs>

currentIndex

Notes

Returns number

Notes

Parameters

value: number

Returns void

currentWidget

Notes

Returns Widget | null

Notes

Parameters

value: Widget | null

Returns void

dataset

Returns DOMStringMap

disposed

Returns ISignal<this, void>

hiddenMode

Returns HiddenMode

Parameters

value: HiddenMode

Returns void

id

Returns string

Parameters

value: string

Returns void

isAttached

Returns boolean

isDisposed

Returns boolean

isHidden

Returns boolean

isVisible

Notes

Returns boolean

layout

Notes

Returns Layout | null