Contents

PCUI API: All Pages

The API reference of @playcanvas/pcui 6.1.4: the UI components of browser-based tools such as the PlayCanvas Editor, and the bindings that connect them to observer data.

The same pages as Markdown, for AI agents: llms-full.txt.

Contents

ArrayInput

Class · extends Element · implements IFocusable, IBindable<unknown[]>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ArrayInput/index.ts#L69

Element that allows editing an array of values.

Constructors

constructor

new ArrayInput(args?: Readonly<ArrayInputArgs>)

Creates a new ArrayInput.

Parameters

Accessors

binding

get binding(): BindingBase
set binding(value: BindingBase)

Sets the Binding object for the element.

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Gets whether array elements should flash when their values change.

value

get value(): unknown[]
set value(value: unknown[])

Gets the value of the ArrayInput as an array.

values

set values(values: unknown[][])

Sets multiple array values on the ArrayInput.

Methods

blur

blur(): void

Unfocus the element

destroy

destroy(): void

Destroys the Element and its events.

focus

focus(): void

Focus on the element. If the input contains text and select is provided, the text will be selected on focus.

forEachArrayElement

forEachArrayElement(fn: (element: Element, index: number) => false | void): void

Executes the specified function for each array element.

Parameters

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers and paths to the Element's data binding.

Parameters

unlink

unlink(): void

Unlinks the Element from its observers.

Events

EVENT_LINK_ELEMENT

static readonly EVENT_LINK_ELEMENT: "linkElement" = 'linkElement'

Fired when an array element is linked to observers.

Example

arrayInput.on('linkElement', (element: Element, index: number, path: string) => {
    console.log(`Element ${index} is now linked to ${path}`);
});

EVENT_UNLINK_ELEMENT

static readonly EVENT_UNLINK_ELEMENT: "unlinkElement" = 'unlinkElement'

Fired when an array element is unlinked from observers.

Example

arrayInput.on('unlinkElement', (element: Element, index: number) => {
    console.log(`Element ${index} is now unlinked`);
});

Inherited from Element

Inherited from VectorInput

BindingBase

Class · extends Events

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingBase/index.ts#L40

Base class for data binding between IBindable Elements and Observers.

Constructors

constructor

new BindingBase(args: Readonly<BindingBaseArgs>)

Creates a new binding.

Parameters

Accessors

applyingChange

get applyingChange(): boolean
set applyingChange(value: boolean)

Gets whether the binding is currently applying a change, either to the observers or the element.

element

get element(): IBindable<unknown>
set element(value: IBindable<unknown>)

Gets the element.

historyCombine

get historyCombine(): boolean
set historyCombine(value: boolean)

Gets whether to combine history actions when applying changes to observers.

historyEnabled

get historyEnabled(): boolean
set historyEnabled(value: boolean)

Gets whether history is enabled for the binding.

historyName

get historyName(): string
set historyName(value: string)

Gets the name of the history action when applying changes to observers.

historyPostfix

get historyPostfix(): string
set historyPostfix(value: string)

Gets the string to postfix historyName with.

historyPrefix

get historyPrefix(): string
set historyPrefix(value: string)

Gets the string to prefix historyName with.

linked

get linked(): boolean

Gets whether the binding is linked to observers.

observers

get observers(): Observer[]

Gets the linked observers.

paths

get paths(): string[]

Gets the linked paths.

Methods

addValue

addValue(value: unknown): void

Adds (inserts) a value to the linked observers at the linked paths.

Parameters

addValues

addValues(values: unknown[]): void

Adds (inserts) multiple values to the linked observers at the linked paths.

Parameters

clone

clone(): BindingBase

Clones the binding. To be implemented by derived classes.

Returns BindingBase

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers to the specified paths.

Parameters

removeValue

removeValue(value: unknown): void

Removes a value from the linked observers at the linked paths.

Parameters

removeValues

removeValues(values: unknown[]): void

Removes multiple values from the linked observers from the linked paths.

Parameters

setValue

setValue(value: unknown): void

Sets a value to the linked observers at the linked paths.

Parameters

setValues

setValues(values: unknown[]): void

Sets an array of values to the linked observers at the linked paths.

Parameters

unlink

unlink(): void

Unlinks the observers and paths.

BindingElementToObservers

Class · extends BindingBase

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingElementToObservers/index.ts#L9

Provides one way binding between an IBindable element and Observers. Any changes from the element will be propagated to the observers.

Methods

addValue

addValue(value: unknown): void

Adds (inserts) a value to the linked observers at the linked paths.

Parameters

addValues

addValues(values: unknown[]): void

Adds (inserts) multiple values to the linked observers at the linked paths.

Parameters

clone

clone(): BindingElementToObservers

Clone the binding and return a new instance.

Returns BindingElementToObservers

removeValue

removeValue(value: unknown): void

Removes a value from the linked observers at the linked paths.

Parameters

removeValues

removeValues(values: unknown[]): void

Removes multiple values from the linked observers from the linked paths.

Parameters

setValue

setValue(value: unknown): void

Sets a value to the linked observers at the linked paths.

Parameters

setValues

setValues(values: unknown[]): void

Sets an array of values to the linked observers at the linked paths.

Parameters

Inherited from BindingBase

Inherited from BindingObserversToElement

BindingObserversToElement

Class · extends BindingBase

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingObserversToElement/index.ts#L21

Provides one way binding between Observers and an IBindable element and Observers. Any changes from the observers will be propagated to the element.

Constructors

constructor

new BindingObserversToElement(args?: Readonly<BindingObserversToElementArgs>)

Creates a new BindingObserversToElement instance.

Parameters

Methods

clone

clone(): BindingObserversToElement

Clone the BindingObserversToElement instance.

Returns BindingObserversToElement

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers to the specified paths.

Parameters

unlink

unlink(): void

Unlink the binding from its set of observers.

Inherited from BindingBase

BindingTwoWay

Class · extends BindingBase

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingTwoWay/index.ts#L28

Provides two way data binding between Observers and IBindable elements. This means that when the value of the Observers changes the IBindable will be updated and vice versa.

Constructors

constructor

new BindingTwoWay(args?: Readonly<BindingTwoWayArgs>)

Creates a new BindingTwoWay instance.

Parameters

Accessors

applyingChange

get applyingChange(): boolean
set applyingChange(value: boolean)

Sets whether the binding is currently applying a change, either to the observers or the element.

element

get element(): IBindable<unknown>
set element(value: IBindable<unknown>)

Sets the element.

historyCombine

get historyCombine(): boolean
set historyCombine(value: boolean)

Sets whether to combine history actions when applying changes to observers. This is assuming a history module is being used.

historyEnabled

get historyEnabled(): boolean
set historyEnabled(value: boolean)

Sets whether history is enabled for the binding. A valid history object must have been provided first.

historyPostfix

get historyPostfix(): string
set historyPostfix(value: string)

Sets the string to postfix historyName with.

historyPrefix

get historyPrefix(): string
set historyPrefix(value: string)

Sets the string to prefix historyName with.

Methods

addValue

addValue(value: unknown): void

Adds (inserts) a value to the linked observers at the linked paths.

Parameters

addValues

addValues(values: unknown[]): void

Adds (inserts) multiple values to the linked observers at the linked paths.

Parameters

clone

clone(): BindingTwoWay

Clones the binding. To be implemented by derived classes.

Returns BindingTwoWay

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers to the specified paths.

Parameters

removeValue

removeValue(value: unknown): void

Removes a value from the linked observers at the linked paths.

Parameters

removeValues

removeValues(values: unknown[]): void

Removes multiple values from the linked observers from the linked paths.

Parameters

setValue

setValue(value: unknown): void

Sets a value to the linked observers at the linked paths.

Parameters

setValues

setValues(values: unknown[]): void

Sets an array of values to the linked observers at the linked paths.

Parameters

unlink

unlink(): void

Unlinks the observers and paths.

Inherited from BindingBase

BooleanInput

Class · extends Element · implements IBindable<boolean>, IFocusable

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/BooleanInput/index.ts#L26

A checkbox element.

Constructors

constructor

new BooleanInput(args?: Readonly<BooleanInputArgs>)

Creates a new BooleanInput.

Parameters

Accessors

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Sets whether the input should flash on changes.

value

get value(): boolean
set value(value: boolean)

Sets the value of the Element.

values

set values(values: boolean[])

Sets multiple values on the Element. It is up to the Element to determine how to display them.

Methods

blur

blur(): void

Unfocus the element

destroy

destroy(): void

Destroys the Element and its events.

focus

focus(): void

Focus on the element. If the input contains text and select is provided, the text will be selected on focus.

Inherited from Element

Inherited from VectorInput

Button

Class · extends Element

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Button/index.ts#L33

User input with click interaction.

Constructors

constructor

new Button(args?: Readonly<ButtonArgs>)

Creates a new Button.

Parameters

Accessors

icon

get icon(): string
set icon(value: string)

Gets the CSS code for an icon for the button.

size

get size(): string
set size(value: string)

Gets the 'size' type of the button.

text

get text(): string
set text(value: string)

Gets the text of the button.

Methods

blur

blur(): void

Unfocuses (blurs) the button.

destroy

destroy(): void

Destroys the Element and its events.

focus

focus(): void

Focuses the button.

Inherited from Element

Inherited from VectorInput

Canvas

Class · extends Element

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Canvas/index.ts#L20

Represents a Canvas.

Constructors

constructor

new Canvas(args?: Readonly<CanvasArgs>)

Creates a new Canvas.

Parameters

Accessors

height

get height(): number
set height(value: number)

Gets the height of the canvas.

pixelHeight

get pixelHeight(): number

Gets the pixel height of the canvas.

pixelRatio

get pixelRatio(): number

Gets the pixel ratio of the canvas.

pixelWidth

get pixelWidth(): number

Gets the pixel height of the canvas.

width

get width(): number
set width(value: number)

Gets the width of the canvas.

Methods

resize

resize(width: number, height: number): void

Resize the canvas using the given width and height parameters.

Parameters

Inherited from Element

Inherited from VectorInput

Code

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Code/index.ts#L22

Represents a code block.

Constructors

constructor

new Code(args?: Readonly<CodeArgs>)

Creates a new Code.

Parameters

Accessors

text

get text(): string
set text(value: string)

Gets the text to display in the code block.

Inherited from Container

Inherited from VectorInput

ColorPicker

Class · extends Element · implements IBindable<number[]>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ColorPicker/index.ts#L30

Represents a color picker.

Constructors

constructor

new ColorPicker(args?: Readonly<ColorPickerArgs>)

Creates a new ColorPicker.

Parameters

Accessors

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Sets whether the input should flash on changes.

value

get value(): number[]
set value(value: number[])

Sets the value of the Element.

values

set values(values: number[][])

Sets multiple values on the Element. It is up to the Element to determine how to display them.

Methods

destroy

destroy(): void

Destroys the Element and its events.

Inherited from Element

Container

Class · extends Element

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Container/index.ts#L62

A container is the basic building block for Elements that are grouped together. A container can contain any other element including other containers.

Constructors

constructor

new Container(args?: Readonly<ContainerArgs>)

Creates a new Container.

Parameters

Accessors

domContent

get domContent(): HTMLElement
set domContent(value: HTMLElement)

Gets the internal DOM element used as a the container of all children.

flex

get flex(): boolean
set flex(value: boolean)

Gets whether the Element supports flex layout.

grid

get grid(): boolean
set grid(value: boolean)

Gets whether the Element supports the grid layout.

resizable

get resizable(): string
set resizable(value: string)

Gets whether the Element is resizable and where the resize handle is located.

resizeMax

get resizeMax(): number
set resizeMax(value: number)

Gets the maximum size the Element can take when resized in pixels.

resizeMin

get resizeMin(): number
set resizeMin(value: number)

Gets the minimum size the Element can take when resized in pixels.

scrollable

get scrollable(): boolean
set scrollable(value: boolean)

Gets whether the Element should be scrollable.

Methods

_buildDomNode

protected _buildDomNode(node: DomNode): Element

If the current node contains a root, recursively append its children to this node and return it. Otherwise return the current node. Also add each child to the parent under its keyed name.

Parameters

Returns Element: The recursively appended element node.

append

append(element: Child): void

Appends an element to the container.

Parameters

appendAfter

appendAfter(element: Child, referenceElement: Child): void

Appends an element to the container just after the specified reference element.

Parameters

appendBefore

appendBefore(element: Child, referenceElement: Child): void

Appends an element to the container before the specified reference element.

Parameters

buildDom

buildDom(dom: DomNode[]): void

Takes an array of pcui elements, each of which can contain their own child elements, and appends them to this container. These child elements are traversed recursively using _buildDomNode.

Parameters

Example

buildDom([
    {
        child1: pcui.Label()
    },
    {
        root: {
            container1: pcui.Container()
        },
        children: [
            {
                child2: pcui.Label()
            },
            {
                child3: pcui.Label()
            }
        ]
    }
]);

clear

clear(): void

Clears all children from the container.

destroy

destroy(): void

Destroys the Element and its events.

forEachChild

forEachChild(fn: (child: Element, index: number) => false | void): void

Iterate over each child element using the supplied function. To early out of the iteration, return false from the function.

Parameters

move

move(element: Element, index: number): void

Moves the specified child at the specified index.

Parameters

prepend

prepend(element: Child): void

Inserts an element in the beginning of the container.

Parameters

remove

remove(element: Element): void

Removes the specified child element from the container.

Parameters

resize

resize(x?: number, y?: number): void

Resize the container.

Parameters

Events

EVENT_APPEND

static readonly EVENT_APPEND: "append" = 'append'

Fired when a child Element gets added to the Container.

Example

const container = new Container();
container.on('append', (element: Element) => {
    console.log('Element added to container:', element);
});

EVENT_REMOVE

static readonly EVENT_REMOVE: "remove" = 'remove'

Fired when a child Element gets removed from the Container.

Example

const container = new Container();
container.on('remove', (element: Element) => {
    console.log('Element removed from container:', element);
});

EVENT_RESIZE

static readonly EVENT_RESIZE: "resize" = 'resize'

Fired when the container gets resized using the resize handle.

Example

const container = new Container();
container.on('resize', () => {
    console.log('Container resized to:', container.width, container.height, 'px');
});

EVENT_SCROLL

static readonly EVENT_SCROLL: "scroll" = 'scroll'

Fired when the container is scrolled. The native DOM scroll event is passed to the event handler.

Example

const container = new Container();
container.on('scroll', (event: Event) => {
    console.log('Container scrolled:', event);
});

Inherited from Element

Inherited from VectorInput

Divider

Class · extends Element

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Divider/index.ts#L9

Represents a vertical division between two elements.

Constructors

constructor

new Divider(args?: Readonly<ElementArgs>)

Creates a new Divider.

Parameters

Inherited from Element

Element

Class · extends Events

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L286

The base class for all UI elements.

Constructors

constructor

new Element(args?: Readonly<ElementArgs>)

Creates a new Element.

Parameters

Accessors

alignItems

get alignItems(): string
set alignItems(value: string)

Gets the align-items CSS property.

alignSelf

get alignSelf(): string
set alignSelf(value: string)

Gets the align-self CSS property.

binding

get binding(): BindingBase
set binding(value: BindingBase)

Gets the Binding object for the element.

class

get class(): DOMTokenList

Get the DOMTokenList of the underlying DOM element. This is essentially a shortcut to element.dom.classList.

dom

get dom(): HTMLElement

Gets the root DOM node for this Element.

enabled

get enabled(): boolean
set enabled(value: boolean)

Gets whether the Element or its parent chain is enabled or not.

error

get error(): boolean
set error(value: boolean)

Gets whether the Element is in an error state.

flexBasis

get flexBasis(): string
set flexBasis(value: string | number)

Gets the flex-basis CSS property.

flexDirection

get flexDirection(): string
set flexDirection(value: string)

Gets the flex-direction CSS property.

flexGrow

get flexGrow(): string
set flexGrow(value: string | number)

Gets the flex-grow CSS property.

flexShrink

get flexShrink(): string
set flexShrink(value: string | number)

Gets the flex-shrink CSS property.

flexWrap

get flexWrap(): string
set flexWrap(value: string)

Gets the flex-wrap CSS property.

height

get height(): number
set height(value: string | number)

Gets the height of the Element in pixels.

hidden

get hidden(): boolean
set hidden(value: boolean)

Gets whether the Element is hidden.

hiddenToRoot

get hiddenToRoot(): boolean

Gets whether the Element is hidden all the way up to the root. If the Element itself or any of its parents are hidden then this is true.

ignoreParent

get ignoreParent(): boolean
set ignoreParent(value: boolean)

Gets whether the Element will ignore parent events & variable states.

justifyContent

get justifyContent(): string
set justifyContent(value: string)

Gets the justify-content CSS property.

justifySelf

get justifySelf(): string
set justifySelf(value: string)

Gets the justify-self CSS property.

parent

get parent(): Element
set parent(value: Element)

Gets the parent Element.

readOnly

get readOnly(): boolean
set readOnly(value: boolean)

Gets whether the Element is read only.

style

get style(): CSSStyleDeclaration

Shortcut to Element.dom.style.

tabIndex

get tabIndex(): number
set tabIndex(value: number)

Gets the tabIndex of the Element.

width

get width(): number
set width(value: string | number)

Gets the width of the Element in pixels.

Methods

destroy

destroy(): void

Destroys the Element and its events.

flash

flash(): void

Triggers a flash animation on the Element.

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers and paths to the Element's data binding.

Parameters

unlink

unlink(): void

Unlinks the Element from its observers.

create

static create<Type extends Element>(type: string, args: ElementArgs): Type

Creates a new Element of the desired type.

Parameters

Returns Type: The new Element or undefined if type is not found.

register

static register<Type extends Element>(type: string, cls: Object, defaultArguments?: object): void

Parameters

unregister

static unregister(type: string): void

Parameters

Events

EVENT_CLICK

static readonly EVENT_CLICK: "click" = 'click'

Fired when the mouse is clicked on the Element but only if the Element is enabled. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('click', (evt: MouseEvent) => {
    console.log('Element clicked');
});

EVENT_DESTROY

static readonly EVENT_DESTROY: "destroy" = 'destroy'

Fired after the element has been destroyed. Both the DOM element and the owner Element instance are passed as parameters to the event handler.

Example

const element = new Element();
element.on('destroy', (dom: HTMLElement, element: Element) => {
    console.log('Element destroyed');
});

EVENT_DISABLE

static readonly EVENT_DISABLE: "disable" = 'disable'

Fired when the Element gets disabled.

Example

const element = new Element();
element.on('disable', () => {
    console.log('Element disabled');
});

EVENT_ENABLE

static readonly EVENT_ENABLE: "enable" = 'enable'

Fired when the Element gets enabled.

Example

const element = new Element();
element.on('enable', () => {
    console.log('Element enabled');
});

EVENT_HIDE

static readonly EVENT_HIDE: "hide" = 'hide'

Fired when the Element gets hidden.

Example

const element = new Element();
element.on('hide', () => {
    console.log('Element hidden');
});

EVENT_HIDE_TO_ROOT

static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'

Fired when the Element or any of its parent get hidden.

Example

const element = new Element();
element.on('hideToRoot', () => {
    console.log('Element or one of its parents hidden');
});

EVENT_HOVER

static readonly EVENT_HOVER: "hover" = 'hover'

Fired when the mouse starts hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('hover', (evt: MouseEvent) => {
    console.log('Element hovered');
});

EVENT_HOVER_END

static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'

Fired when the mouse stops hovering on the Element. The native DOM MouseEvent is passed as a parameter to the event handler.

Example

const element = new Element();
element.on('hoverend', (evt: MouseEvent) => {
    console.log('Element hover ended');
});

EVENT_PARENT

static readonly EVENT_PARENT: "parent" = 'parent'

Fired when the Element's parent gets set.

Example

const element = new Element();
element.on('parent', (parent: Element) => {
    console.log(`Element's parent is now ${parent}`);
});

EVENT_READ_ONLY

static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'

Fired when the readOnly property of an Element changes.

Example

const element = new Element();
element.on('readOnly', (readOnly: boolean) => {
    console.log(`Element is now ${readOnly ? 'read only' : 'editable'}`);
});

EVENT_SHOW

static readonly EVENT_SHOW: "show" = 'show'

Fired when the Element stops being hidden.

Example

const element = new Element();
element.on('show', () => {
    console.log('Element shown');
});

EVENT_SHOW_TO_ROOT

static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'

Fired when the Element and all of its parents become visible.

Example

const element = new Element();
element.on('showToRoot', () => {
    console.log('Element and all of its parents shown');
});

GradientPicker

Class · extends Element

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GradientPicker/index.ts#L89

Represents a gradient picker.

Constructors

constructor

new GradientPicker(args?: Readonly<GradientPickerArgs>)

Creates a new GradientPicker.

Parameters

Methods

destroy

destroy(): void

Destroys the Element and its events.

Inherited from Element

GridView

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GridView/index.ts#L37

Represents a container that shows a flexible wrappable list of items that looks like a grid. Contains GridViewItems.

Constructors

constructor

new GridView(args?: Readonly<GridViewArgs>)

Creates a new GridView.

Parameters

Accessors

selected

get selected(): GridViewItem[]

Gets the selected GridViewItems.

vertical

get vertical(): boolean

Gets whether the grid layout is vertical or not.

Methods

deselect

deselect(): void

Deselects all selected grid view items.

filter

filter(): void

Filters grid view items with the filter function provided in the constructor.

filterAsync

filterAsync(batchLimit?: number): void

Filters grid view items asynchronously by only allowing up to the specified number of grid view item operations. Fires the following events:

Parameters

filterAsyncCancel

filterAsyncCancel(): void

Cancels asynchronous filtering.

Events

EVENT_ACTIVATE

static readonly EVENT_ACTIVATE: "activate" = 'activate'

Fired when user activates a GridViewItem by pressing Enter or double-clicking.

Example

const gridView = new GridView();
gridView.on('activate', (item: GridViewItem) => {
    console.log(`Activated item ${item.text}`);
});

Inherited from Container

GridViewItem

Class · extends Container · implements IFocusable

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GridViewItem/index.ts#L45

Represents a grid view item used in GridView.

Constructors

constructor

new GridViewItem(args?: Readonly<GridViewItemArgs>)

Creates a new GridViewItem.

Parameters

Properties

allowSelect

allowSelect: boolean = true

Determines whether the item can be selected. Defaults to true.

Accessors

nextSibling

get nextSibling(): GridViewItem

Gets the next visible sibling grid view item.

previousSibling

get previousSibling(): GridViewItem

Gets the previous visible sibling grid view item.

selected

get selected(): boolean
set selected(value: boolean)

Gets whether the item is selected.

text

get text(): string
set text(value: string)

Gets the text of the item.

Methods

blur

blur(): void

Unfocus the element

focus

focus(): void

Focus on the element. If the input contains text and select is provided, the text will be selected on focus.

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers and paths to the Element's data binding.

Parameters

unlink

unlink(): void

Unlinks the Element from its observers.

Inherited from Container

InfoBox

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/InfoBox/index.ts#L38

Represents an information box.

Constructors

constructor

new InfoBox(args?: Readonly<InfoBoxArgs>)

Creates a new InfoBox.

Parameters

Accessors

icon

get icon(): string
set icon(value: string)

Gets the icon of the info box.

text

get text(): string
set text(value: string)

Gets the text of the info box.

title

get title(): string
set title(value: string)

Gets the title of the info box.

Inherited from Container

InputElement

Class · extends Element · implements IBindable, IFocusable, IPlaceholder

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/InputElement/index.ts#L33

The InputElement is an abstract class that manages an input DOM element. It is the superclass of TextInput and NumericInput. It is not intended to be used directly.

Properties

blurOnEnter

blurOnEnter: boolean = true

Determines whether the input should blur when the enter key is pressed.

blurOnEscape

blurOnEscape: boolean = true

Determines whether the input should blur when the escape key is pressed.

Accessors

input

get input(): HTMLInputElement

Gets the input DOM element.

keyChange

get keyChange(): boolean
set keyChange(value: boolean)

Gets the method to call when keyup is called on the input DOM element.

placeholder

get placeholder(): string
set placeholder(value: string)

Sets the placeholder text of the input.

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Sets whether the input should flash on changes.

value

abstract get value(): unknown
abstract set value(value: unknown)

Sets the value of the Element.

values

abstract get values(): unknown[]
abstract set values(value: unknown[])

Sets multiple values on the Element. It is up to the Element to determine how to display them.

Methods

blur

blur(): void

Unfocuses (blurs) the input element.

destroy

destroy(): void

Destroys the Element and its events.

focus

focus(select?: boolean): void

Focuses the input element. If the input contains text and select is true, the text will be selected on focus.

Parameters

Inherited from Element

Inherited from VectorInput

Label

Class · extends Element · implements IPlaceholder, IBindable<string>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Label/index.ts#L42

The Label is a simple span element that displays some text.

Constructors

constructor

new Label(args?: Readonly<LabelArgs>)

Creates a new Label.

Parameters

Accessors

placeholder

get placeholder(): string
set placeholder(value: string)

Gets the placeholder text of the Label.

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Gets whether the Label should flash when its value changes.

text

get text(): string
set text(value: string)

Gets the text of the Label.

value

get value(): string
set value(value: string)

Gets the value of the Label. This is an alias for Label#text.

values

set values(values: string[])

Sets multiple values on the Label. If all values are the same, the Label will display that value. Otherwise, it will be empty and display a "multiple values" state.

Inherited from Element

Inherited from VectorInput

LabelGroup

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/LabelGroup/index.ts#L34

Represents a group of an Element and a Label. Useful for rows of labeled fields.

Constructors

constructor

new LabelGroup(args?: Readonly<LabelGroupArgs>)

Creates a new LabelGroup.

Parameters

Accessors

field

get field(): Element

The field element.

label

get label(): Label

The label element.

labelAlignTop

get labelAlignTop(): boolean
set labelAlignTop(value: boolean)

Gets whether to align the label at the top of the group.

text

get text(): string
set text(value: string)

Gets the text of the label.

Inherited from Container

Menu

Class · extends Container · implements IFocusable

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Menu/index.ts#L34

A Menu is a list of MenuItems which can contain child MenuItems. Useful to show context menus and nested menus. Note that a Menu must be appended to the root Element and then positioned accordingly.

Constructors

constructor

new Menu(args?: Readonly<MenuArgs>)

Creates a new Menu.

Parameters

Methods

blur

blur(): void

Unfocus the element

clear

clear(): void

Remove all the current menu items from the menu.

focus

focus(): void

Focus on the element. If the input contains text and select is provided, the text will be selected on focus.

position

position(x: number, y: number): void

Positions the top-left corner of the menu at the specified coordinates.

Parameters

Example

// open a context menu at the mouse position
window.addEventListener('contextmenu', (event) => {
    event.stopPropagation();
    event.preventDefault();

    menu.hidden = false;
    menu.position(event.clientX, event.clientY);
});

Inherited from Container

MenuItem

Class · extends Container · implements IBindable<string>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/MenuItem/index.ts#L63

The MenuItem is a selectable option that is appended to a Menu. A MenuItem can also contain child MenuItems (by appending them to the MenuItem). This can be useful to show nested Menus.

Constructors

constructor

new MenuItem(args?: Readonly<MenuItemArgs>)

Creates a new MenuItem.

Parameters

Properties

onIsEnabled

onIsEnabled: () => boolean

The function that determines whether the MenuItem should be enabled when the Menu is shown.

onIsVisible

onIsVisible: () => boolean

The function that determines whether the MenuItem should be visible when the Menu is shown.

onSelect

onSelect: (evt?: MouseEvent) => void

The function called when the MenuItem is selected.

Accessors

binding

get binding(): BindingBase
set binding(value: BindingBase)

Gets the binding for the MenuItem label.

hasChildren

get hasChildren(): boolean

Returns whether the MenuItem has children.

icon

get icon(): string
set icon(value: string)

Gets the CSS code for an icon for the MenuItem.

menu

get menu(): Menu
set menu(value: Menu)

Gets the menu.

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Sets whether the input should flash on changes.

shortcut

get shortcut(): string
set shortcut(value: string)

Gets the keyboard shortcut displayed on the MenuItem.

text

get text(): string
set text(value: string)

Gets the text shown on the MenuItem.

value

get value(): string
set value(value: string)

Sets the value of the Element.

values

set values(values: string[])

Sets multiple values on the Element. It is up to the Element to determine how to display them.

Methods

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers and paths to the Element's data binding.

Parameters

select

select(): void

Selects the MenuItem which also happens automatically when the user clicks on the MenuItem.

unlink

unlink(): void

Unlinks the Element from its observers.

Inherited from Container

NumericInput

Class · extends InputElement

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/NumericInput/index.ts#L66

The NumericInput represents an input element that holds numbers.

NumericInput accepts number values. It also accepts strings that contain mathematical expressions which are then evaluated to a number. Here are some examples:

Input String Evaluated Number Value
"10 + 20" 30
"10 - 20" -10
"10 * 20" 200
"10 / 20" 0.5
"10 * (20 + 30)" 500

By default, a NumericInput displays a slider input that can be used to quickly change the value via a click and drag. The slider can be disabled by setting the hideSlider argument to true.

Constructors

constructor

new NumericInput(args?: Readonly<NumericInputArgs>)

Creates a new NumericInput.

Parameters

Accessors

max

get max(): number
set max(value: number)

Gets the maximum value this field can take.

min

get min(): number
set min(value: number)

Gets the minimum value this field can take.

precision

get precision(): number
set precision(value: number)

Gets the precision of the input.

step

get step(): number
set step(value: number)

Gets the amount that the value will be increased or decreased when using the arrow keys and the slider input.

value

get value(): number
set value(value: string | number)

Gets the value of the NumericInput.

values

set values(values: number[])

Sets multiple values on the input. If all values are the same, the input will display that value. Otherwise, it will be empty and display a "multiple values" state.

Events

EVENT_CHANGE

static readonly EVENT_CHANGE: "change" = 'change'

Fired when the value of the NumericInput changes.

Example

const numericInput = new NumericInput();
numericInput.on('change', (value: number) => {
    console.log('Value changed to:', value);
});

EVENT_SLIDER_MOUSEDOWN

static readonly EVENT_SLIDER_MOUSEDOWN: "slider:mousedown" = 'slider:mousedown'

Fired when the user starts dragging the slider.

Example

const numericInput = new NumericInput();
numericInput.on('slider:mousedown', (evt: MouseEvent) => {
    console.log('Slider drag started');
});

EVENT_SLIDER_MOUSEUP

static readonly EVENT_SLIDER_MOUSEUP: "slider:mouseup" = 'slider:mouseup'

Fired when the user stops dragging the slider.

Example

const numericInput = new NumericInput();
numericInput.on('slider:mouseup', () => {
    console.log('Slider drag ended');
});

Inherited from InputElement

Inherited from VectorInput

Overlay

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Overlay/index.ts#L28

An overlay element.

Constructors

constructor

new Overlay(args?: Readonly<OverlayArgs>)

Creates a new Overlay.

Parameters

Accessors

clickable

get clickable(): boolean
set clickable(value: boolean)

Gets whether the overlay can be hidden by clicking on it.

transparent

get transparent(): boolean
set transparent(value: boolean)

Gets whether the overlay is transparent or not.

Methods

position

position(x: number, y: number): void

Position the overlay at specific x, y coordinates.

Parameters

Inherited from Container

Inherited from VectorInput

Panel

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Panel/index.ts#L67

The Panel is a Container that itself contains a header container and a content container. The respective Container functions work using the content container. One can also append elements to the header of the Panel.

Constructors

constructor

new Panel(args?: Readonly<PanelArgs>)

Creates a new Panel.

Parameters

Accessors

collapsed

get collapsed(): boolean
set collapsed(value: boolean)

Gets whether the Element should be collapsed.

collapseHorizontally

get collapseHorizontally(): boolean
set collapseHorizontally(value: boolean)

Gets whether the panel collapses horizontally.

collapsible

get collapsible(): boolean
set collapsible(value: boolean)

Gets whether the Element is collapsible.

content

get content(): Container

Gets the content container.

header

get header(): Container

Gets the header container.

headerSize

get headerSize(): number
set headerSize(value: number)

Gets the height of the header in pixels.

headerText

get headerText(): string
set headerText(value: string)

Gets the header text of the panel.

removable

get removable(): boolean
set removable(value: boolean)

Gets whether the panel can be removed

sortable

get sortable(): boolean
set sortable(value: boolean)

Gets whether the panel can be reordered.

Events

EVENT_COLLAPSE

static readonly EVENT_COLLAPSE: "collapse" = 'collapse'

Fired when the panel gets collapsed.

Example

const panel = new Panel();
panel.on('collapse', () => {
    console.log('Panel collapsed');
});

EVENT_EXPAND

static readonly EVENT_EXPAND: "expand" = 'expand'

Fired when the panel gets expanded.

Example

const panel = new Panel();
panel.on('expand', () => {
    console.log('Panel expanded');
});

Inherited from Container

Inherited from VectorInput

Progress

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Progress/index.ts#L21

Represents a bar that can highlight progress of an activity.

Constructors

constructor

new Progress(args?: Readonly<ProgressArgs>)

Creates a new Progress.

Parameters

Accessors

value

get value(): number
set value(val: number)

Gets the value of the progress bar.

Inherited from Container

RadioButton

Class · extends Element · implements IBindable<boolean>, IFocusable

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/RadioButton/index.ts#L16

A radio button element.

Constructors

constructor

new RadioButton(args?: Readonly<RadioButtonArgs>)

Creates a new RadioButton.

Parameters

Accessors

renderChanges

get renderChanges(): boolean
set renderChanges(renderChanges: boolean)

Sets whether the input should flash on changes.

value

get value(): boolean
set value(value: boolean)

Sets the value of the Element.

values

set values(values: boolean[])

Sets multiple values on the Element. It is up to the Element to determine how to display them.

Methods

blur

blur(): void

Unfocus the element

destroy

destroy(): void

Destroys the Element and its events.

focus

focus(): void

Focus on the element. If the input contains text and select is provided, the text will be selected on focus.

Inherited from Element

SelectInput

Class · extends Element · implements IBindable<unknown>, IFocusable

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/SelectInput/index.ts#L106

An input that allows selecting from a dropdown or entering tags.

Constructors

constructor

new SelectInput(args?: Readonly<SelectInputArgs>)

Creates a new SelectInput.

Parameters

Accessors

disabledOptions

set disabledOptions(value: Record<string, string>)

Sets the options that should be disabled. The keys are the option values and the values are the text to show when the option is disabled.

disabledValue

set disabledValue(value: string)

Sets the value that is currently disabled (shown but not selectable).

fallbackOrder

set fallbackOrder(value: string[])

Sets the order in which options should be checked for a valid fallback when the current value becomes disabled.

invalidOptions

get invalidOptions(): unknown[]
set invalidOptions(value: unknown[])

Gets the array of invalid options.

multiSelect

get multiSelect(): boolean

Gets whether the SelectInput allows selecting multiple options.

options

get options(): { t: string; v: string | number | boolean }[]
set options(value: { t: string; v: string | number | boolean }[])

Gets the dropdown options.

placeholder

get placeholder(): string
set placeholder(value: string)

Gets the placeholder text for the input field.

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Gets whether the SelectInput should flash when its value changes.

value

get value(): unknown
set value(value: unknown)

Gets the value of the SelectInput. For multi-select inputs, this returns an array.

values

set values(values: unknown[])

Sets multiple values on the SelectInput. If all values are the same, the SelectInput will display that value. Otherwise, it will display a "multiple values" state.

Methods

_onDocumentPointerDown

protected _onDocumentPointerDown(evt: PointerEvent): void

Handles pointer down events on the document. It has to be the document instead of the window because otherwise pointerdown is not fired when the PCUI app is running in an iframe.

Parameters

blur

blur(): void

Unfocuses (blurs) the SelectInput.

close

close(): void

Closes the dropdown menu.

destroy

destroy(): void

Destroys the Element and its events.

focus

focus(): void

Focuses the SelectInput.

open

open(): void

Opens the dropdown menu.

toggle

toggle(): void

Toggles the dropdown menu.

unlink

unlink(): void

Unlinks the Element from its observers.

Events

EVENT_BLUR

static readonly EVENT_BLUR: "blur" = 'blur'

Fired when the SelectInput loses focus.

Example

const selectInput = new SelectInput();
selectInput.on('blur', () => {
    console.log('SelectInput blurred');
});

EVENT_CHANGE

static readonly EVENT_CHANGE: "change" = 'change'

Fired when the value of the SelectInput changes.

Example

const selectInput = new SelectInput();
selectInput.on('change', (value) => {
    console.log('Value changed to:', value);
});

EVENT_FOCUS

static readonly EVENT_FOCUS: "focus" = 'focus'

Fired when the SelectInput receives focus.

Example

const selectInput = new SelectInput();
selectInput.on('focus', () => {
    console.log('SelectInput focused');
});

Inherited from Element

SliderInput

Class · extends Element · implements IBindable<number>, IFocusable, IPlaceholder

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/SliderInput/index.ts#L57

The SliderInput shows a NumericInput and a slider widget next to it. It acts as a proxy of the NumericInput.

Constructors

constructor

new SliderInput(args?: Readonly<SliderInputArgs>)

Creates a new SliderInput.

Parameters

Accessors

max

get max(): number
set max(value: number)

Gets the maximum value that the numeric input field can take.

min

get min(): number
set min(value: number)

Gets the minimum value that the numeric input field can take.

placeholder

get placeholder(): string
set placeholder(value: string)

Sets the placeholder text of the input.

precision

get precision(): number
set precision(value: number)

Gets the maximum number of decimals a value can take.

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Sets whether the input should flash on changes.

sliderMax

get sliderMax(): number
set sliderMax(value: number)

Gets the maximum value that the slider field can take.

sliderMin

get sliderMin(): number
set sliderMin(value: number)

Gets the minimum value that the slider field can take.

step

get step(): number
set step(value: number)

Gets the amount that the value will be increased or decreased when using the arrow keys.

value

get value(): number
set value(value: number)

Sets the value of the Element.

values

set values(values: number[])

Sets multiple values on the Element. It is up to the Element to determine how to display them.

Methods

blur

blur(): void

Unfocus the element

destroy

destroy(): void

Destroys the Element and its events.

focus

focus(): void

Focus on the element. If the input contains text and select is provided, the text will be selected on focus.

Inherited from Element

Spinner

Class · extends Element

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Spinner/index.ts#L35

Represents a spinning icon.

Constructors

constructor

new Spinner(args?: Readonly<SpinnerArgs>)

Creates a new Spinner.

Parameters

Inherited from Element

TextAreaInput

Class · extends TextInput

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TextAreaInput/index.ts#L26

The TextAreaInput wraps a textarea element. It has the same interface as TextInput.

Constructors

constructor

new TextAreaInput(args?: Readonly<TextAreaInputArgs>)

Creates a new TextAreaInput.

Parameters

Inherited from TextInput

TextInput

Class · extends InputElement

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TextInput/index.ts#L24

The TextInput is an input element of type text.

Constructors

constructor

new TextInput(args?: Readonly<TextInputArgs>)

Creates a new TextInput.

Parameters

Properties

onValidate

onValidate: (value: string) => boolean

A function that validates the value that is entered into the input and returns true if it is valid or false otherwise. If false then the input will be set in an error state and the value will not propagate to the binding.

Accessors

values

set values(values: string[])

Sets multiple values on the input. If all values are the same, the input will display that value. Otherwise, it will be empty and display a "multiple values" state.

Inherited from InputElement

Inherited from VectorInput

TreeView

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeView/index.ts#L79

A container that can show a TreeView like a hierarchy. The TreeView contains a hierarchy of TreeViewItems.

Constructors

constructor

new TreeView(args?: Readonly<TreeViewArgs>)

Creates a new TreeView.

Parameters

Properties

allowRenaming

allowRenaming: boolean = false

Determines whether renaming TreeViewItems is allowed by double clicking on them.

allowReordering

allowReordering: boolean = true

Determines whether reordering TreeViewItems is allowed.

Accessors

allowDrag

get allowDrag(): boolean
set allowDrag(value: boolean)

Gets whether dragging a TreeViewItem is allowed.

filter

get filter(): string
set filter(value: string)

Gets the filter that searches TreeViewItems and only shows the ones that are relevant to the filter.

isDragging

get isDragging(): boolean
set isDragging(value: boolean)

Gets whether a TreeViewItem is currently being dragged.

pressedArrow

get pressedArrow(): boolean

Gets whether the selection was triggered by arrow key navigation.

pressedCtrl

get pressedCtrl(): boolean

Gets whether Ctrl is currently pressed.

pressedShift

get pressedShift(): boolean

Gets whether Shift is currently pressed.

selected

get selected(): TreeViewItem[]

Gets all of the currently selected TreeViewItems.

Methods

_applyFilter

protected _applyFilter(filter: string): void

Searches the treeview.

Parameters

_clearFilter

protected _clearFilter(): void

Clears search filter.

_findLastVisibleChildTreeItem

protected _findLastVisibleChildTreeItem(currentItem: TreeViewItem): TreeViewItem

Finds the last visible child tree item of the specified tree item.

Parameters

Returns TreeViewItem: The last child item.

_findNextVisibleTreeItem

protected _findNextVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem

Finds the next tree item that is not currently hidden.

Parameters

Returns TreeViewItem: The next visible tree item.

_findPreviousVisibleTreeItem

protected _findPreviousVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem

Finds the previous visible tree item of the specified tree item.

Parameters

Returns TreeViewItem: The previous item.

_getChildrenRange

protected _getChildrenRange(startChild: TreeViewItem, endChild: TreeViewItem): TreeViewItem[]

Gets the visible tree items between the specified start and end tree items.

Parameters

Returns TreeViewItem[]

_getTreeOrder

protected _getTreeOrder(): Map<TreeViewItem, number>

Do a depth first traversal of all tree items and assign an order to them so that we know which one is above the other. Performance wise this means it traverses all tree items every time however seems to be pretty fast even with 15 - 20 K entities.

Returns Map<TreeViewItem, number>

_onChildDeselected

protected _onChildDeselected(item: TreeViewItem): void

Called when a child tree view item is deselected.

Parameters

_onChildRename

protected _onChildRename(item: TreeViewItem, newName: string): void

Called when a child tree view item is renamed.

Parameters

_onChildSelected

protected _onChildSelected(item: TreeViewItem): void

Called when a child tree view item is selected.

Parameters

_openHierarchy

protected _openHierarchy(endItem: TreeViewItem): void

Opens all the parents of the specified item.

Parameters

_selectSingleItem

protected _selectSingleItem(item: TreeViewItem): void

Selects a tree view item.

Parameters

_traverseDepthFirst

protected _traverseDepthFirst(fn: (item: TreeViewItem) => void): void

Call specified function on every child TreeViewItem by traversing the hierarchy depth first.

Parameters

clearTreeItems

clearTreeItems(): void

Removes all child tree view items.

collapseAll

collapseAll(): void

Collapses all tree view items.

deselect

deselect(): void

Deselects all selected tree view items.

expandAll

expandAll(): void

Expands all tree view items.

showDragHandle

showDragHandle(treeItem: TreeViewItem): void

Show the drag handle on the given tree item.

Parameters

traverse

traverse(fn: (item: TreeViewItem) => void): void

Traverses all child TreeViewItems using depth first search and calls the supplied function for each item.

Parameters

Example

treeView.traverse((item: TreeViewItem) => {
    console.log(item.text);
});

Events

EVENT_DESELECT

static readonly EVENT_DESELECT: "deselect" = 'deselect'

Fired when user deselects a TreeViewItem.

Example

const treeView = new TreeView();
treeView.on('deselect', (item: TreeViewItem) => {
    console.log(`Deselected item ${item.text}`);
});

EVENT_DRAGEND

static readonly EVENT_DRAGEND: "dragend" = 'dragend'

Fired when user stops dragging selected TreeViewItems.

Example

const treeView = new TreeView({
    allowDrag: true // this is the default but we're showing it here for clarity
});
treeView.on('dragend', () => {
    console.log('Drag ended');
});

EVENT_DRAGSTART

static readonly EVENT_DRAGSTART: "dragstart" = 'dragstart'

Fired when user starts dragging selected TreeViewItems.

Example

const treeView = new TreeView({
    allowDrag: true // this is the default but we're showing it here for clarity
});
treeView.on('dragstart', (items: TreeViewItem[]) => {
    console.log(`Drag started of ${items.length} items`);
});

EVENT_RENAME

static readonly EVENT_RENAME: "rename" = 'rename'

Fired when user renames a TreeViewItem.

Example

const treeView = new TreeView();
treeView.on('rename', (item: TreeViewItem, name: string) => {
    console.log(`Renamed item to ${name}`);
});

EVENT_REPARENT

static readonly EVENT_REPARENT: "reparent" = 'reparent'

Fired when user reparents TreeViewItems.

Example

const treeView = new TreeView();
treeView.on('reparent', (reparented: ReparentedItem[]) => {
    console.log(`Reparented ${reparented.length} items`);
});

EVENT_SELECT

static readonly EVENT_SELECT: "select" = 'select'

Fired when user selects a TreeViewItem.

Example

const treeView = new TreeView();
treeView.on('select', (item: TreeViewItem) => {
    console.log(`Selected item ${item.text}`);
});

Inherited from Container

TreeViewItem

Class · extends Container

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeViewItem/index.ts#L82

A TreeViewItem is a single node in a hierarchical TreeView control.

Constructors

constructor

new TreeViewItem(args?: Readonly<TreeViewItemArgs>)

Creates a new TreeViewItem.

Parameters

Properties

allowDrag

allowDrag: boolean = true

Determines whether this tree item can be dragged. Only considered if the parent TreeView has TreeView#allowDrag set to true.

allowDrop

allowDrop: boolean = true

Determines whether dropping is allowed on the tree item.

allowSelect

allowSelect: boolean = true

Determines whether the item can be selected.

Accessors

content

get content(): Container

Gets the container that holds the icon and text for this tree view item. Useful for positioning calculations or appending custom content alongside the item row.

firstChild

get firstChild(): TreeViewItem

Gets the first child item.

icon

get icon(): string
set icon(value: string)

Gets the icon shown before the text in the TreeViewItem.

iconLabel

get iconLabel(): Label

Gets the internal label that shows the icon.

lastChild

get lastChild(): TreeViewItem

Gets the last child item.

nextSibling

get nextSibling(): TreeViewItem

Gets the next sibling item.

numChildren

get numChildren(): number

Gets the number of direct children.

open

get open(): boolean
set open(value: boolean)

Gets whether the item is expanded and showing its children.

parentsOpen

get parentsOpen(): boolean
set parentsOpen(value: boolean)

Gets whether the ancestors of the item are open or closed.

previousSibling

get previousSibling(): TreeViewItem

Gets the previous sibling item.

selected

get selected(): boolean
set selected(value: boolean)

Gets whether the item is selected.

text

get text(): string
set text(value: string)

Gets the text shown by the TreeViewItem.

textLabel

get textLabel(): Label

Gets the internal label that shows the text.

treeView

get treeView(): TreeView
set treeView(value: TreeView)

Gets the parent TreeView.

Events

EVENT_CLOSE

static readonly EVENT_CLOSE: "close" = 'close'

Fired when user closes the TreeViewItem.

Example

treeViewItem.on('close', (item: TreeViewItem) => {
    console.log('TreeViewItem closed', item);
});

EVENT_DESELECT

static readonly EVENT_DESELECT: "deselect" = 'deselect'

Fired when user deselects the TreeViewItem.

Example

treeViewItem.on('deselect', (item: TreeViewItem) => {
    console.log('TreeViewItem deselected', item);
});

EVENT_OPEN

static readonly EVENT_OPEN: "open" = 'open'

Fired when user opens the TreeViewItem.

Example

treeViewItem.on('open', (item: TreeViewItem) => {
    console.log('TreeViewItem opened', item);
});

EVENT_SELECT

static readonly EVENT_SELECT: "select" = 'select'

Fired when user selects the TreeViewItem.

Example

treeViewItem.on('select', (item: TreeViewItem) => {
    console.log('TreeViewItem selected', item);
});

Inherited from Container

VectorInput

Class · extends Element · implements IBindable<number[] | string>, IFocusable, IMultiPlaceholder

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/VectorInput/index.ts#L50

A vector input. The vector can have 2 to 4 dimensions with each dimension being a NumericInput.

Constructors

constructor

new VectorInput(args?: Readonly<VectorInputArgs>)

Creates a new VectorInput.

Parameters

Accessors

binding

get binding(): BindingBase
set binding(value: BindingBase)

Gets the Binding object for the VectorInput.

inputs

get inputs(): NumericInput[]

Gets the array of NumericInput elements owned by this vector.

max

get max(): number
set max(value: number)

Gets the maximum value accepted by all inputs of the vector.

min

get min(): number
set min(value: number)

Gets the minimum value accepted by all inputs of the vector.

placeholder

get placeholder(): string[]
set placeholder(value: string | string[])

Gets the placeholder text of all inputs as an array.

precision

get precision(): number
set precision(value: number)

Gets the maximum number of decimal places supported by all inputs of the vector.

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Gets whether inputs should flash when their values change.

step

get step(): number
set step(value: number)

Gets the amount that the value will be increased or decreased when using the arrow keys and the slider input for all inputs of the vector.

value

get value(): number[]
set value(value: number[])

Gets the value of the VectorInput as an array of numbers.

values

set values(values: number[][])

Sets multiple values on the VectorInput. Each value should be an array representing the vector dimensions. If all values are the same, the VectorInput will display that value. Otherwise, it will display a "multiple values" state.

Methods

blur

blur(): void

Unfocuses (blurs) all input elements.

focus

focus(): void

Focuses the first input element.

link

link(observers: Observer | Observer[], paths: string | string[]): void

Links the specified observers and paths to the Element's data binding.

Parameters

unlink

unlink(): void

Unlinks the Element from its observers.

Events

EVENT_BLUR

static readonly EVENT_BLUR: "blur" = 'blur'

Fired when the VectorInput loses focus.

Example

const vectorInput = new VectorInput();
vectorInput.on('blur', () => {
    console.log('VectorInput blurred');
});

EVENT_CHANGE

static readonly EVENT_CHANGE: "change" = 'change'

Fired when the value of the VectorInput changes.

Example

const vectorInput = new VectorInput({ dimensions: 3 });
vectorInput.on('change', (value: number[]) => {
    console.log('Value changed to:', value);
});

EVENT_FOCUS

static readonly EVENT_FOCUS: "focus" = 'focus'

Fired when the VectorInput receives focus.

Example

const vectorInput = new VectorInput();
vectorInput.on('focus', () => {
    console.log('VectorInput focused');
});

Inherited from Element

ArrayInputArgs

Interface · extends IBindableArgs<unknown[]>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ArrayInput/index.ts#L34

The arguments for the ArrayInput constructor.

Properties

elementArgs

elementArgs?: ElementConfig

Arguments for each array Element.

fixedSize

fixedSize?: boolean

If true then editing the number of elements that the array has will not be allowed.

getDefaultFn

getDefaultFn?: () => unknown

Used to specify the default values for each element in the array. Defaults to null.

type

type?: "string" | "number" | "boolean" | "vec2" | "vec3" | "vec4"

The type of values that the array can hold. Can be one of the following:

Defaults to string.

usePanels

usePanels?: boolean

If true then the array will be rendered using panels. Defaults to false.

Inherited from ElementArgs

Inherited from IBindableArgs

BindingBaseArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingBase/index.ts#L9

The interface for arguments for the BindingBase constructor.

Properties

element

element?: IBindable

The IBindable element.

history

history?: History

The history object which will be used to record undo / redo actions. If none is provided then no history will be recorded.

historyCombine

historyCombine?: boolean

Whether to combine history actions.

historyName

historyName?: string

The name of each history action.

historyPostfix

historyPostfix?: string

A postfix that will be used for the name of every history action.

historyPrefix

historyPrefix?: string

A prefix that will be used for the name of every history action.

BindingObserversToElementArgs

Interface · extends BindingBaseArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingObserversToElement/index.ts#L10

The interface for arguments for the BindingObserversToElement constructor.

Properties

customUpdate

customUpdate?: (element: IBindable, observers: Observer[], paths: string[]) => void

Custom update function.

Inherited from BindingBaseArgs

BindingTwoWayArgs

Interface · extends BindingBaseArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingTwoWay/index.ts#L12

The interface for arguments for the BindingTwoWay constructor.

Properties

bindingElementToObservers

bindingElementToObservers?: BindingElementToObservers

BindingElementToObservers instance.

bindingObserversToElement

bindingObserversToElement?: BindingObserversToElement

BindingObserversToElement instance.

Inherited from BindingBaseArgs

BooleanInputArgs

Interface · extends IBindableArgs<boolean>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/BooleanInput/index.ts#L12

The arguments for the BooleanInput constructor.

Properties

tabIndex

tabIndex?: number

Sets the tabIndex of the BooleanInput. Defaults to 0.

type

type?: string

The type of checkbox. Currently can be null or 'toggle'.

Inherited from ElementArgs

Inherited from IBindableArgs

ButtonArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Button/index.ts#L9

The arguments for the Button constructor.

Properties

icon

icon?: string

The CSS code for an icon for the button. e.g. 'E401' (notice we omit the '\' character). Defaults to ''.

size

size?: "small"

Sets the 'size' type of the button. Can be 'small' or null. Defaults to null.

text

text?: string

Sets the text of the button. Defaults to ''.

unsafe

unsafe?: boolean

If true, the innerHTML property will be used to set the text. Otherwise, textContent will be used instead. Defaults to false.

Inherited from ElementArgs

CanvasArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Canvas/index.ts#L9

The arguments for the Canvas constructor.

Properties

useDevicePixelRatio

useDevicePixelRatio?: boolean

Whether the canvas should use the devicePixelRatio. Defaults to false.

Inherited from ElementArgs

CodeArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Code/index.ts#L12

The arguments for the Code constructor.

Properties

text

text?: string

Sets the text to display in the code block.

Inherited from ContainerArgs

ColorPickerArgs

Interface · extends IBindableArgs<number[]>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ColorPicker/index.ts#L16

The arguments for the ColorPicker constructor.

Properties

channels

channels?: number

Number of color channels. Defaults to 3. Changing to 4 adds the option to change the alpha value.

value

value?: number[]

An array of 4 integers containing the RGBA values the picker should be initialized to. Defaults to [0, 0, 255, 1].

Inherited from ElementArgs

Inherited from IBindableArgs

ContainerArgs

Interface · extends IParentArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Container/index.ts#L26

The arguments for the Container constructor.

Properties

flex

flex?: boolean

Sets whether the Container uses flex layout.

grid

grid?: boolean

Sets whether the Container supports the grid layout.

onResize

onResize?: () => void

Called when the Container has been resized.

resizable

resizable?: string

Sets whether the Container is resizable and where the resize handle is located. Can be one of 'top', 'bottom', 'right', 'left'. Defaults to null which disables resizing.

resizeMax

resizeMax?: number

Sets the maximum size the Container can take when resized in pixels.

resizeMin

resizeMin?: number

Sets the minimum size the Container can take when resized in pixels.

scrollable

scrollable?: boolean

Sets whether the Container should be scrollable.

Inherited from ElementArgs

Inherited from IParentArgs

GradientPickerArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GradientPicker/index.ts#L71

The arguments for the GradientPicker constructor.

Properties

channels

channels?: number

Number of color channels. Defaults to 3. Changing to 4 adds the option to change the alpha value.

renderChanges

renderChanges?: boolean

If true, the picker will render changes to the gradient as they happen. Defaults to true.

value

value?: number[]

An array of 4 integers containing the RGBA values the picker should be initialized to.

Inherited from ElementArgs

GridViewArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GridView/index.ts#L14

The arguments for the GridView constructor.

Properties

allowDeselect

allowDeselect?: boolean

If true and multiSelect is set to false, the layout will allow options to be deselected. Defaults to true.

filterFn

filterFn?: (item: GridViewItem) => boolean

A filter function to filter GridViewItems with signature (GridViewItem) => boolean.

multiSelect

multiSelect?: boolean

If true, the layout will allow for multiple options to be selected. Defaults to true.

vertical

vertical?: boolean

If true the GridView layout will be vertical.

Inherited from ContainerArgs

GridViewItemArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GridViewItem/index.ts#L19

The arguments for the GridViewItem constructor.

Properties

allowSelect

allowSelect?: boolean

If true, allow selecting the item. Defaults to true.

selected

selected?: boolean

Whether the item is selected.

tabIndex

tabIndex?: number

Sets the tabIndex of the GridViewItem. Defaults to 0.

text

text?: string

The text of the item. Defaults to ''.

type

type?: string

The type of the GridViewItem. Can be null or 'radio'.

Inherited from ContainerArgs

IBindable

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L35

The interface for bindable elements.

Accessors

renderChanges

get renderChanges(): boolean
set renderChanges(value: boolean)

Gets whether the input should flash on changes.

value

get value(): T
set value(values: T)

Gets the value of the Element.

values

get values(): T[]
set values(values: T[])

Gets multiple values on the Element.

IBindableArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L65

The interface for arguments for bindable elements.

Properties

renderChanges

renderChanges?: boolean

If true each input will flash on changes.

value

value?: T

Sets the value of the Element.

values

values?: T[]

Sets multiple values to the Element. It is up to the Element to determine how to display them.

IFlexArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L160

The interface for flex-related CSS properties available on elements. These properties do not themselves enable display: flex; flex layout is configured separately (for example via Container#flex).

Properties

alignItems

alignItems?: string

Sets the element's alignItems CSS property.

alignSelf

alignSelf?: string

Sets the element's alignSelf CSS property.

flexBasis

flexBasis?: string | number

Sets the element's flexBasis CSS property.

flexDirection

flexDirection?: string

Sets the element's flexDirection CSS property.

flexGrow

flexGrow?: string | number

Sets the element's flexGrow CSS property.

flexShrink

flexShrink?: string | number

Sets the element's flexShrink CSS property.

flexWrap

flexWrap?: string

Sets the element's flexWrap CSS property.

justifyContent

justifyContent?: string

Sets the element's justifyContent CSS property.

justifySelf

justifySelf?: string

Sets the element's justifySelf CSS property.

IFocusable

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L133

The interface for elements that can be focused.

Methods

blur

blur(): void

Unfocus the element

focus

focus(select?: boolean): void

Focus on the element. If the input contains text and select is provided, the text will be selected on focus.

Parameters

InfoBoxArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/InfoBox/index.ts#L10

The arguments for the InfoBox constructor.

Properties

icon

icon?: string

The CSS code for an icon for the InfoBox. e.g. 'E401' (notice we omit the '\' character). Defaults to ''. Useful icon values for InfoBox are:

text

text?: string

Sets the 'text' of the InfoBox. Defaults to ''.

title

title?: string

Sets the 'title' of the InfoBox. Defaults to ''.

unsafe

unsafe?: boolean

If true, the innerHTML property will be used to set the text. Otherwise, textContent will be used instead. Defaults to false.

Inherited from ContainerArgs

InputElementArgs

Interface · extends IBindableArgs<T>, IPlaceholderArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/InputElement/index.ts#L10

The arguments for the InputElement constructor.

Properties

blurOnEnter

blurOnEnter?: boolean

Sets whether pressing Enter will blur (unfocus) the field. Defaults to true.

blurOnEscape

blurOnEscape?: boolean

Sets whether pressing Escape will blur (unfocus) the field. Defaults to true.

input

input?: HTMLInputElement

The input element to associate this InputElement with. If not supplied one will be created instead.

keyChange

keyChange?: boolean

Sets whether any key up event will cause a change event to be fired.

Inherited from ElementArgs

Inherited from IPlaceholderArgs

Inherited from IBindableArgs

IParentArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L148

The interface for arguments for elements that have children.

Properties

children

children?: ReactNode

The children of the current component.

IPlaceholder

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L83

The interface for elements that have placeholder text.

Accessors

placeholder

get placeholder(): string
set placeholder(value: string)

Gets the placeholder text of the input.

IPlaceholderArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L97

The interface for arguments for elements that have placeholder text.

Properties

placeholder

placeholder?: string

Sets the placeholder label that appears on the right of the input.

LabelArgs

Interface · extends IBindableArgs<string>, IPlaceholderArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Label/index.ts#L10

The arguments for the Label constructor.

Properties

allowTextSelection

allowTextSelection?: boolean

If true then the label can be clicked to select text. Defaults to false.

dom

dom?: string | HTMLElement

The DOM element or its type to use for this component. Defaults to 'span'.

nativeTooltip

nativeTooltip?: boolean

If true then use the text of the label as the native HTML tooltip. Defaults to false.

text

text?: string

Sets the text of the Label. Defaults to ''.

unsafe

unsafe?: boolean

If true, the innerHTML property will be used to set the text. Otherwise, textContent will be used instead. Defaults to false.

value

value?: string

Sets the value of the Label. Defaults to ''.

Inherited from ElementArgs

Inherited from IPlaceholderArgs

Inherited from IBindableArgs

LabelGroupArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/LabelGroup/index.ts#L12

The arguments for the LabelGroup constructor.

Properties

field

field?: Element

The Element to be wrapped by the label group.

labelAlignTop

labelAlignTop?: boolean

Whether to align the label at the top of the group. Defaults to false which aligns it at the center.

nativeTooltip

nativeTooltip?: boolean

Add a native tooltip to the label.

text

text?: string

The label text. Defaults to 'Label'.

Inherited from ContainerArgs

MenuArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Menu/index.ts#L13

The arguments for the Menu constructor.

Properties

hidden

hidden?: boolean

Sets whether this Menu is hidden. Defaults to true.

items

items?: MenuItemArgs[]

An array of MenuItemArgs. If these are passed then new MenuItems will be created and appended to the menu.

tabIndex

tabIndex?: number

Sets the tabIndex of the Menu. Defaults to 1.

Inherited from ContainerArgs

MenuItemArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/MenuItem/index.ts#L18

The arguments for the MenuItem constructor.

Properties

hasChildren

hasChildren?: boolean

Whether the MenuItem has any child MenuItems.

icon

icon?: string

Sets the CSS code for an icon for the MenuItem. e.g. 'E401' (notice we omit the '\' character).

items

items?: MenuItemArgs[]

An array of MenuItem constructor data. If defined then child MenuItems will be created and added to the MenuItem.

menu

menu?: Menu

Sets the parent Menu Element.

onIsEnabled

onIsEnabled?: () => boolean

Sets the function that determines whether the MenuItem should be enabled when the Menu is shown.

onIsVisible

onIsVisible?: () => boolean

Sets the function that determines whether the MenuItem should be visible when the Menu is shown.

onSelect

onSelect?: (evt?: MouseEvent) => void

Sets the function called when we select the MenuItem.

shortcut

shortcut?: string

Sets the keyboard shortcut to display on the MenuItem (e.g., 'Ctrl+C').

text

text?: string

Sets the text shown on the MenuItem.

Inherited from ContainerArgs

NumericInputArgs

Interface · extends InputElementArgs<number | string>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/NumericInput/index.ts#L16

The arguments for the NumericInput constructor.

Properties

allowNull

allowNull?: boolean

Sets whether the value can be null. If not then it will be 0 instead of null.

hideSlider

hideSlider?: boolean

Hide the input mouse drag slider.

max

max?: number

Sets the maximum value this field can take.

min

min?: number

Sets the minimum value this field can take.

precision

precision?: number

Sets the decimal precision of this field. Defaults to 7.

step

step?: number

Sets the amount that the value will be increased or decreased when using the arrow keys and the slider input.

stepPrecision

stepPrecision?: number

Sets the amount that the value will be increased or decreased when holding shift using the arrow keys and the slider input. Defaults to NumericInput#step * 0.1.

Inherited from InputElementArgs

OverlayArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Overlay/index.ts#L14

The arguments for the Overlay constructor.

Properties

clickable

clickable?: boolean

Whether the overlay can be hidden by clicking on it.

transparent

transparent?: boolean

Whether the overlay is transparent or not.

Inherited from ElementArgs

PanelArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Panel/index.ts#L19

The arguments for the Panel constructor.

Properties

collapsed

collapsed?: boolean

Sets whether the Element should be collapsed.

collapseHorizontally

collapseHorizontally?: boolean

Sets whether the panel collapses horizontally - this would be the case for side panels. Defaults to false.

collapsible

collapsible?: boolean

Sets whether the Element is collapsible.

content

content?: HTMLElement

A DOM element to use for the content container.

header

header?: HTMLElement

A DOM element to use for the header container.

headerSize

headerSize?: number

The height of the header in pixels. Defaults to 32.

headerText

headerText?: string

The header text of the panel. Defaults to the empty string.

panelType

panelType?: "normal"

Sets the panel type.

removable

removable?: boolean

Sets whether the panel can be removed.

sortable

sortable?: boolean

Sets whether the panel can be reordered.

Inherited from ContainerArgs

ProgressArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Progress/index.ts#L11

The arguments for the Progress constructor.

Properties

value

value?: number

Sets the value of the progress bar (between 0 and 100).

Inherited from ContainerArgs

RadioButtonArgs

Interface · extends IBindableArgs<boolean>

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/RadioButton/index.ts#L11

The arguments for the RadioButton constructor.

Inherited from ElementArgs

Inherited from IBindableArgs

ReparentedItem

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeView/index.ts#L20

Represents an item that has been reparented in a TreeView drag operation.

Properties

item

item: TreeViewItem

The reparented tree view item.

newChildIndex

newChildIndex?: number

The new child index of the item within its new parent.

newParent

newParent?: Element

The new parent of the item.

oldParent

oldParent: Element

The old parent of the item.

SelectInputArgs

Interface · extends IBindableArgs<unknown>, IPlaceholderArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/SelectInput/index.ts#L40

The arguments for the SelectInput constructor.

Properties

allowCreate

allowCreate?: boolean

If true then the input allows creating new values from the text field. Only used when allowInput is true. Defaults to false.

allowInput

allowInput?: boolean

If true then a text field is shown for the user to search for values or enter new ones. Defaults to false.

allowNull

allowNull?: boolean

If true then null is a valid input value. Defaults to false.

createFn

createFn?: (value: string) => void

A function to be executed when the user selects to create a new value. The function takes the new value as a parameter.

createLabelText

createLabelText?: string

The placeholder text to show when creating a new value. Used when allowInput and allowCreate are both true.

defaultValue

defaultValue?: unknown

Default value for the input.

disabledOptions

disabledOptions?: Record<string, string>

All the option values that should be disabled. The keys of the object are the values of the options and the values are the text to show when the option is disabled.

fallbackOrder

fallbackOrder?: string[]

The order that the options should be checked in to find a valid fallback option that isn't included in the disabledOptions object.

invalidOptions

invalidOptions?: unknown[]

An array of values against which new values are checked before they are created. If a value is in the array it will not be created.

multiSelect

multiSelect?: boolean

If true then the input value becomes an array allowing the selection of multiple options. Defaults to false.

onSelect

onSelect?: (value: unknown) => void

If provided, this function will be called each time an option is selected.

options

options?: { t: string; v: string | number | boolean }[]

The dropdown options of the input. Contains an array of objects with the following format {v: Any, t: String} where v is the value and t is the text of the option.

optionsFn

optionsFn?: () => { t: string; v: OptionValue }[]

Used to map the options.

prefix

prefix?: string

Text to display in the SelectInput before the selected option.

type

type?: "string" | "number" | "boolean"

The type of each value. Can be one of 'string', 'number' or 'boolean'. Defaults to 'string'.

Inherited from ElementArgs

Inherited from IPlaceholderArgs

Inherited from IBindableArgs

SliderInputArgs

Interface · extends IBindableArgs<number>, IPlaceholderArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/SliderInput/index.ts#L17

The arguments for the SliderInput constructor.

Properties

allowNull

allowNull?: boolean

Sets whether the value can be null. If not then it will be 0 instead of null.

keyChange

keyChange?: boolean

Sets whether any key up event will cause a change event to be fired.

max

max?: number

Sets the maximum value that the numeric input field can take.

min

min?: number

Sets the minimum value that the numeric input field can take.

precision

precision?: number

Sets the maximum number of decimals a value can take. Defaults to 2.

sliderMax

sliderMax?: number

Sets the maximum value that the slider field can take. Defaults to 1.

sliderMin

sliderMin?: number

Sets the minimum value that the slider field can take. Defaults to 0.

step

step?: number

Sets the amount that the value will be increased or decreased when using the arrow keys. Holding Shift will use 10x the step.

Inherited from ElementArgs

Inherited from IPlaceholderArgs

Inherited from IBindableArgs

SpinnerArgs

Interface

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Spinner/index.ts#L21

The arguments for the Spinner constructor.

Properties

size

size?: string | number

Sets the pixel size of the spinner. Defaults to 12.

type

type?: "small-thick"

Can be 'small-thick'. Defaults to 'small-thick'.

Inherited from ElementArgs

TextAreaInputArgs

Interface · extends TextInputArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TextAreaInput/index.ts#L15

The arguments for the TextAreaInput constructor.

Properties

resizable

resizable?: "none" | "vertical" | "horizontal" | "both"

Sets which directions the text area can be resized in. One of 'both', 'horizontal', 'vertical' or 'none'. Defaults to 'none'.

Inherited from TextInputArgs

TextInputArgs

Interface · extends InputElementArgs<string>, IPlaceholderArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TextInput/index.ts#L12

The arguments for the TextInput constructor.

Properties

onValidate

onValidate?: (value: string) => boolean

A function that validates the value that is entered into the input and returns true if it is valid or false otherwise. If false then the input will be set in an error state and the value will not propagate to the binding.

Inherited from InputElementArgs

TreeViewArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeView/index.ts#L42

The arguments for the TreeView constructor.

Properties

allowDrag

allowDrag?: boolean

Whether dragging a TreeViewItem is allowed. Defaults to true.

allowRenaming

allowRenaming?: boolean

Whether renaming TreeViewItems is allowed by double clicking on them. Defaults to false.

allowReordering

allowReordering?: boolean

Whether reordering TreeViewItems is allowed. Defaults to true.

dragScrollElement

dragScrollElement?: Element

The element to scroll on drag. Defaults to this TreeView's element.

filter

filter?: string

A filter that searches TreeViewItems and only shows the ones that are relevant to the filter.

onContextMenu

onContextMenu?: (evt: MouseEvent, item: TreeViewItem) => void

A function to be called when we right click on a TreeViewItem.

onReparent

onReparent?: (reparented: ReparentedItem[]) => void

A function to be called when we try to reparent tree items. If a function is provided then the tree items will not be reparented by the TreeView but instead will rely on the function to reparent them as it sees fit.

Inherited from ContainerArgs

TreeViewItemArgs

Interface · extends ContainerArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeViewItem/index.ts#L39

The arguments for the TreeViewItem constructor.

Properties

allowDrag

allowDrag?: boolean

Whether this TreeViewItem can be dragged. Only considered if the parent TreeView has allowDrag set to true. Defaults to true.

allowDrop

allowDrop?: boolean

Whether dropping is allowed on the TreeViewItem. Defaults to true.

allowSelect

allowSelect?: boolean

Whether the item can be selected. Defaults to true.

icon

icon?: string

The icon shown before the text in the TreeViewItem. Defaults to 'E360'.

onDeselect

onDeselect?: () => void

Method to be called when the TreeViewItem is deselected.

onSelect

onSelect?: (deselect: () => void) => void

Method to be called when the TreeViewItem is selected.

open

open?: boolean

Whether the item is open (showing its children). Defaults to false.

selected

selected?: boolean

Whether the item is selected.

text

text?: string

The text shown by the TreeViewItem.

Inherited from ContainerArgs

VectorInputArgs

Interface · extends IBindableArgs<number[] | string>, IMultiPlaceholderArgs

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/VectorInput/index.ts#L20

The arguments for the VectorInput constructor.

Properties

dimensions

dimensions?: 2 | 3 | 4

The number of dimensions in the vector. Can be between 2 to 4. Defaults to 3.

max

max?: number

The maximum value of each vector element.

min

min?: number

The minimum value of each vector element.

precision

precision?: number

The decimal precision of each vector element. Defaults to 7.

step

step?: number

The incremental step when using arrow keys or dragger for each vector element.

stepPrecision

stepPrecision?: number

The incremental step when holding Shift and using arrow keys or dragger for each vector element.

Inherited from ElementArgs

Inherited from IMultiPlaceholderArgs

Inherited from IBindableArgs

revision

Variable

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/index.ts#L23

The git revision of the PCUI library. This is a string of the git commit hash.

const revision: "PACKAGE_REVISION" = 'PACKAGE_REVISION'

version

Variable

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/index.ts#L18

The version of the PCUI library. This is a string in semantic version format of major.minor.patch.

const version: "PACKAGE_VERSION" = 'PACKAGE_VERSION'