Class TabBarSvg<T>

a widget which displays titles as a single row or column of tabs. Tweaked to use an inline svg as the close icon

Type Parameters

  • T

Hierarchy

Constructors

constructor

Properties

allowDeselect insertBehavior node removeBehavior renderer tabsMovable translator

Accessors

addButtonEnabled addButtonNode addRequested contentNode currentChanged currentIndex currentTitle dataset disposed document hiddenMode id isAttached isDisposed isHidden isVisible layout name orientation parent tabActivateRequested tabCloseRequested tabDetachRequested tabMoved title titles titlesEditable

Methods

activate addClass addTab children clearFlag clearTabs close contains dispose fit handleEvent hasClass hide insertTab notifyLayout onActivateRequest onAfterAttach onAfterDetach onAfterHide onAfterShow onBeforeAttach onBeforeDetach onBeforeHide onBeforeShow onChildAdded onChildRemoved onCloseRequest onFitRequest onResize onUpdateRequest processMessage releaseMouse removeClass removeTab removeTabAt setFlag setHidden show testFlag toggleClass update

Constructors

constructor

Properties

allowDeselect

allowDeselect: boolean

Whether a tab can be deselected by the user.

Notes

Tabs can be always be deselected programmatically.

insertBehavior

insertBehavior: InsertBehavior

The selection behavior when inserting a tab.

Readonlynode

node: HTMLElement

Get the DOM node owned by the widget.

removeBehavior

removeBehavior: RemoveBehavior

The selection behavior when removing a tab.

Readonlyrenderer

renderer: IRenderer<T>

The renderer used by the tab bar.

tabsMovable

tabsMovable: boolean

Whether the tabs are movable by the user.

Notes

Tabs can always be moved programmatically.

Statictranslator

translator: null | ITranslator = null

Translator object

Accessors

addButtonEnabled

  • get addButtonEnabled(): boolean

  • Whether the add button is enabled.

    Returns boolean

  • set addButtonEnabled(value: boolean): void

  • Set whether the add button is enabled.

    Parameters

    • value: boolean

    Returns void

addButtonNode

  • get addButtonNode(): HTMLDivElement

  • The tab bar add button node.

    Notes

    This is the node which holds the add button.

    Modifying this node directly can lead to undefined behavior.

    Returns HTMLDivElement

addRequested

  • get addRequested(): ISignal<this, void>

  • A signal emitted when the tab bar add button is clicked.

    Returns ISignal<this, void>

contentNode

  • get contentNode(): HTMLUListElement

  • The tab bar content node.

    Notes

    This is the node which holds the tab nodes.

    Modifying this node directly can lead to undefined behavior.

    Returns HTMLUListElement

currentChanged

  • get currentChanged(): ISignal<this, ICurrentChangedArgs<T>>

  • 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<T>>

currentIndex

  • get currentIndex(): number

  • Get the index of the currently selected tab.

    Notes

    This will be -1 if no tab is selected.

    Returns number

  • set currentIndex(value: number): void

  • Set the index of the currently selected tab.

    Notes

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

    Parameters

    • value: number

    Returns void

currentTitle

  • get currentTitle(): null | Title<T>

  • Get the currently selected title.

    Notes

    This will be null if no tab is selected.

    Returns null | Title<T>

  • set currentTitle(value: null | Title<T>): void

  • Set the currently selected title.

    Notes

    If the title does not exist, the title will be set to null.

    Parameters

    • value: null | Title<T>

    Returns void

dataset

  • get dataset(): DOMStringMap

  • The dataset for the widget's DOM node.

    Returns DOMStringMap

disposed

  • get disposed(): ISignal<this, void>

  • A signal emitted when the widget is disposed.

    Returns ISignal<this, void>

document

  • get document(): Document | ShadowRoot

  • The document to use with the tab bar.

    The default is the global document instance.

    Returns Document | ShadowRoot

hiddenMode

  • get hiddenMode(): HiddenMode

  • Get the method for hiding the widget.

    Returns HiddenMode

  • set hiddenMode(value: HiddenMode): void

  • Set the method for hiding the widget.

    Parameters

    • value: HiddenMode

    Returns void

id

  • get id(): string

  • Get the id of the widget's DOM node.

    Returns string

  • set id(value: string): void

  • Set the id of the widget's DOM node.

    Parameters

    • value: string

    Returns void

isAttached

  • get isAttached(): boolean

  • Test whether the widget's node is attached to the DOM.

    Returns boolean

isDisposed

  • get isDisposed(): boolean

  • Test whether the widget has been disposed.

    Returns boolean

isHidden

  • get isHidden(): boolean

  • Test whether the widget is explicitly hidden.

    Notes

    You should prefer !{@link isVisible} over {@link isHidden} if you want to know if the widget is hidden as this does not test if the widget is hidden because one of its ancestors is hidden.

    Returns boolean

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.

    Since 2.7.0, this does not rely on the Widget.Flag.IsVisible flag. It recursively checks the visibility of all parent widgets.

    Returns boolean

layout

  • get layout(): null | Layout

  • Get the layout for the widget.

    Returns null | Layout

  • 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

name

  • get name(): string

  • Get the name of the tab bar.

    Returns string

  • set name(value: string): void

  • Set the name of the tab bar.

    Parameters

    • value: string

    Returns void

orientation

  • get orientation(): Orientation

  • Get the orientation of the tab bar.

    Notes

    This controls whether the tabs are arranged in a row or column.

    Returns Orientation

  • set orientation(value: Orientation): void

  • Set the orientation of the tab bar.

    Notes

    This controls whether the tabs are arranged in a row or column.

    Parameters

    • value: Orientation

    Returns void

parent

  • get parent(): null | Widget

  • Get the parent of the widget.

    Returns null | Widget

  • 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

    Returns void

tabActivateRequested

  • get tabActivateRequested(): ISignal<this, ITabActivateRequestedArgs<T>>

  • A signal emitted when a tab is clicked by the user.

    Notes

    If the clicked tab is not the current tab, the clicked tab will be made current and the currentChanged signal will be emitted first.

    This signal is emitted even if the clicked tab is the current tab.

    Returns ISignal<this, ITabActivateRequestedArgs<T>>

tabCloseRequested

  • get tabCloseRequested(): ISignal<this, ITabCloseRequestedArgs<T>>

  • A signal emitted when a tab close icon is clicked.

    Notes

    This signal is not emitted unless the tab title is closable.

    Returns ISignal<this, ITabCloseRequestedArgs<T>>

tabDetachRequested

  • get tabDetachRequested(): ISignal<this, ITabDetachRequestedArgs<T>>

  • A signal emitted when a tab is dragged beyond the detach threshold.

    Notes

    This signal is emitted when the user drags a tab with the mouse, and mouse is dragged beyond the detach threshold.

    The consumer of the signal should call releaseMouse and remove the tab in order to complete the detach.

    This signal is only emitted once per drag cycle.

    Returns ISignal<this, ITabDetachRequestedArgs<T>>

tabMoved

  • get tabMoved(): ISignal<this, ITabMovedArgs<T>>

  • A signal emitted when a tab is moved by the user.

    Notes

    This signal is emitted when a tab is moved by user interaction.

    This signal is not emitted when a tab is moved programmatically.

    Returns ISignal<this, ITabMovedArgs<T>>

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>

titles

  • get titles(): readonly Title<T>[]

  • A read-only array of the titles in the tab bar.

    Returns readonly Title<T>[]

titlesEditable

  • get titlesEditable(): boolean

  • Whether the titles can be user-edited.

    Returns boolean

  • set titlesEditable(value: boolean): void

  • Set whether titles can be user edited.

    Parameters

    • value: boolean

    Returns void

Methods

activate

  • activate(): void

  • 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

  • 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

addTab

  • addTab(value: Title<T> | IOptions<T>): Title<T>

  • Add a tab to the end of the tab bar.

    Parameters

    • value: Title<T> | IOptions<T>

      The title which holds the data for the tab, or an options object to convert to a title.

    Returns Title<T>

    The title object added to the tab bar.

    Notes

    If the title is already added to the tab bar, it will be moved.

children

  • children(): IterableIterator<Widget>

  • Create an iterator over the widget's children.

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

  • Clear the given widget flag.

    Notes

    This will not typically be called directly by user code.

    Since 2.7.0, Widget.Flag.IsVisible is deprecated. It will be removed in a future version.

    Parameters

    • flag: Flag

    Returns void

clearTabs

  • clearTabs(): void

  • Remove all tabs from the tab bar.

    Returns void

close

  • close(): void

  • 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

  • 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

  • Dispose of the resources held by the widget.

    Returns void

fit

  • fit(): void

  • Post a 'fit-request' message to the widget.

    Notes

    This is a simple convenience method for posting the message.

    Returns void

handleEvent

  • handleEvent(event: Event): void

  • Handle the DOM events for the tab bar.

    Parameters

    • event: Event

      The DOM event sent to the tab bar.

      Notes

      This method implements the DOM EventListener interface and is called in response to events on the tab bar's DOM node.

      This should not be called directly by user code.

    Returns void

hasClass

  • hasClass(name: string): boolean

  • 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

  • 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

insertTab

  • insertTab(index: number, value: Title<T> | IOptions<T>): Title<T>

  • Insert a tab into the tab bar at the specified index.

    Parameters

    • index: number

      The index at which to insert the tab.

    • value: Title<T> | IOptions<T>

      The title which holds the data for the tab, or an options object to convert to a title.

    Returns Title<T>

    The title object added to the tab bar.

    Notes

    The index will be clamped to the bounds of the tabs.

    If the title is already added to the tab bar, it will be moved.

ProtectednotifyLayout

  • 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

ProtectedonActivateRequest

  • 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

ProtectedonAfterAttach

  • 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

ProtectedonAfterDetach

  • onAfterDetach(msg: Message): void

  • A message handler invoked on an 'after-detach' message.

    Parameters

    • msg: Message

    Returns void

ProtectedonAfterHide

  • 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

ProtectedonAfterShow

  • 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

ProtectedonBeforeAttach

  • onBeforeAttach(msg: Message): void

  • A message handler invoked on a 'before-attach' message.

    Parameters

    • msg: Message

    Returns void

ProtectedonBeforeDetach

  • 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

ProtectedonBeforeHide

  • 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

ProtectedonBeforeShow

  • 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

ProtectedonChildAdded

  • 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

ProtectedonChildRemoved

  • 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

ProtectedonCloseRequest

  • 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

ProtectedonFitRequest

  • 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

ProtectedonResize

  • 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

ProtectedonUpdateRequest

  • onUpdateRequest(msg: Message): void

  • A message handler invoked on an 'update-request' message.

    Parameters

    • msg: Message

    Returns void

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

releaseMouse

  • releaseMouse(): void

  • Release the mouse and restore the non-dragged tab positions.

    Notes

    This will cause the tab bar to stop handling mouse events and to restore the tabs to their non-dragged positions.

    Returns void

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

removeTab

  • removeTab(title: Title<T>): void

  • Remove a tab from the tab bar.

    Parameters

    • title: Title<T>

      The title for the tab to remove.

      Notes

      This is a no-op if the title is not in the tab bar.

    Returns void

removeTabAt

  • removeTabAt(index: number): void

  • Remove the tab at a given index from the tab bar.

    Parameters

    • index: number

      The index of the tab to remove.

      Notes

      This is a no-op if the index is out of range.

    Returns void

setFlag

  • setFlag(flag: Flag): void

  • Set the given widget flag.

    Notes

    This will not typically be called directly by user code.

    Since 2.7.0, Widget.Flag.IsVisible is deprecated. It will be removed in a future version.

    Parameters

    • flag: Flag

    Returns void

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

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

testFlag

  • testFlag(flag: Flag): boolean

  • Test whether the given widget flag is set.

    Notes

    This will not typically be called directly by user code.

    Since 2.7.0, Widget.Flag.IsVisible is deprecated. It will be removed in a future version.

    Parameters

    • flag: Flag

    Returns boolean

toggleClass

  • toggleClass(name: string, force?: boolean): boolean

  • Toggle a class name on the widget's DOM node.

    Parameters

    • name: string

      The class name to toggle on the node.

    • Optionalforce: 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

    true if the class is now present, false otherwise.

    Notes

    The class name must not contain whitespace.

update

  • update(): void

  • Post an 'update-request' message to the widget.

    Notes

    This is a simple convenience method for posting the message.

    Returns void

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods