Class TabPanel

A widget which combines a TabBar and a StackedPanel.

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

Index

Constructors

constructor

new TabPanel(options?: TabPanel.IOptions): TabPanel
Construct a new tab panel.
Parameters
- options: TabPanel.IOptions = {}
  
  The options for initializing the tab panel.
Returns TabPanel
Overrides Widget.constructor
- Defined in packages/widgets/src/tabpanel.ts:41

Properties

`Private` _addRequested

_addRequested: Signal<TabPanel, TabBar<Widget>> = ...

`Private` _currentChanged

_currentChanged: Signal<TabPanel, TabPanel.ICurrentChangedArgs> = ...

`Private` _tabPlacement

_tabPlacement: TabPlacement

`Readonly` node

node: HTMLElement

Get the DOM node owned by the widget.

`Readonly` stackedPanel

stackedPanel: StackedPanel

The stacked panel used by the tab panel.

Notes

Modifying the panel directly can lead to undefined behavior.

`Readonly` 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
Get the whether the add button is enabled.

Returns boolean
- Defined in packages/widgets/src/tabpanel.ts:168
set addButtonEnabled(value: boolean): void
Set the whether the add button is enabled.
Parameters
- value: boolean
Returns void
- Defined in packages/widgets/src/tabpanel.ts:176

addRequested

get addRequested(): ISignal<this, TabBar<Widget>>
A signal emitted when the add button on a tab bar is clicked.

Returns ISignal<this, TabBar<Widget>>
- Defined in packages/widgets/src/tabpanel.ts:221

currentChanged

get currentChanged(): ISignal<this, TabPanel.ICurrentChangedArgs>
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, TabPanel.ICurrentChangedArgs>
- Defined in packages/widgets/src/tabpanel.ts:99

currentIndex

get currentIndex(): number
Get the index of the currently selected tab.

Notes

This will be -1 if no tab is selected.

Returns number
- Defined in packages/widgets/src/tabpanel.ts:109
set currentIndex(value: number): void
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
- Defined in packages/widgets/src/tabpanel.ts:119

currentWidget

get currentWidget(): null | Widget
Get the currently selected widget.

Notes

This will be null if there is no selected tab.

Returns null | Widget
- Defined in packages/widgets/src/tabpanel.ts:129
set currentWidget(value: null | Widget): void
Set the currently selected widget.

Notes

If the widget is not in the panel, it will be set to null.
Parameters
- value: null | Widget
Returns void
- Defined in packages/widgets/src/tabpanel.ts:140

dataset

get dataset(): DOMStringMap
The dataset for the widget's DOM node.

Returns DOMStringMap
Inherited from Widget.dataset
- Defined in packages/widgets/src/widget.ts:163

disposed

get disposed(): ISignal<this, void>
A signal emitted when the widget is disposed.

Returns ISignal<this, void>
Inherited from Widget.disposed
- Defined in packages/widgets/src/widget.ts:90

hiddenMode

get hiddenMode(): HiddenMode
Get the method for hiding the widget.

Returns HiddenMode
Inherited from Widget.hiddenMode
- Defined in packages/widgets/src/widget.ts:170
set hiddenMode(value: HiddenMode): void
Set the method for hiding the widget.
Parameters
- value: HiddenMode
Returns void
Inherited from Widget.hiddenMode
- Defined in packages/widgets/src/widget.ts:177

id

get id(): string
Get the id of the widget's DOM node.

Returns string
Inherited from Widget.id
- Defined in packages/widgets/src/widget.ts:149
set id(value: string): void
Set the id of the widget's DOM node.
Parameters
- value: string
Returns void
Inherited from Widget.id
- Defined in packages/widgets/src/widget.ts:156

isAttached

get isAttached(): boolean
Test whether the widget's node is attached to the DOM.

Returns boolean
Inherited from Widget.isAttached
- Defined in packages/widgets/src/widget.ts:109

isDisposed

get isDisposed(): boolean
Test whether the widget has been disposed.

Returns boolean
Inherited from Widget.isDisposed
- Defined in packages/widgets/src/widget.ts:102

isHidden

get isHidden(): boolean
Test whether the widget is explicitly hidden.

Returns boolean
Inherited from Widget.isHidden
- Defined in packages/widgets/src/widget.ts:116

isVisible

get isVisible(): boolean
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
Inherited from Widget.isVisible
- Defined in packages/widgets/src/widget.ts:127

layout

get layout(): null | Layout
Get the layout for the widget.

Returns null | Layout
Inherited from Widget.layout
- Defined in packages/widgets/src/widget.ts:243
set layout(value: null | Layout): void
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: null | Layout
Returns void
Inherited from Widget.layout
- Defined in packages/widgets/src/widget.ts:256

parent

get parent(): null | Widget
Get the parent of the widget.

Returns null | Widget
Inherited from Widget.parent
- Defined in packages/widgets/src/widget.ts:204
set parent(value: null | Widget): void
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: null | Widget
Returns void
Inherited from Widget.parent
- Defined in packages/widgets/src/widget.ts:219

tabPlacement

get tabPlacement(): TabPlacement
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 packages/widgets/src/tabpanel.ts:186
set tabPlacement(value: TabPlacement): void
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
- Defined in packages/widgets/src/tabpanel.ts:196

tabsMovable

get tabsMovable(): boolean
Get the whether the tabs are movable by the user.

Notes

Tabs can always be moved programmatically.

Returns boolean
- Defined in packages/widgets/src/tabpanel.ts:150
set tabsMovable(value: boolean): void
Set the whether the tabs are movable by the user.

Notes

Tabs can always be moved programmatically.
Parameters
- value: boolean
Returns void
- Defined in packages/widgets/src/tabpanel.ts:160

title

get title(): Title<Widget>
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>
Inherited from Widget.title
- Defined in packages/widgets/src/widget.ts:142

widgets

get widgets(): readonly Widget[]
A read-only array of the widgets in the panel.

Returns readonly Widget[]
- Defined in packages/widgets/src/tabpanel.ts:244

Methods

`Private` _onCurrentChanged

_onCurrentChanged(sender: TabBar<Widget>, args: TabBar.ICurrentChangedArgs<Widget>): void
Handle the currentChanged signal from the tab bar.
Parameters
- sender: TabBar<Widget>
- args: TabBar.ICurrentChangedArgs<Widget>
Returns void
- Defined in packages/widgets/src/tabpanel.ts:297

`Private` _onTabActivateRequested

_onTabActivateRequested(sender: TabBar<Widget>, args: ITabActivateRequestedArgs<Widget>): void
Handle the tabActivateRequested signal from the tab bar.
Parameters
- sender: TabBar<Widget>
- args: ITabActivateRequestedArgs<Widget>
Returns void
- Defined in packages/widgets/src/tabpanel.ts:342

`Private` _onTabAddRequested

_onTabAddRequested(sender: TabBar<Widget>, args: void): void
Handle the tabAddRequested signal from the tab bar.
Parameters
- sender: TabBar<Widget>
- args: void
Returns void
- Defined in packages/widgets/src/tabpanel.ts:335

`Private` _onTabCloseRequested

_onTabCloseRequested(sender: TabBar<Widget>, args: ITabCloseRequestedArgs<Widget>): void
Handle the tabCloseRequested signal from the tab bar.
Parameters
- sender: TabBar<Widget>
- args: ITabCloseRequestedArgs<Widget>
Returns void
- Defined in packages/widgets/src/tabpanel.ts:352

`Private` _onTabMoved

_onTabMoved(sender: TabBar<Widget>, args: ITabMovedArgs<Widget>): void
Handle the tabMoved signal from the tab bar.
Parameters
- sender: TabBar<Widget>
- args: ITabMovedArgs<Widget>
Returns void
- Defined in packages/widgets/src/tabpanel.ts:362

`Private` _onWidgetRemoved

_onWidgetRemoved(sender: StackedPanel, widget: Widget): void
Handle the widgetRemoved signal from the stacked panel.
Parameters
- sender: StackedPanel
- widget: Widget
Returns void
- Defined in packages/widgets/src/tabpanel.ts:372

activate

activate(): void
Post an 'activate-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void
Inherited from Widget.activate
- Defined in packages/widgets/src/widget.ts:396

addClass

addClass(name: string): void
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
Inherited from Widget.addClass
- Defined in packages/widgets/src/widget.ts:326

addWidget

addWidget(widget: Widget): void
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
- Defined in packages/widgets/src/tabpanel.ts:258

children

children(): IterableIterator<Widget>
Create an iterator over the widget's children.

Returns
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.

Returns IterableIterator<Widget>
Inherited from Widget.children
- Defined in packages/widgets/src/widget.ts:283

clearFlag

clearFlag(flag: Flag): void
Clear the given widget flag.

Notes

This will not typically be called directly by user code.
Parameters
- flag: Flag
Returns void
Inherited from Widget.clearFlag
- Defined in packages/widgets/src/widget.ts:506

close

close(): void
Send a 'close-request' message to the widget.

Notes

This is a simple convenience method for sending the message.

Returns void
Inherited from Widget.close
- Defined in packages/widgets/src/widget.ts:406

contains

contains(widget: Widget): boolean
Test whether a widget is a descendant of this widget.

Returns
true if the widget is a descendant, false otherwise.
Parameters
- widget: Widget
  
  The descendant widget of interest.
Returns boolean
Inherited from Widget.contains
- Defined in packages/widgets/src/widget.ts:296

dispose

dispose(): void
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
Inherited from Widget.dispose
- Defined in packages/widgets/src/widget.ts:55

fit

fit(): void
Post a 'fit-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void
Inherited from Widget.fit
- Defined in packages/widgets/src/widget.ts:386

hasClass

hasClass(name: string): boolean
Test whether the widget's DOM node has the given class name.

Returns
true if the node has the class, false otherwise.
Parameters
- name: string
  
  The class name of interest.
Returns boolean
Inherited from Widget.hasClass
- Defined in packages/widgets/src/widget.ts:312

hide

hide(): void
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
Inherited from Widget.hide
- Defined in packages/widgets/src/widget.ts:445

insertWidget

insertWidget(index: number, widget: Widget): void
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
- Defined in packages/widgets/src/tabpanel.ts:274

`Protected` notifyLayout

notifyLayout(msg: Message): void
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
Inherited from Widget.notifyLayout
- Defined in packages/widgets/src/widget.ts:604

`Protected` onActivateRequest

onActivateRequest(msg: Message): void
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
Inherited from Widget.onActivateRequest
- Defined in packages/widgets/src/widget.ts:654

`Protected` onAfterAttach

onAfterAttach(msg: Message): void
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
Inherited from Widget.onAfterAttach
- Defined in packages/widgets/src/widget.ts:702

`Protected` onAfterDetach

onAfterDetach(msg: Message): void
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
Inherited from Widget.onAfterDetach
- Defined in packages/widgets/src/widget.ts:718

`Protected` onAfterHide

onAfterHide(msg: Message): void
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
Inherited from Widget.onAfterHide
- Defined in packages/widgets/src/widget.ts:686

`Protected` onAfterShow

onAfterShow(msg: Message): void
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
Inherited from Widget.onAfterShow
- Defined in packages/widgets/src/widget.ts:670

`Protected` onBeforeAttach

onBeforeAttach(msg: Message): void
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
Inherited from Widget.onBeforeAttach
- Defined in packages/widgets/src/widget.ts:694

`Protected` onBeforeDetach

onBeforeDetach(msg: Message): void
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
Inherited from Widget.onBeforeDetach
- Defined in packages/widgets/src/widget.ts:710

`Protected` onBeforeHide

onBeforeHide(msg: Message): void
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
Inherited from Widget.onBeforeHide
- Defined in packages/widgets/src/widget.ts:678

`Protected` onBeforeShow

onBeforeShow(msg: Message): void
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
Inherited from Widget.onBeforeShow
- Defined in packages/widgets/src/widget.ts:662

`Protected` onChildAdded

onChildAdded(msg: ChildMessage): void
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
Inherited from Widget.onChildAdded
- Defined in packages/widgets/src/widget.ts:726

`Protected` onChildRemoved

onChildRemoved(msg: ChildMessage): void
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
Inherited from Widget.onChildRemoved
- Defined in packages/widgets/src/widget.ts:734

`Protected` onCloseRequest

onCloseRequest(msg: Message): void
A message handler invoked on a 'close-request' message.

Notes

The default implementation unparents or detaches the widget.
Parameters
- msg: Message
Returns void
Inherited from Widget.onCloseRequest
- Defined in packages/widgets/src/widget.ts:616

`Protected` onFitRequest

onFitRequest(msg: Message): void
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
Inherited from Widget.onFitRequest
- Defined in packages/widgets/src/widget.ts:646

`Protected` onResize

onResize(msg: ResizeMessage): void
A message handler invoked on a 'resize' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: ResizeMessage
Returns void
Inherited from Widget.onResize
- Defined in packages/widgets/src/widget.ts:630

`Protected` onUpdateRequest

onUpdateRequest(msg: Message): void
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
Inherited from Widget.onUpdateRequest
- Defined in packages/widgets/src/widget.ts:638

processMessage

processMessage(msg: Message): void
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
Inherited from Widget.processMessage
- Defined in packages/widgets/src/widget.ts:518

removeClass

removeClass(name: string): void
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
Inherited from Widget.removeClass
- Defined in packages/widgets/src/widget.ts:340

setFlag

setFlag(flag: Flag): void
Set the given widget flag.

Notes

This will not typically be called directly by user code.
Parameters
- flag: Flag
Returns void
Inherited from Widget.setFlag
- Defined in packages/widgets/src/widget.ts:496

setHidden

setHidden(hidden: boolean): void
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
Inherited from Widget.setHidden
- Defined in packages/widgets/src/widget.ts:472

show

show(): void
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
Inherited from Widget.show
- Defined in packages/widgets/src/widget.ts:418

testFlag

testFlag(flag: Flag): boolean
Test whether the given widget flag is set.

Notes

This will not typically be called directly by user code.
Parameters
- flag: Flag
Returns boolean
Inherited from Widget.testFlag
- Defined in packages/widgets/src/widget.ts:486

toggleClass

toggleClass(name: string, force?: boolean): boolean
Toggle a class name on the widget's DOM node.

Returns
true if the class is now present, false otherwise.

Notes

The class name must not contain whitespace.
Parameters
- name: string
  
  The class name to toggle on the node.
- Optional force: boolean
  
  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
Inherited from Widget.toggleClass
- Defined in packages/widgets/src/widget.ts:358

update

update(): void
Post an 'update-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void
Inherited from Widget.update
- Defined in packages/widgets/src/widget.ts:376

Class TabPanel

Notes

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

options: TabPanel.IOptions = {}

Returns TabPanel

Properties

Private _addRequested

Private _currentChanged

Private _tabPlacement

Readonly node

Readonly stackedPanel

Notes

Readonly tabBar

Notes

Accessors

addButtonEnabled

Returns boolean

Parameters

value: boolean

Returns void

addRequested

Returns ISignal<this, TabBar<Widget>>

currentChanged

Notes

Returns ISignal<this, TabPanel.ICurrentChangedArgs>

currentIndex

Notes

Returns number

Notes

Parameters

value: number

Returns void

currentWidget

Notes

Returns null | Widget

Notes

Parameters

value: null | Widget

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

Returns null | Layout

Notes

Parameters

value: null | Layout

Returns void

parent

Returns null | Widget

Notes

Parameters

`Private` _addRequested

`Private` _currentChanged

`Private` _tabPlacement

`Readonly` node

`Readonly` stackedPanel

`Readonly` tabBar

`Private` _onCurrentChanged

`Private` _onTabActivateRequested

`Private` _onTabAddRequested

`Private` _onTabCloseRequested

`Private` _onTabMoved

`Private` _onWidgetRemoved