Class TopBar

TopBar is a horizontal bar for UI components, typically placed above the canvas. Use addButton, addSlider, addNumberInput to add controls.

Hierarchy

UIBar
- TopBar

Index

Constructors

Properties

components element isEnabled isVisible

Methods

addButton addHTML addNumberInput addSlider addTitle clear disable enable getComponents getElement getIsEnabled getIsVisible hide setAlignment setColor show

Constructors

constructor

new TopBar(): TopBar
Returns TopBar
Overrides UIBar.constructor
- Defined in UIBar.ts:152

Properties

`Protected`components

components: UIComponent[] = []

`Protected`element

element: HTMLElement

`Protected`isEnabled

isEnabled: boolean = true

`Protected`isVisible

isVisible: boolean = true

Methods

addButton

addButton(config: ButtonConfig): Button
Add a button to the bar
Parameters
- config: ButtonConfig
Returns Button
Inherited from UIBar.addButton
- Defined in UIBar.ts:97

addHTML

addHTML(html: string | HTMLElement): HTMLElement
Add arbitrary HTML or an HTMLElement to the bar.
Parameters
- html: string | HTMLElement
  HTML string or HTMLElement
Returns HTMLElement
Inherited from UIBar.addHTML
- Defined in UIBar.ts:81

addNumberInput

addNumberInput(config: NumberInputConfig): NumberInput
Add a number input to the bar
Parameters
- config: NumberInputConfig
Returns NumberInput
Inherited from UIBar.addNumberInput
- Defined in UIBar.ts:107

addSlider

addSlider(config: SliderConfig): Slider
Add a slider to the bar
Parameters
- config: SliderConfig
Returns Slider
Inherited from UIBar.addSlider
- Defined in UIBar.ts:117

addTitle

addTitle(text: string, options?: Partial<CSSStyleDeclaration>): HTMLElement
Add a title (non-interactive text) to the bar. Inherits bar foreground/background colors.
Parameters
- text: string
  Title text
- Optionaloptions: Partial<CSSStyleDeclaration>
  Optional style overrides
Returns HTMLElement
Inherited from UIBar.addTitle
- Defined in UIBar.ts:57

clear

clear(): this
Remove all components from the bar

Returns this
Inherited from UIBar.clear
- Defined in UIBar.ts:127

disable

disable(): this
Disable the component

Returns this
Inherited from UIBar.disable
- Defined in UIComponent.ts:49

enable

enable(): this
Enable the component

Returns this
Inherited from UIBar.enable
- Defined in UIComponent.ts:36

getComponents

getComponents(): UIComponent[]
Get all components in the bar

Returns UIComponent[]
Inherited from UIBar.getComponents
- Defined in UIBar.ts:141

getElement

getElement(): HTMLElement
Get the underlying DOM element

Returns HTMLElement
Inherited from UIBar.getElement
- Defined in UIComponent.ts:62

getIsEnabled

getIsEnabled(): boolean
Check if the component is enabled

Returns boolean
Inherited from UIBar.getIsEnabled
- Defined in UIComponent.ts:76

getIsVisible

getIsVisible(): boolean
Check if the component is visible

Returns boolean
Inherited from UIBar.getIsVisible
- Defined in UIComponent.ts:69

hide

hide(): this
Hide the component

Returns this
Inherited from UIBar.hide
- Defined in UIComponent.ts:27

setAlignment

setAlignment(
    justifyContent:
        | "start"
        | "center"
        | "end"
        | "space-between"
        | "space-around"
        | "space-evenly",
): this
Set alignment of items within the bar.
Parameters
- justifyContent: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly"
  Justify content value (CSS flexbox)
Returns this
Inherited from UIBar.setAlignment
- Defined in UIBar.ts:38

setColor

setColor(foreground: string, background: string): this
Set foreground and background colors for the bar using CSS variables.
Parameters
- foreground: string
  Text color
- background: string
  Background color
Returns this
Inherited from UIBar.setColor
- Defined in UIBar.ts:28

show

show(): this
Show the component

Returns this
Inherited from UIBar.show
- Defined in UIComponent.ts:18