# 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. Index: https://api.playcanvas.com/pcui/llms.txt Total Pages: 77 Generated: 2026-10-08 ================================================================================ URL: https://api.playcanvas.com/pcui/classes/ArrayInput.md # ArrayInput Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md), [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ArrayInput/index.ts#L69 Element that allows editing an array of values. ## Constructors ### constructor ```ts new ArrayInput(args?: Readonly) ``` Creates a new ArrayInput. **Parameters** - `args` (`Readonly<`[`ArrayInputArgs`](https://api.playcanvas.com/pcui/interfaces/ArrayInputArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### binding ```ts get binding(): BindingBase set binding(value: BindingBase) ``` Sets the Binding object for the element. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Gets whether array elements should flash when their values change. ### value ```ts get value(): unknown[] set value(value: unknown[]) ``` Gets the value of the ArrayInput as an array. ### values ```ts set values(values: unknown[][]) ``` Sets multiple array values on the ArrayInput. ## Methods ### blur ```ts blur(): void ``` Unfocus the element ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### focus ```ts focus(): void ``` Focus on the element. If the input contains text and select is provided, the text will be selected on focus. ### forEachArrayElement ```ts forEachArrayElement(fn: (element: Element, index: number) => false | void): void ``` Executes the specified function for each array element. **Parameters** - `fn` (`(element: Element, index: number) => false | void`): The function with signature (element, index) => bool to execute. If the function returns `false` then the iteration will early out. ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers and paths to the Element's data binding. **Parameters** - `observers` (`Observer | Observer[]`): An array of observers or a single observer. - `paths` (`string | string[]`): A path for the observer(s) or an array of paths that maps to each separate observer. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ## Events ### EVENT_LINK_ELEMENT ```ts static readonly EVENT_LINK_ELEMENT: "linkElement" = 'linkElement' ``` Fired when an array element is linked to observers. **Example** ```ts arrayInput.on('linkElement', (element: Element, index: number, path: string) => { console.log(`Element ${index} is now linked to ${path}`); }); ``` ### EVENT_UNLINK_ELEMENT ```ts static readonly EVENT_UNLINK_ELEMENT: "unlinkElement" = 'unlinkElement' ``` Fired when an array element is unlinked from observers. **Example** ```ts arrayInput.on('unlinkElement', (element: Element, index: number) => { console.log(`Element ${index} is now unlinked`); }); ``` ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/BindingBase.md # 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](https://api.playcanvas.com/pcui/interfaces/IBindable.md) [Element](https://developer.mozilla.org/docs/Web/API/Element)s and Observers. ## Constructors ### constructor ```ts new BindingBase(args: Readonly) ``` Creates a new binding. **Parameters** - `args` (`Readonly<`[`BindingBaseArgs`](https://api.playcanvas.com/pcui/interfaces/BindingBaseArgs.md)`>`): The arguments. ## Accessors ### applyingChange ```ts get applyingChange(): boolean set applyingChange(value: boolean) ``` Gets whether the binding is currently applying a change, either to the observers or the element. ### element ```ts get element(): IBindable set element(value: IBindable) ``` Gets the element. ### historyCombine ```ts get historyCombine(): boolean set historyCombine(value: boolean) ``` Gets whether to combine history actions when applying changes to observers. ### historyEnabled ```ts get historyEnabled(): boolean set historyEnabled(value: boolean) ``` Gets whether history is enabled for the binding. ### historyName ```ts get historyName(): string set historyName(value: string) ``` Gets the name of the history action when applying changes to observers. ### historyPostfix ```ts get historyPostfix(): string set historyPostfix(value: string) ``` Gets the string to postfix [historyName](https://api.playcanvas.com/pcui/classes/BindingBase.md#historyname) with. ### historyPrefix ```ts get historyPrefix(): string set historyPrefix(value: string) ``` Gets the string to prefix [historyName](https://api.playcanvas.com/pcui/classes/BindingBase.md#historyname) with. ### linked ```ts get linked(): boolean ``` Gets whether the binding is linked to observers. ### observers ```ts get observers(): Observer[] ``` Gets the linked observers. ### paths ```ts get paths(): string[] ``` Gets the linked paths. ## Methods ### addValue ```ts addValue(value: unknown): void ``` Adds (inserts) a value to the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value. ### addValues ```ts addValues(values: unknown[]): void ``` Adds (inserts) multiple values to the linked observers at the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### clone ```ts clone(): BindingBase ``` Clones the binding. To be implemented by derived classes. **Returns** [`BindingBase`](https://api.playcanvas.com/pcui/classes/BindingBase.md) ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers to the specified paths. **Parameters** - `observers` (`Observer | Observer[]`): The observer(s). - `paths` (`string | string[]`): The path(s). The behavior of the binding depends on how many paths are passed. If an equal amount of paths and observers are passed then the binding will map each path to each observer at each index. If more observers than paths are passed then the path at index 0 will be used for all observers. If one observer and multiple paths are passed then all of the paths will be used for the observer (e.g. for curves). ### removeValue ```ts removeValue(value: unknown): void ``` Removes a value from the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value. ### removeValues ```ts removeValues(values: unknown[]): void ``` Removes multiple values from the linked observers from the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### setValue ```ts setValue(value: unknown): void ``` Sets a value to the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value ### setValues ```ts setValues(values: unknown[]): void ``` Sets an array of values to the linked observers at the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### unlink ```ts unlink(): void ``` Unlinks the observers and paths. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/BindingElementToObservers.md # BindingElementToObservers Class · extends [`BindingBase`](https://api.playcanvas.com/pcui/classes/BindingBase.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingElementToObservers/index.ts#L9 Provides one way binding between an [IBindable](https://api.playcanvas.com/pcui/interfaces/IBindable.md) element and Observers. Any changes from the element will be propagated to the observers. ## Methods ### addValue ```ts addValue(value: unknown): void ``` Adds (inserts) a value to the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value. ### addValues ```ts addValues(values: unknown[]): void ``` Adds (inserts) multiple values to the linked observers at the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### clone ```ts clone(): BindingElementToObservers ``` Clone the binding and return a new instance. **Returns** [`BindingElementToObservers`](https://api.playcanvas.com/pcui/classes/BindingElementToObservers.md) ### removeValue ```ts removeValue(value: unknown): void ``` Removes a value from the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value. ### removeValues ```ts removeValues(values: unknown[]): void ``` Removes multiple values from the linked observers from the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### setValue ```ts setValue(value: unknown): void ``` Sets a value to the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value ### setValues ```ts setValues(values: unknown[]): void ``` Sets an array of values to the linked observers at the linked paths. **Parameters** - `values` (`unknown[]`): The values. ## Inherited from [BindingBase](https://api.playcanvas.com/pcui/classes/BindingBase.md) - `new BindingElementToObservers(args: Readonly)` - `get element(): IBindable` · `set element(value: IBindable)` - `get historyEnabled(): boolean` · `set historyEnabled(value: boolean)` - `get historyName(): string` · `set historyName(value: string)` - `get historyPrefix(): string` · `set historyPrefix(value: string)` - `get linked(): boolean` - `get observers(): Observer[]` - `get paths(): string[]` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` ## Inherited from [BindingObserversToElement](https://api.playcanvas.com/pcui/classes/BindingObserversToElement.md) - `get applyingChange(): boolean` · `set applyingChange(value: boolean)` - `get historyCombine(): boolean` · `set historyCombine(value: boolean)` - `get historyPostfix(): string` · `set historyPostfix(value: string)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/BindingObserversToElement.md # BindingObserversToElement Class · extends [`BindingBase`](https://api.playcanvas.com/pcui/classes/BindingBase.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingObserversToElement/index.ts#L21 Provides one way binding between Observers and an [IBindable](https://api.playcanvas.com/pcui/interfaces/IBindable.md) element and Observers. Any changes from the observers will be propagated to the element. ## Constructors ### constructor ```ts new BindingObserversToElement(args?: Readonly) ``` Creates a new BindingObserversToElement instance. **Parameters** - `args` (`Readonly<`[`BindingObserversToElementArgs`](https://api.playcanvas.com/pcui/interfaces/BindingObserversToElementArgs.md)`>`, optional, default `{}`): The arguments. ## Methods ### clone ```ts clone(): BindingObserversToElement ``` Clone the BindingObserversToElement instance. **Returns** [`BindingObserversToElement`](https://api.playcanvas.com/pcui/classes/BindingObserversToElement.md) ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers to the specified paths. **Parameters** - `observers` (`Observer | Observer[]`): The observer(s). - `paths` (`string | string[]`): The path(s). The behavior of the binding depends on how many paths are passed. If an equal amount of paths and observers are passed then the binding will map each path to each observer at each index. If more observers than paths are passed then the path at index 0 will be used for all observers. If one observer and multiple paths are passed then all of the paths will be used for the observer (e.g. for curves). ### unlink ```ts unlink(): void ``` Unlink the binding from its set of observers. ## Inherited from [BindingBase](https://api.playcanvas.com/pcui/classes/BindingBase.md) - `get applyingChange(): boolean` · `set applyingChange(value: boolean)` - `get element(): IBindable` · `set element(value: IBindable)` - `get historyCombine(): boolean` · `set historyCombine(value: boolean)` - `get historyEnabled(): boolean` · `set historyEnabled(value: boolean)` - `get historyName(): string` · `set historyName(value: string)` - `get historyPostfix(): string` · `set historyPostfix(value: string)` - `get historyPrefix(): string` · `set historyPrefix(value: string)` - `get linked(): boolean` - `get observers(): Observer[]` - `get paths(): string[]` - `addValue(value: unknown): void` - `addValues(values: unknown[]): void` - `removeValue(value: unknown): void` - `removeValues(values: unknown[]): void` - `setValue(value: unknown): void` - `setValues(values: unknown[]): void` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/BindingTwoWay.md # BindingTwoWay Class · extends [`BindingBase`](https://api.playcanvas.com/pcui/classes/BindingBase.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingTwoWay/index.ts#L28 Provides two way data binding between Observers and [IBindable](https://api.playcanvas.com/pcui/interfaces/IBindable.md) elements. This means that when the value of the Observers changes the IBindable will be updated and vice versa. ## Constructors ### constructor ```ts new BindingTwoWay(args?: Readonly) ``` Creates a new BindingTwoWay instance. **Parameters** - `args` (`Readonly<`[`BindingTwoWayArgs`](https://api.playcanvas.com/pcui/interfaces/BindingTwoWayArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### applyingChange ```ts get applyingChange(): boolean set applyingChange(value: boolean) ``` Sets whether the binding is currently applying a change, either to the observers or the element. ### element ```ts get element(): IBindable set element(value: IBindable) ``` Sets the element. ### historyCombine ```ts 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 ```ts 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 ```ts get historyPostfix(): string set historyPostfix(value: string) ``` Sets the string to postfix [historyName](https://api.playcanvas.com/pcui/classes/BindingBase.md#historyname) with. ### historyPrefix ```ts get historyPrefix(): string set historyPrefix(value: string) ``` Sets the string to prefix [historyName](https://api.playcanvas.com/pcui/classes/BindingBase.md#historyname) with. ## Methods ### addValue ```ts addValue(value: unknown): void ``` Adds (inserts) a value to the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value. ### addValues ```ts addValues(values: unknown[]): void ``` Adds (inserts) multiple values to the linked observers at the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### clone ```ts clone(): BindingTwoWay ``` Clones the binding. To be implemented by derived classes. **Returns** [`BindingTwoWay`](https://api.playcanvas.com/pcui/classes/BindingTwoWay.md) ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers to the specified paths. **Parameters** - `observers` (`Observer | Observer[]`): The observer(s). - `paths` (`string | string[]`): The path(s). The behavior of the binding depends on how many paths are passed. If an equal amount of paths and observers are passed then the binding will map each path to each observer at each index. If more observers than paths are passed then the path at index 0 will be used for all observers. If one observer and multiple paths are passed then all of the paths will be used for the observer (e.g. for curves). ### removeValue ```ts removeValue(value: unknown): void ``` Removes a value from the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value. ### removeValues ```ts removeValues(values: unknown[]): void ``` Removes multiple values from the linked observers from the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### setValue ```ts setValue(value: unknown): void ``` Sets a value to the linked observers at the linked paths. **Parameters** - `value` (`unknown`): The value ### setValues ```ts setValues(values: unknown[]): void ``` Sets an array of values to the linked observers at the linked paths. **Parameters** - `values` (`unknown[]`): The values. ### unlink ```ts unlink(): void ``` Unlinks the observers and paths. ## Inherited from [BindingBase](https://api.playcanvas.com/pcui/classes/BindingBase.md) - `get historyName(): string` · `set historyName(value: string)` - `get linked(): boolean` - `get observers(): Observer[]` - `get paths(): string[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/BooleanInput.md # BooleanInput Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)``, [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/BooleanInput/index.ts#L26 A checkbox element. ## Constructors ### constructor ```ts new BooleanInput(args?: Readonly) ``` Creates a new BooleanInput. **Parameters** - `args` (`Readonly<`[`BooleanInputArgs`](https://api.playcanvas.com/pcui/interfaces/BooleanInputArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Sets whether the input should flash on changes. ### value ```ts get value(): boolean set value(value: boolean) ``` Sets the value of the Element. ### values ```ts set values(values: boolean[]) ``` Sets multiple values on the Element. It is up to the Element to determine how to display them. ## Methods ### blur ```ts blur(): void ``` Unfocus the element ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### focus ```ts 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](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Button.md # Button Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Button/index.ts#L33 User input with click interaction. ## Constructors ### constructor ```ts new Button(args?: Readonly) ``` Creates a new Button. **Parameters** - `args` (`Readonly<`[`ButtonArgs`](https://api.playcanvas.com/pcui/interfaces/ButtonArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### icon ```ts get icon(): string set icon(value: string) ``` Gets the CSS code for an icon for the button. ### size ```ts get size(): string set size(value: string) ``` Gets the 'size' type of the button. ### text ```ts get text(): string set text(value: string) ``` Gets the text of the button. ## Methods ### blur ```ts blur(): void ``` Unfocuses (blurs) the button. ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### focus ```ts focus(): void ``` Focuses the button. ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` - `get parent(): Element` · `set parent(value: Element)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Canvas.md # Canvas Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Canvas/index.ts#L20 Represents a Canvas. ## Constructors ### constructor ```ts new Canvas(args?: Readonly) ``` Creates a new Canvas. **Parameters** - `args` (`Readonly<`[`CanvasArgs`](https://api.playcanvas.com/pcui/interfaces/CanvasArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### height ```ts get height(): number set height(value: number) ``` Gets the height of the canvas. ### pixelHeight ```ts get pixelHeight(): number ``` Gets the pixel height of the canvas. ### pixelRatio ```ts get pixelRatio(): number ``` Gets the pixel ratio of the canvas. ### pixelWidth ```ts get pixelWidth(): number ``` Gets the pixel height of the canvas. ### width ```ts get width(): number set width(value: number) ``` Gets the width of the canvas. ## Methods ### resize ```ts resize(width: number, height: number): void ``` Resize the canvas using the given width and height parameters. **Parameters** - `width` (`number`): The new width of the canvas. - `height` (`number`): The new height of the canvas. ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `destroy(): void` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Code.md # Code Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Code/index.ts#L22 Represents a code block. ## Constructors ### constructor ```ts new Code(args?: Readonly) ``` Creates a new Code. **Parameters** - `args` (`Readonly<`[`CodeArgs`](https://api.playcanvas.com/pcui/interfaces/CodeArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### text ```ts get text(): string set text(value: string) ``` Gets the text to display in the code block. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `destroy(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/ColorPicker.md # ColorPicker Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ColorPicker/index.ts#L30 Represents a color picker. ## Constructors ### constructor ```ts new ColorPicker(args?: Readonly) ``` Creates a new ColorPicker. **Parameters** - `args` (`Readonly<`[`ColorPickerArgs`](https://api.playcanvas.com/pcui/interfaces/ColorPickerArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Sets whether the input should flash on changes. ### value ```ts get value(): number[] set value(value: number[]) ``` Sets the value of the Element. ### values ```ts set values(values: number[][]) ``` Sets multiple values on the Element. It is up to the Element to determine how to display them. ## Methods ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Container.md # Container Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Container/index.ts#L62 A container is the basic building block for [Element](https://api.playcanvas.com/pcui/classes/Element.md)s that are grouped together. A container can contain any other element including other containers. ## Constructors ### constructor ```ts new Container(args?: Readonly) ``` Creates a new Container. **Parameters** - `args` (`Readonly<`[`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### domContent ```ts get domContent(): HTMLElement set domContent(value: HTMLElement) ``` Gets the internal DOM element used as a the container of all children. ### flex ```ts get flex(): boolean set flex(value: boolean) ``` Gets whether the Element supports flex layout. ### grid ```ts get grid(): boolean set grid(value: boolean) ``` Gets whether the Element supports the grid layout. ### resizable ```ts get resizable(): string set resizable(value: string) ``` Gets whether the Element is resizable and where the resize handle is located. ### resizeMax ```ts get resizeMax(): number set resizeMax(value: number) ``` Gets the maximum size the Element can take when resized in pixels. ### resizeMin ```ts get resizeMin(): number set resizeMin(value: number) ``` Gets the minimum size the Element can take when resized in pixels. ### scrollable ```ts get scrollable(): boolean set scrollable(value: boolean) ``` Gets whether the Element should be scrollable. ## Methods ### _buildDomNode ```ts 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** - `node` (`DomNode`): The current element in the dom structure which must be recursively traversed and appended to its parent. **Returns** [`Element`](https://api.playcanvas.com/pcui/classes/Element.md): The recursively appended element node. ### append ```ts append(element: Child): void ``` Appends an element to the container. **Parameters** - `element` (`Child`): The element to append. ### appendAfter ```ts appendAfter(element: Child, referenceElement: Child): void ``` Appends an element to the container just after the specified reference element. **Parameters** - `element` (`Child`): The element to append. - `referenceElement` (`Child`): The element after which the element will be appended. ### appendBefore ```ts appendBefore(element: Child, referenceElement: Child): void ``` Appends an element to the container before the specified reference element. **Parameters** - `element` (`Child`): The element to append. - `referenceElement` (`Child`): The element before which the element will be appended. ### buildDom ```ts 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** - `dom` (`DomNode[]`): An array of child pcui elements to append to this container. **Example** ```ts buildDom([ { child1: pcui.Label() }, { root: { container1: pcui.Container() }, children: [ { child2: pcui.Label() }, { child3: pcui.Label() } ] } ]); ``` ### clear ```ts clear(): void ``` Clears all children from the container. ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### forEachChild ```ts 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** - `fn` (`(child: Element, index: number) => false | void`): The function to call for each child element. ### move ```ts move(element: Element, index: number): void ``` Moves the specified child at the specified index. **Parameters** - `element` ([`Element`](https://api.playcanvas.com/pcui/classes/Element.md)): The element to move. - `index` (`number`): The index to move the element to. ### prepend ```ts prepend(element: Child): void ``` Inserts an element in the beginning of the container. **Parameters** - `element` (`Child`): The element to prepend. ### remove ```ts remove(element: Element): void ``` Removes the specified child element from the container. **Parameters** - `element` ([`Element`](https://api.playcanvas.com/pcui/classes/Element.md)): The element to remove. ### resize ```ts resize(x?: number, y?: number): void ``` Resize the container. **Parameters** - `x` (`number`, optional, default `0`): The number of pixels to resize the width. - `y` (`number`, optional, default `0`): The number of pixels to resize the height. ## Events ### EVENT_APPEND ```ts static readonly EVENT_APPEND: "append" = 'append' ``` Fired when a child Element gets added to the Container. **Example** ```ts const container = new Container(); container.on('append', (element: Element) => { console.log('Element added to container:', element); }); ``` ### EVENT_REMOVE ```ts static readonly EVENT_REMOVE: "remove" = 'remove' ``` Fired when a child Element gets removed from the Container. **Example** ```ts const container = new Container(); container.on('remove', (element: Element) => { console.log('Element removed from container:', element); }); ``` ### EVENT_RESIZE ```ts static readonly EVENT_RESIZE: "resize" = 'resize' ``` Fired when the container gets resized using the resize handle. **Example** ```ts const container = new Container(); container.on('resize', () => { console.log('Container resized to:', container.width, container.height, 'px'); }); ``` ### EVENT_SCROLL ```ts static readonly EVENT_SCROLL: "scroll" = 'scroll' ``` Fired when the container is scrolled. The native DOM scroll event is passed to the event handler. **Example** ```ts const container = new Container(); container.on('scroll', (event: Event) => { console.log('Container scrolled:', event); }); ``` ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` - `get parent(): Element` · `set parent(value: Element)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Divider.md # Divider Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Divider/index.ts#L9 Represents a vertical division between two elements. ## Constructors ### constructor ```ts new Divider(args?: Readonly) ``` Creates a new Divider. **Parameters** - `args` (`Readonly`, optional, default `{}`): The arguments. ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `destroy(): void` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Element.md # 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 ```ts new Element(args?: Readonly) ``` Creates a new Element. **Parameters** - `args` (`Readonly`, optional, default `{}`): The arguments. ## Accessors ### alignItems ```ts get alignItems(): string set alignItems(value: string) ``` Gets the align-items CSS property. ### alignSelf ```ts get alignSelf(): string set alignSelf(value: string) ``` Gets the align-self CSS property. ### binding ```ts get binding(): BindingBase set binding(value: BindingBase) ``` Gets the Binding object for the element. ### class ```ts get class(): DOMTokenList ``` Get the `DOMTokenList` of the underlying DOM element. This is essentially a shortcut to `element.dom.classList`. ### dom ```ts get dom(): HTMLElement ``` Gets the root DOM node for this Element. ### enabled ```ts get enabled(): boolean set enabled(value: boolean) ``` Gets whether the Element or its parent chain is enabled or not. ### error ```ts get error(): boolean set error(value: boolean) ``` Gets whether the Element is in an error state. ### flexBasis ```ts get flexBasis(): string set flexBasis(value: string | number) ``` Gets the flex-basis CSS property. ### flexDirection ```ts get flexDirection(): string set flexDirection(value: string) ``` Gets the flex-direction CSS property. ### flexGrow ```ts get flexGrow(): string set flexGrow(value: string | number) ``` Gets the flex-grow CSS property. ### flexShrink ```ts get flexShrink(): string set flexShrink(value: string | number) ``` Gets the flex-shrink CSS property. ### flexWrap ```ts get flexWrap(): string set flexWrap(value: string) ``` Gets the flex-wrap CSS property. ### height ```ts get height(): number set height(value: string | number) ``` Gets the height of the Element in pixels. ### hidden ```ts get hidden(): boolean set hidden(value: boolean) ``` Gets whether the Element is hidden. ### hiddenToRoot ```ts 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 ```ts get ignoreParent(): boolean set ignoreParent(value: boolean) ``` Gets whether the Element will ignore parent events & variable states. ### justifyContent ```ts get justifyContent(): string set justifyContent(value: string) ``` Gets the justify-content CSS property. ### justifySelf ```ts get justifySelf(): string set justifySelf(value: string) ``` Gets the justify-self CSS property. ### parent ```ts get parent(): Element set parent(value: Element) ``` Gets the parent Element. ### readOnly ```ts get readOnly(): boolean set readOnly(value: boolean) ``` Gets whether the Element is read only. ### style ```ts get style(): CSSStyleDeclaration ``` Shortcut to Element.dom.style. ### tabIndex ```ts get tabIndex(): number set tabIndex(value: number) ``` Gets the tabIndex of the Element. ### width ```ts get width(): number set width(value: string | number) ``` Gets the width of the Element in pixels. ## Methods ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### flash ```ts flash(): void ``` Triggers a flash animation on the Element. ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers and paths to the Element's data binding. **Parameters** - `observers` (`Observer | Observer[]`): An array of observers or a single observer. - `paths` (`string | string[]`): A path for the observer(s) or an array of paths that maps to each separate observer. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ### create ```ts static create(type: string, args: ElementArgs): Type ``` Creates a new Element of the desired type. **Parameters** - `type` (`string`): The type of the Element (registered by Element#register). - `args` (`ElementArgs`): Arguments for the Element. **Returns** [`Type`](https://api.playcanvas.com/pcui/classes/ArrayInput.md#createtype): The new Element or undefined if type is not found. ### register ```ts static register(type: string, cls: Object, defaultArguments?: object): void ``` **Parameters** - `type` (`string`): The type we want to reference this Element by. - `cls` (`Object`): The actual class of the Element. - `defaultArguments` (`object`, optional): Default arguments when creating this type. ### unregister ```ts static unregister(type: string): void ``` **Parameters** - `type` (`string`): The type we want to unregister. ## Events ### EVENT_CLICK ```ts 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** ```ts const element = new Element(); element.on('click', (evt: MouseEvent) => { console.log('Element clicked'); }); ``` ### EVENT_DESTROY ```ts 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** ```ts const element = new Element(); element.on('destroy', (dom: HTMLElement, element: Element) => { console.log('Element destroyed'); }); ``` ### EVENT_DISABLE ```ts static readonly EVENT_DISABLE: "disable" = 'disable' ``` Fired when the Element gets disabled. **Example** ```ts const element = new Element(); element.on('disable', () => { console.log('Element disabled'); }); ``` ### EVENT_ENABLE ```ts static readonly EVENT_ENABLE: "enable" = 'enable' ``` Fired when the Element gets enabled. **Example** ```ts const element = new Element(); element.on('enable', () => { console.log('Element enabled'); }); ``` ### EVENT_HIDE ```ts static readonly EVENT_HIDE: "hide" = 'hide' ``` Fired when the Element gets hidden. **Example** ```ts const element = new Element(); element.on('hide', () => { console.log('Element hidden'); }); ``` ### EVENT_HIDE_TO_ROOT ```ts static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot' ``` Fired when the Element or any of its parent get hidden. **Example** ```ts const element = new Element(); element.on('hideToRoot', () => { console.log('Element or one of its parents hidden'); }); ``` ### EVENT_HOVER ```ts 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** ```ts const element = new Element(); element.on('hover', (evt: MouseEvent) => { console.log('Element hovered'); }); ``` ### EVENT_HOVER_END ```ts 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** ```ts const element = new Element(); element.on('hoverend', (evt: MouseEvent) => { console.log('Element hover ended'); }); ``` ### EVENT_PARENT ```ts static readonly EVENT_PARENT: "parent" = 'parent' ``` Fired when the Element's parent gets set. **Example** ```ts const element = new Element(); element.on('parent', (parent: Element) => { console.log(`Element's parent is now ${parent}`); }); ``` ### EVENT_READ_ONLY ```ts static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly' ``` Fired when the readOnly property of an Element changes. **Example** ```ts const element = new Element(); element.on('readOnly', (readOnly: boolean) => { console.log(`Element is now ${readOnly ? 'read only' : 'editable'}`); }); ``` ### EVENT_SHOW ```ts static readonly EVENT_SHOW: "show" = 'show' ``` Fired when the Element stops being hidden. **Example** ```ts const element = new Element(); element.on('show', () => { console.log('Element shown'); }); ``` ### EVENT_SHOW_TO_ROOT ```ts static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot' ``` Fired when the Element and all of its parents become visible. **Example** ```ts const element = new Element(); element.on('showToRoot', () => { console.log('Element and all of its parents shown'); }); ``` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/GradientPicker.md # GradientPicker Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GradientPicker/index.ts#L89 Represents a gradient picker. ## Constructors ### constructor ```ts new GradientPicker(args?: Readonly) ``` Creates a new GradientPicker. **Parameters** - `args` (`Readonly<`[`GradientPickerArgs`](https://api.playcanvas.com/pcui/interfaces/GradientPickerArgs.md)`>`, optional, default `{}`): The arguments. Extends the Element arguments. Any settable property can also be set through the constructor. ## Methods ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/GridView.md # GridView Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) 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 [GridViewItem](https://api.playcanvas.com/pcui/classes/GridViewItem.md)s. ## Constructors ### constructor ```ts new GridView(args?: Readonly) ``` Creates a new GridView. **Parameters** - `args` (`Readonly<`[`GridViewArgs`](https://api.playcanvas.com/pcui/interfaces/GridViewArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### selected ```ts get selected(): GridViewItem[] ``` Gets the selected GridViewItems. ### vertical ```ts get vertical(): boolean ``` Gets whether the grid layout is vertical or not. ## Methods ### deselect ```ts deselect(): void ``` Deselects all selected grid view items. ### filter ```ts filter(): void ``` Filters grid view items with the filter function provided in the constructor. ### filterAsync ```ts 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: - filter:start - When filtering starts. - filter:end - When filtering ends. - filter:delay - When an animation frame is requested to process another batch. - filter:cancel - When filtering is canceled. **Parameters** - `batchLimit` (`number`, optional, default `100`): The maximum number of items to show before requesting another animation frame. ### filterAsyncCancel ```ts filterAsyncCancel(): void ``` Cancels asynchronous filtering. ## Events ### EVENT_ACTIVATE ```ts static readonly EVENT_ACTIVATE: "activate" = 'activate' ``` Fired when user activates a [GridViewItem](https://api.playcanvas.com/pcui/classes/GridViewItem.md) by pressing Enter or double-clicking. **Example** ```ts const gridView = new GridView(); gridView.on('activate', (item: GridViewItem) => { console.log(`Activated item ${item.text}`); }); ``` ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/GridViewItem.md # GridViewItem Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) · implements [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GridViewItem/index.ts#L45 Represents a grid view item used in [GridView](https://api.playcanvas.com/pcui/classes/GridView.md). ## Constructors ### constructor ```ts new GridViewItem(args?: Readonly) ``` Creates a new GridViewItem. **Parameters** - `args` (`Readonly<`[`GridViewItemArgs`](https://api.playcanvas.com/pcui/interfaces/GridViewItemArgs.md)`>`, optional, default `{}`): The arguments. ## Properties ### allowSelect ```ts allowSelect: boolean = true ``` Determines whether the item can be selected. Defaults to `true`. ## Accessors ### nextSibling ```ts get nextSibling(): GridViewItem ``` Gets the next visible sibling grid view item. ### previousSibling ```ts get previousSibling(): GridViewItem ``` Gets the previous visible sibling grid view item. ### selected ```ts get selected(): boolean set selected(value: boolean) ``` Gets whether the item is selected. ### text ```ts get text(): string set text(value: string) ``` Gets the text of the item. ## Methods ### blur ```ts blur(): void ``` Unfocus the element ### focus ```ts focus(): void ``` Focus on the element. If the input contains text and select is provided, the text will be selected on focus. ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers and paths to the Element's data binding. **Parameters** - `observers` (`Observer | Observer[]`): An array of observers or a single observer. - `paths` (`string | string[]`): A path for the observer(s) or an array of paths that maps to each separate observer. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/InfoBox.md # InfoBox Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/InfoBox/index.ts#L38 Represents an information box. ## Constructors ### constructor ```ts new InfoBox(args?: Readonly) ``` Creates a new InfoBox. **Parameters** - `args` (`Readonly<`[`InfoBoxArgs`](https://api.playcanvas.com/pcui/interfaces/InfoBoxArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### icon ```ts get icon(): string set icon(value: string) ``` Gets the icon of the info box. ### text ```ts get text(): string set text(value: string) ``` Gets the text of the info box. ### title ```ts get title(): string set title(value: string) ``` Gets the title of the info box. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `destroy(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/InputElement.md # InputElement Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md), [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md), [`IPlaceholder`](https://api.playcanvas.com/pcui/interfaces/IPlaceholder.md) 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](https://api.playcanvas.com/pcui/classes/TextInput.md) and [NumericInput](https://api.playcanvas.com/pcui/classes/NumericInput.md). It is not intended to be used directly. ## Properties ### blurOnEnter ```ts blurOnEnter: boolean = true ``` Determines whether the input should blur when the enter key is pressed. ### blurOnEscape ```ts blurOnEscape: boolean = true ``` Determines whether the input should blur when the escape key is pressed. ## Accessors ### input ```ts get input(): HTMLInputElement ``` Gets the input DOM element. ### keyChange ```ts get keyChange(): boolean set keyChange(value: boolean) ``` Gets the method to call when keyup is called on the input DOM element. ### placeholder ```ts get placeholder(): string set placeholder(value: string) ``` Sets the placeholder text of the input. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Sets whether the input should flash on changes. ### value ```ts abstract get value(): unknown abstract set value(value: unknown) ``` Sets the value of the Element. ### values ```ts 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 ```ts blur(): void ``` Unfocuses (blurs) the input element. ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### focus ```ts 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** - `select` (`boolean`, optional): If `true`, the input text will be selected. ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Label.md # Label Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IPlaceholder`](https://api.playcanvas.com/pcui/interfaces/IPlaceholder.md), [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)`` 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 ```ts new Label(args?: Readonly) ``` Creates a new Label. **Parameters** - `args` (`Readonly<`[`LabelArgs`](https://api.playcanvas.com/pcui/interfaces/LabelArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### placeholder ```ts get placeholder(): string set placeholder(value: string) ``` Gets the placeholder text of the Label. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Gets whether the Label should flash when its value changes. ### text ```ts get text(): string set text(value: string) ``` Gets the text of the Label. ### value ```ts get value(): string set value(value: string) ``` Gets the value of the Label. This is an alias for [Label#text](https://api.playcanvas.com/pcui/classes/Label.md#text). ### values ```ts 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](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `destroy(): void` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/LabelGroup.md # LabelGroup Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/LabelGroup/index.ts#L34 Represents a group of an [Element](https://api.playcanvas.com/pcui/classes/Element.md) and a [Label](https://api.playcanvas.com/pcui/classes/Label.md). Useful for rows of labeled fields. ## Constructors ### constructor ```ts new LabelGroup(args?: Readonly) ``` Creates a new LabelGroup. **Parameters** - `args` (`Readonly<`[`LabelGroupArgs`](https://api.playcanvas.com/pcui/interfaces/LabelGroupArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### field ```ts get field(): Element ``` The field element. ### label ```ts get label(): Label ``` The label element. ### labelAlignTop ```ts get labelAlignTop(): boolean set labelAlignTop(value: boolean) ``` Gets whether to align the label at the top of the group. ### text ```ts get text(): string set text(value: string) ``` Gets the text of the label. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `destroy(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Menu.md # Menu Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) · implements [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Menu/index.ts#L34 A Menu is a list of [MenuItem](https://api.playcanvas.com/pcui/classes/MenuItem.md)s 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 ```ts new Menu(args?: Readonly) ``` Creates a new Menu. **Parameters** - `args` (`Readonly<`[`MenuArgs`](https://api.playcanvas.com/pcui/interfaces/MenuArgs.md)`>`, optional, default `{}`): The arguments. ## Methods ### blur ```ts blur(): void ``` Unfocus the element ### clear ```ts clear(): void ``` Remove all the current menu items from the menu. ### focus ```ts focus(): void ``` Focus on the element. If the input contains text and select is provided, the text will be selected on focus. ### position ```ts position(x: number, y: number): void ``` Positions the top-left corner of the menu at the specified coordinates. **Parameters** - `x` (`number`): The x coordinate. - `y` (`number`): The y coordinate. **Example** ```ts // 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](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/MenuItem.md # MenuItem Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)`` 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](https://api.playcanvas.com/pcui/classes/Menu.md). A MenuItem can also contain child MenuItems (by appending them to the MenuItem). This can be useful to show nested Menus. ## Constructors ### constructor ```ts new MenuItem(args?: Readonly) ``` Creates a new MenuItem. **Parameters** - `args` (`Readonly<`[`MenuItemArgs`](https://api.playcanvas.com/pcui/interfaces/MenuItemArgs.md)`>`, optional, default `{}`): The arguments. ## Properties ### onIsEnabled ```ts onIsEnabled: () => boolean ``` The function that determines whether the MenuItem should be enabled when the Menu is shown. ### onIsVisible ```ts onIsVisible: () => boolean ``` The function that determines whether the MenuItem should be visible when the Menu is shown. ### onSelect ```ts onSelect: (evt?: MouseEvent) => void ``` The function called when the MenuItem is selected. ## Accessors ### binding ```ts get binding(): BindingBase set binding(value: BindingBase) ``` Gets the binding for the MenuItem label. ### hasChildren ```ts get hasChildren(): boolean ``` Returns whether the MenuItem has children. ### icon ```ts get icon(): string set icon(value: string) ``` Gets the CSS code for an icon for the MenuItem. ### menu ```ts get menu(): Menu set menu(value: Menu) ``` Gets the menu. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Sets whether the input should flash on changes. ### shortcut ```ts get shortcut(): string set shortcut(value: string) ``` Gets the keyboard shortcut displayed on the MenuItem. ### text ```ts get text(): string set text(value: string) ``` Gets the text shown on the MenuItem. ### value ```ts get value(): string set value(value: string) ``` Sets the value of the Element. ### values ```ts set values(values: string[]) ``` Sets multiple values on the Element. It is up to the Element to determine how to display them. ## Methods ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers and paths to the Element's data binding. **Parameters** - `observers` (`Observer | Observer[]`): An array of observers or a single observer. - `paths` (`string | string[]`): A path for the observer(s) or an array of paths that maps to each separate observer. ### select ```ts select(): void ``` Selects the MenuItem which also happens automatically when the user clicks on the MenuItem. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/NumericInput.md # NumericInput Class · extends [`InputElement`](https://api.playcanvas.com/pcui/classes/InputElement.md) 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 ```ts new NumericInput(args?: Readonly) ``` Creates a new NumericInput. **Parameters** - `args` (`Readonly<`[`NumericInputArgs`](https://api.playcanvas.com/pcui/interfaces/NumericInputArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### max ```ts get max(): number set max(value: number) ``` Gets the maximum value this field can take. ### min ```ts get min(): number set min(value: number) ``` Gets the minimum value this field can take. ### precision ```ts get precision(): number set precision(value: number) ``` Gets the precision of the input. ### step ```ts 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 ```ts get value(): number set value(value: string | number) ``` Gets the value of the NumericInput. ### values ```ts 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 ```ts static readonly EVENT_CHANGE: "change" = 'change' ``` Fired when the value of the NumericInput changes. **Example** ```ts const numericInput = new NumericInput(); numericInput.on('change', (value: number) => { console.log('Value changed to:', value); }); ``` ### EVENT_SLIDER_MOUSEDOWN ```ts static readonly EVENT_SLIDER_MOUSEDOWN: "slider:mousedown" = 'slider:mousedown' ``` Fired when the user starts dragging the slider. **Example** ```ts const numericInput = new NumericInput(); numericInput.on('slider:mousedown', (evt: MouseEvent) => { console.log('Slider drag started'); }); ``` ### EVENT_SLIDER_MOUSEUP ```ts static readonly EVENT_SLIDER_MOUSEUP: "slider:mouseup" = 'slider:mouseup' ``` Fired when the user stops dragging the slider. **Example** ```ts const numericInput = new NumericInput(); numericInput.on('slider:mouseup', () => { console.log('Slider drag ended'); }); ``` ## Inherited from [InputElement](https://api.playcanvas.com/pcui/classes/InputElement.md) - `blurOnEnter: boolean = true` - `blurOnEscape: boolean = true` - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get input(): HTMLInputElement` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get keyChange(): boolean` · `set keyChange(value: boolean)` - `get parent(): Element` · `set parent(value: Element)` - `get placeholder(): string` · `set placeholder(value: string)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get renderChanges(): boolean` · `set renderChanges(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `blur(): void` - `flash(): void` - `focus(select?: boolean): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Overlay.md # Overlay Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Overlay/index.ts#L28 An overlay element. ## Constructors ### constructor ```ts new Overlay(args?: Readonly) ``` Creates a new Overlay. **Parameters** - `args` (`Readonly<`[`OverlayArgs`](https://api.playcanvas.com/pcui/interfaces/OverlayArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### clickable ```ts get clickable(): boolean set clickable(value: boolean) ``` Gets whether the overlay can be hidden by clicking on it. ### transparent ```ts get transparent(): boolean set transparent(value: boolean) ``` Gets whether the overlay is transparent or not. ## Methods ### position ```ts position(x: number, y: number): void ``` Position the overlay at specific x, y coordinates. **Parameters** - `x` (`number`): The x coordinate. - `y` (`number`): The y coordinate. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Panel.md # Panel Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Panel/index.ts#L67 The Panel is a [Container](https://api.playcanvas.com/pcui/classes/Container.md) 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 ```ts new Panel(args?: Readonly) ``` Creates a new Panel. **Parameters** - `args` (`Readonly<`[`PanelArgs`](https://api.playcanvas.com/pcui/interfaces/PanelArgs.md)`>`, optional, default `{}`): The arguments. Extends the Container constructor arguments. All settable properties can also be set through the constructor. ## Accessors ### collapsed ```ts get collapsed(): boolean set collapsed(value: boolean) ``` Gets whether the Element should be collapsed. ### collapseHorizontally ```ts get collapseHorizontally(): boolean set collapseHorizontally(value: boolean) ``` Gets whether the panel collapses horizontally. ### collapsible ```ts get collapsible(): boolean set collapsible(value: boolean) ``` Gets whether the Element is collapsible. ### content ```ts get content(): Container ``` Gets the content container. ### header ```ts get header(): Container ``` Gets the header container. ### headerSize ```ts get headerSize(): number set headerSize(value: number) ``` Gets the height of the header in pixels. ### headerText ```ts get headerText(): string set headerText(value: string) ``` Gets the header text of the panel. ### removable ```ts get removable(): boolean set removable(value: boolean) ``` Gets whether the panel can be removed ### sortable ```ts get sortable(): boolean set sortable(value: boolean) ``` Gets whether the panel can be reordered. ## Events ### EVENT_COLLAPSE ```ts static readonly EVENT_COLLAPSE: "collapse" = 'collapse' ``` Fired when the panel gets collapsed. **Example** ```ts const panel = new Panel(); panel.on('collapse', () => { console.log('Panel collapsed'); }); ``` ### EVENT_EXPAND ```ts static readonly EVENT_EXPAND: "expand" = 'expand' ``` Fired when the panel gets expanded. **Example** ```ts const panel = new Panel(); panel.on('expand', () => { console.log('Panel expanded'); }); ``` ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Progress.md # Progress Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) 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 ```ts new Progress(args?: Readonly) ``` Creates a new Progress. **Parameters** - `args` (`Readonly<`[`ProgressArgs`](https://api.playcanvas.com/pcui/interfaces/ProgressArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### value ```ts get value(): number set value(val: number) ``` Gets the value of the progress bar. ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `destroy(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/RadioButton.md # RadioButton Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)``, [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/RadioButton/index.ts#L16 A radio button element. ## Constructors ### constructor ```ts new RadioButton(args?: Readonly) ``` Creates a new RadioButton. **Parameters** - `args` (`Readonly<`[`RadioButtonArgs`](https://api.playcanvas.com/pcui/interfaces/RadioButtonArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### renderChanges ```ts get renderChanges(): boolean set renderChanges(renderChanges: boolean) ``` Sets whether the input should flash on changes. ### value ```ts get value(): boolean set value(value: boolean) ``` Sets the value of the Element. ### values ```ts set values(values: boolean[]) ``` Sets multiple values on the Element. It is up to the Element to determine how to display them. ## Methods ### blur ```ts blur(): void ``` Unfocus the element ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### focus ```ts 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](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/SelectInput.md # SelectInput Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)``, [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md) 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 ```ts new SelectInput(args?: Readonly) ``` Creates a new SelectInput. **Parameters** - `args` (`Readonly<`[`SelectInputArgs`](https://api.playcanvas.com/pcui/interfaces/SelectInputArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### disabledOptions ```ts set disabledOptions(value: Record) ``` 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 ```ts set disabledValue(value: string) ``` Sets the value that is currently disabled (shown but not selectable). ### fallbackOrder ```ts set fallbackOrder(value: string[]) ``` Sets the order in which options should be checked for a valid fallback when the current value becomes disabled. ### invalidOptions ```ts get invalidOptions(): unknown[] set invalidOptions(value: unknown[]) ``` Gets the array of invalid options. ### multiSelect ```ts get multiSelect(): boolean ``` Gets whether the SelectInput allows selecting multiple options. ### options ```ts get options(): { t: string; v: string | number | boolean }[] set options(value: { t: string; v: string | number | boolean }[]) ``` Gets the dropdown options. ### placeholder ```ts get placeholder(): string set placeholder(value: string) ``` Gets the placeholder text for the input field. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Gets whether the SelectInput should flash when its value changes. ### value ```ts get value(): unknown set value(value: unknown) ``` Gets the value of the SelectInput. For multi-select inputs, this returns an array. ### values ```ts 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 ```ts 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** - `evt` (`PointerEvent`): Pointer event. ### blur ```ts blur(): void ``` Unfocuses (blurs) the SelectInput. ### close ```ts close(): void ``` Closes the dropdown menu. ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### focus ```ts focus(): void ``` Focuses the SelectInput. ### open ```ts open(): void ``` Opens the dropdown menu. ### toggle ```ts toggle(): void ``` Toggles the dropdown menu. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ## Events ### EVENT_BLUR ```ts static readonly EVENT_BLUR: "blur" = 'blur' ``` Fired when the SelectInput loses focus. **Example** ```ts const selectInput = new SelectInput(); selectInput.on('blur', () => { console.log('SelectInput blurred'); }); ``` ### EVENT_CHANGE ```ts static readonly EVENT_CHANGE: "change" = 'change' ``` Fired when the value of the SelectInput changes. **Example** ```ts const selectInput = new SelectInput(); selectInput.on('change', (value) => { console.log('Value changed to:', value); }); ``` ### EVENT_FOCUS ```ts static readonly EVENT_FOCUS: "focus" = 'focus' ``` Fired when the SelectInput receives focus. **Example** ```ts const selectInput = new SelectInput(); selectInput.on('focus', () => { console.log('SelectInput focused'); }); ``` ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/SliderInput.md # SliderInput Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)``, [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md), [`IPlaceholder`](https://api.playcanvas.com/pcui/interfaces/IPlaceholder.md) 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 ```ts new SliderInput(args?: Readonly) ``` Creates a new SliderInput. **Parameters** - `args` (`Readonly<`[`SliderInputArgs`](https://api.playcanvas.com/pcui/interfaces/SliderInputArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### max ```ts get max(): number set max(value: number) ``` Gets the maximum value that the numeric input field can take. ### min ```ts get min(): number set min(value: number) ``` Gets the minimum value that the numeric input field can take. ### placeholder ```ts get placeholder(): string set placeholder(value: string) ``` Sets the placeholder text of the input. ### precision ```ts get precision(): number set precision(value: number) ``` Gets the maximum number of decimals a value can take. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Sets whether the input should flash on changes. ### sliderMax ```ts get sliderMax(): number set sliderMax(value: number) ``` Gets the maximum value that the slider field can take. ### sliderMin ```ts get sliderMin(): number set sliderMin(value: number) ``` Gets the minimum value that the slider field can take. ### step ```ts get step(): number set step(value: number) ``` Gets the amount that the value will be increased or decreased when using the arrow keys. ### value ```ts get value(): number set value(value: number) ``` Sets the value of the Element. ### values ```ts set values(values: number[]) ``` Sets multiple values on the Element. It is up to the Element to determine how to display them. ## Methods ### blur ```ts blur(): void ``` Unfocus the element ### destroy ```ts destroy(): void ``` Destroys the Element and its events. ### focus ```ts 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](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/Spinner.md # Spinner Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Spinner/index.ts#L35 Represents a spinning icon. ## Constructors ### constructor ```ts new Spinner(args?: Readonly) ``` Creates a new Spinner. **Parameters** - `args` (`Readonly<`[`SpinnerArgs`](https://api.playcanvas.com/pcui/interfaces/SpinnerArgs.md)`>`, optional, default `{}`): The arguments. ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `destroy(): void` - `flash(): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/TextAreaInput.md # TextAreaInput Class · extends [`TextInput`](https://api.playcanvas.com/pcui/classes/TextInput.md) 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](https://api.playcanvas.com/pcui/classes/TextInput.md). ## Constructors ### constructor ```ts new TextAreaInput(args?: Readonly) ``` Creates a new TextAreaInput. **Parameters** - `args` (`Readonly<`[`TextAreaInputArgs`](https://api.playcanvas.com/pcui/interfaces/TextAreaInputArgs.md)`>`, optional, default `{}`): The arguments. ## Inherited from [TextInput](https://api.playcanvas.com/pcui/classes/TextInput.md) - `blurOnEnter: boolean = true` - `blurOnEscape: boolean = true` - `onValidate: (value: string) => boolean` - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get input(): HTMLInputElement` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get keyChange(): boolean` · `set keyChange(value: boolean)` - `get parent(): Element` · `set parent(value: Element)` - `get placeholder(): string` · `set placeholder(value: string)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get renderChanges(): boolean` · `set renderChanges(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `set values(values: string[])` - `get width(): number` · `set width(value: string | number)` - `blur(): void` - `destroy(): void` - `flash(): void` - `focus(select?: boolean): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/TextInput.md # TextInput Class · extends [`InputElement`](https://api.playcanvas.com/pcui/classes/InputElement.md) 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 ```ts new TextInput(args?: Readonly) ``` Creates a new TextInput. **Parameters** - `args` (`Readonly<`[`TextInputArgs`](https://api.playcanvas.com/pcui/interfaces/TextInputArgs.md)`>`, optional, default `{}`): The arguments. ## Properties ### onValidate ```ts 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 ```ts 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](https://api.playcanvas.com/pcui/classes/InputElement.md) - `blurOnEnter: boolean = true` - `blurOnEscape: boolean = true` - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get input(): HTMLInputElement` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get keyChange(): boolean` · `set keyChange(value: boolean)` - `get parent(): Element` · `set parent(value: Element)` - `get placeholder(): string` · `set placeholder(value: string)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get renderChanges(): boolean` · `set renderChanges(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `blur(): void` - `destroy(): void` - `flash(): void` - `focus(select?: boolean): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` ## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) - `get error(): boolean` · `set error(value: boolean)` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/TreeView.md # TreeView Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) 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 [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s. ## Constructors ### constructor ```ts new TreeView(args?: Readonly) ``` Creates a new TreeView. **Parameters** - `args` (`Readonly<`[`TreeViewArgs`](https://api.playcanvas.com/pcui/interfaces/TreeViewArgs.md)`>`, optional, default `{}`): The arguments. ## Properties ### allowRenaming ```ts allowRenaming: boolean = false ``` Determines whether renaming [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s is allowed by double clicking on them. ### allowReordering ```ts allowReordering: boolean = true ``` Determines whether reordering [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s is allowed. ## Accessors ### allowDrag ```ts get allowDrag(): boolean set allowDrag(value: boolean) ``` Gets whether dragging a TreeViewItem is allowed. ### filter ```ts 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 ```ts get isDragging(): boolean set isDragging(value: boolean) ``` Gets whether a TreeViewItem is currently being dragged. ### pressedArrow ```ts get pressedArrow(): boolean ``` Gets whether the selection was triggered by arrow key navigation. ### pressedCtrl ```ts get pressedCtrl(): boolean ``` Gets whether Ctrl is currently pressed. ### pressedShift ```ts get pressedShift(): boolean ``` Gets whether Shift is currently pressed. ### selected ```ts get selected(): TreeViewItem[] ``` Gets all of the currently selected TreeViewItems. ## Methods ### _applyFilter ```ts protected _applyFilter(filter: string): void ``` Searches the treeview. **Parameters** - `filter` (`string`): The search filter. ### _clearFilter ```ts protected _clearFilter(): void ``` Clears search filter. ### _findLastVisibleChildTreeItem ```ts protected _findLastVisibleChildTreeItem(currentItem: TreeViewItem): TreeViewItem ``` Finds the last visible child tree item of the specified tree item. **Parameters** - `currentItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The current item. **Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md): The last child item. ### _findNextVisibleTreeItem ```ts protected _findNextVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem ``` Finds the next tree item that is not currently hidden. **Parameters** - `currentItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The current tree item. **Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md): The next visible tree item. ### _findPreviousVisibleTreeItem ```ts protected _findPreviousVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem ``` Finds the previous visible tree item of the specified tree item. **Parameters** - `currentItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The current tree item. **Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md): The previous item. ### _getChildrenRange ```ts protected _getChildrenRange(startChild: TreeViewItem, endChild: TreeViewItem): TreeViewItem[] ``` Gets the visible tree items between the specified start and end tree items. **Parameters** - `startChild` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The start tree item. - `endChild` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The end tree item. **Returns** [`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)`[]` ### _getTreeOrder ```ts protected _getTreeOrder(): Map ``` 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`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)`, number>` ### _onChildDeselected ```ts protected _onChildDeselected(item: TreeViewItem): void ``` Called when a child tree view item is deselected. **Parameters** - `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item. ### _onChildRename ```ts protected _onChildRename(item: TreeViewItem, newName: string): void ``` Called when a child tree view item is renamed. **Parameters** - `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item. - `newName` (`string`): The new name. ### _onChildSelected ```ts protected _onChildSelected(item: TreeViewItem): void ``` Called when a child tree view item is selected. **Parameters** - `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item. ### _openHierarchy ```ts protected _openHierarchy(endItem: TreeViewItem): void ``` Opens all the parents of the specified item. **Parameters** - `endItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The end tree view item. ### _selectSingleItem ```ts protected _selectSingleItem(item: TreeViewItem): void ``` Selects a tree view item. **Parameters** - `item` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree view item. ### _traverseDepthFirst ```ts protected _traverseDepthFirst(fn: (item: TreeViewItem) => void): void ``` Call specified function on every child TreeViewItem by traversing the hierarchy depth first. **Parameters** - `fn` (`(item: TreeViewItem) => void`): The function to call. The function takes the TreeViewItem as an argument. ### clearTreeItems ```ts clearTreeItems(): void ``` Removes all child tree view items. ### collapseAll ```ts collapseAll(): void ``` Collapses all tree view items. ### deselect ```ts deselect(): void ``` Deselects all selected tree view items. ### expandAll ```ts expandAll(): void ``` Expands all tree view items. ### showDragHandle ```ts showDragHandle(treeItem: TreeViewItem): void ``` Show the drag handle on the given tree item. **Parameters** - `treeItem` ([`TreeViewItem`](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)): The tree item. ### traverse ```ts traverse(fn: (item: TreeViewItem) => void): void ``` Traverses all child [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s using depth first search and calls the supplied function for each item. **Parameters** - `fn` (`(item: TreeViewItem) => void`): The function to call. The function takes the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md) as an argument. **Example** ```ts treeView.traverse((item: TreeViewItem) => { console.log(item.text); }); ``` ## Events ### EVENT_DESELECT ```ts static readonly EVENT_DESELECT: "deselect" = 'deselect' ``` Fired when user deselects a TreeViewItem. **Example** ```ts const treeView = new TreeView(); treeView.on('deselect', (item: TreeViewItem) => { console.log(`Deselected item ${item.text}`); }); ``` ### EVENT_DRAGEND ```ts static readonly EVENT_DRAGEND: "dragend" = 'dragend' ``` Fired when user stops dragging selected TreeViewItems. **Example** ```ts 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 ```ts static readonly EVENT_DRAGSTART: "dragstart" = 'dragstart' ``` Fired when user starts dragging selected TreeViewItems. **Example** ```ts 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 ```ts static readonly EVENT_RENAME: "rename" = 'rename' ``` Fired when user renames a TreeViewItem. **Example** ```ts const treeView = new TreeView(); treeView.on('rename', (item: TreeViewItem, name: string) => { console.log(`Renamed item to ${name}`); }); ``` ### EVENT_REPARENT ```ts static readonly EVENT_REPARENT: "reparent" = 'reparent' ``` Fired when user reparents TreeViewItems. **Example** ```ts const treeView = new TreeView(); treeView.on('reparent', (reparented: ReparentedItem[]) => { console.log(`Reparented ${reparented.length} items`); }); ``` ### EVENT_SELECT ```ts static readonly EVENT_SELECT: "select" = 'select' ``` Fired when user selects a TreeViewItem. **Example** ```ts const treeView = new TreeView(); treeView.on('select', (item: TreeViewItem) => { console.log(`Selected item ${item.text}`); }); ``` ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/TreeViewItem.md # TreeViewItem Class · extends [`Container`](https://api.playcanvas.com/pcui/classes/Container.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeViewItem/index.ts#L82 A TreeViewItem is a single node in a hierarchical [TreeView](https://api.playcanvas.com/pcui/classes/TreeView.md) control. ## Constructors ### constructor ```ts new TreeViewItem(args?: Readonly) ``` Creates a new TreeViewItem. **Parameters** - `args` (`Readonly<`[`TreeViewItemArgs`](https://api.playcanvas.com/pcui/interfaces/TreeViewItemArgs.md)`>`, optional, default `{}`): The arguments. ## Properties ### allowDrag ```ts allowDrag: boolean = true ``` Determines whether this tree item can be dragged. Only considered if the parent [TreeView](https://api.playcanvas.com/pcui/classes/TreeView.md) has [TreeView#allowDrag](https://api.playcanvas.com/pcui/classes/TreeView.md#allowdrag) set to `true`. ### allowDrop ```ts allowDrop: boolean = true ``` Determines whether dropping is allowed on the tree item. ### allowSelect ```ts allowSelect: boolean = true ``` Determines whether the item can be selected. ## Accessors ### content ```ts 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 ```ts get firstChild(): TreeViewItem ``` Gets the first child item. ### icon ```ts get icon(): string set icon(value: string) ``` Gets the icon shown before the text in the TreeViewItem. ### iconLabel ```ts get iconLabel(): Label ``` Gets the internal label that shows the icon. ### lastChild ```ts get lastChild(): TreeViewItem ``` Gets the last child item. ### nextSibling ```ts get nextSibling(): TreeViewItem ``` Gets the next sibling item. ### numChildren ```ts get numChildren(): number ``` Gets the number of direct children. ### open ```ts get open(): boolean set open(value: boolean) ``` Gets whether the item is expanded and showing its children. ### parentsOpen ```ts get parentsOpen(): boolean set parentsOpen(value: boolean) ``` Gets whether the ancestors of the item are open or closed. ### previousSibling ```ts get previousSibling(): TreeViewItem ``` Gets the previous sibling item. ### selected ```ts get selected(): boolean set selected(value: boolean) ``` Gets whether the item is selected. ### text ```ts get text(): string set text(value: string) ``` Gets the text shown by the TreeViewItem. ### textLabel ```ts get textLabel(): Label ``` Gets the internal label that shows the text. ### treeView ```ts get treeView(): TreeView set treeView(value: TreeView) ``` Gets the parent [TreeView](https://api.playcanvas.com/pcui/classes/TreeView.md). ## Events ### EVENT_CLOSE ```ts static readonly EVENT_CLOSE: "close" = 'close' ``` Fired when user closes the TreeViewItem. **Example** ```ts treeViewItem.on('close', (item: TreeViewItem) => { console.log('TreeViewItem closed', item); }); ``` ### EVENT_DESELECT ```ts static readonly EVENT_DESELECT: "deselect" = 'deselect' ``` Fired when user deselects the TreeViewItem. **Example** ```ts treeViewItem.on('deselect', (item: TreeViewItem) => { console.log('TreeViewItem deselected', item); }); ``` ### EVENT_OPEN ```ts static readonly EVENT_OPEN: "open" = 'open' ``` Fired when user opens the TreeViewItem. **Example** ```ts treeViewItem.on('open', (item: TreeViewItem) => { console.log('TreeViewItem opened', item); }); ``` ### EVENT_SELECT ```ts static readonly EVENT_SELECT: "select" = 'select' ``` Fired when user selects the TreeViewItem. **Example** ```ts treeViewItem.on('select', (item: TreeViewItem) => { console.log('TreeViewItem selected', item); }); ``` ## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get binding(): BindingBase` · `set binding(value: BindingBase)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get domContent(): HTMLElement` · `set domContent(value: HTMLElement)` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flex(): boolean` · `set flex(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get grid(): boolean` · `set grid(value: boolean)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get resizable(): string` · `set resizable(value: string)` - `get resizeMax(): number` · `set resizeMax(value: number)` - `get resizeMin(): number` · `set resizeMin(value: number)` - `get scrollable(): boolean` · `set scrollable(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `protected _buildDomNode(node: DomNode): Element` - `append(element: Child): void` - `appendAfter(element: Child, referenceElement: Child): void` - `appendBefore(element: Child, referenceElement: Child): void` - `buildDom(dom: DomNode[]): void` - `clear(): void` - `flash(): void` - `forEachChild(fn: (child: Element, index: number) => false | void): void` - `link(observers: Observer | Observer[], paths: string | string[]): void` - `move(element: Element, index: number): void` - `prepend(element: Child): void` - `remove(element: Element): void` - `resize(x?: number, y?: number): void` - `unlink(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_APPEND: "append" = 'append'` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_REMOVE: "remove" = 'remove'` - `static readonly EVENT_RESIZE: "resize" = 'resize'` - `static readonly EVENT_SCROLL: "scroll" = 'scroll'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/classes/VectorInput.md # VectorInput Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md) · implements [`IBindable`](https://api.playcanvas.com/pcui/interfaces/IBindable.md)``, [`IFocusable`](https://api.playcanvas.com/pcui/interfaces/IFocusable.md), `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](https://api.playcanvas.com/pcui/classes/NumericInput.md). ## Constructors ### constructor ```ts new VectorInput(args?: Readonly) ``` Creates a new VectorInput. **Parameters** - `args` (`Readonly<`[`VectorInputArgs`](https://api.playcanvas.com/pcui/interfaces/VectorInputArgs.md)`>`, optional, default `{}`): The arguments. ## Accessors ### binding ```ts get binding(): BindingBase set binding(value: BindingBase) ``` Gets the Binding object for the VectorInput. ### inputs ```ts get inputs(): NumericInput[] ``` Gets the array of NumericInput elements owned by this vector. ### max ```ts get max(): number set max(value: number) ``` Gets the maximum value accepted by all inputs of the vector. ### min ```ts get min(): number set min(value: number) ``` Gets the minimum value accepted by all inputs of the vector. ### placeholder ```ts get placeholder(): string[] set placeholder(value: string | string[]) ``` Gets the placeholder text of all inputs as an array. ### precision ```ts get precision(): number set precision(value: number) ``` Gets the maximum number of decimal places supported by all inputs of the vector. ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Gets whether inputs should flash when their values change. ### step ```ts 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 ```ts get value(): number[] set value(value: number[]) ``` Gets the value of the VectorInput as an array of numbers. ### values ```ts 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 ```ts blur(): void ``` Unfocuses (blurs) all input elements. ### focus ```ts focus(): void ``` Focuses the first input element. ### link ```ts link(observers: Observer | Observer[], paths: string | string[]): void ``` Links the specified observers and paths to the Element's data binding. **Parameters** - `observers` (`Observer | Observer[]`): An array of observers or a single observer. - `paths` (`string | string[]`): A path for the observer(s) or an array of paths that maps to each separate observer. ### unlink ```ts unlink(): void ``` Unlinks the Element from its observers. ## Events ### EVENT_BLUR ```ts static readonly EVENT_BLUR: "blur" = 'blur' ``` Fired when the VectorInput loses focus. **Example** ```ts const vectorInput = new VectorInput(); vectorInput.on('blur', () => { console.log('VectorInput blurred'); }); ``` ### EVENT_CHANGE ```ts static readonly EVENT_CHANGE: "change" = 'change' ``` Fired when the value of the VectorInput changes. **Example** ```ts const vectorInput = new VectorInput({ dimensions: 3 }); vectorInput.on('change', (value: number[]) => { console.log('Value changed to:', value); }); ``` ### EVENT_FOCUS ```ts static readonly EVENT_FOCUS: "focus" = 'focus' ``` Fired when the VectorInput receives focus. **Example** ```ts const vectorInput = new VectorInput(); vectorInput.on('focus', () => { console.log('VectorInput focused'); }); ``` ## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md) - `get alignItems(): string` · `set alignItems(value: string)` - `get alignSelf(): string` · `set alignSelf(value: string)` - `get class(): DOMTokenList` - `get dom(): HTMLElement` - `get enabled(): boolean` · `set enabled(value: boolean)` - `get error(): boolean` · `set error(value: boolean)` - `get flexBasis(): string` · `set flexBasis(value: string | number)` - `get flexDirection(): string` · `set flexDirection(value: string)` - `get flexGrow(): string` · `set flexGrow(value: string | number)` - `get flexShrink(): string` · `set flexShrink(value: string | number)` - `get flexWrap(): string` · `set flexWrap(value: string)` - `get height(): number` · `set height(value: string | number)` - `get hidden(): boolean` · `set hidden(value: boolean)` - `get hiddenToRoot(): boolean` - `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)` - `get justifyContent(): string` · `set justifyContent(value: string)` - `get justifySelf(): string` · `set justifySelf(value: string)` - `get parent(): Element` · `set parent(value: Element)` - `get readOnly(): boolean` · `set readOnly(value: boolean)` - `get style(): CSSStyleDeclaration` - `get tabIndex(): number` · `set tabIndex(value: number)` - `get width(): number` · `set width(value: string | number)` - `destroy(): void` - `flash(): void` - `static create(type: string, args: ElementArgs): Type` - `static register(type: string, cls: Object, defaultArguments?: object): void` - `static unregister(type: string): void` - `static readonly EVENT_CLICK: "click" = 'click'` - `static readonly EVENT_DESTROY: "destroy" = 'destroy'` - `static readonly EVENT_DISABLE: "disable" = 'disable'` - `static readonly EVENT_ENABLE: "enable" = 'enable'` - `static readonly EVENT_HIDE: "hide" = 'hide'` - `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'` - `static readonly EVENT_HOVER: "hover" = 'hover'` - `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'` - `static readonly EVENT_PARENT: "parent" = 'parent'` - `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'` - `static readonly EVENT_SHOW: "show" = 'show'` - `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/ArrayInputArgs.md # ArrayInputArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ArrayInput/index.ts#L34 The arguments for the [ArrayInput](https://api.playcanvas.com/pcui/classes/ArrayInput.md) constructor. ## Properties ### elementArgs ```ts elementArgs?: ElementConfig ``` Arguments for each array Element. ### fixedSize ```ts fixedSize?: boolean ``` If `true` then editing the number of elements that the array has will not be allowed. ### getDefaultFn ```ts getDefaultFn?: () => unknown ``` Used to specify the default values for each element in the array. Defaults to `null`. ### type ```ts type?: "string" | "number" | "boolean" | "vec2" | "vec3" | "vec4" ``` The type of values that the array can hold. Can be one of the following: - `boolean` - `number` - `string` - `vec2` - `vec3` - `vec4` Defaults to `string`. ### usePanels ```ts usePanels?: boolean ``` If `true` then the array will be rendered using panels. Defaults to `false`. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown[]) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `value?: unknown[]` - `values?: unknown[][]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/BindingBaseArgs.md # BindingBaseArgs Interface Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingBase/index.ts#L9 The interface for arguments for the [BindingBase](https://api.playcanvas.com/pcui/classes/BindingBase.md) constructor. ## Properties ### element ```ts element?: IBindable ``` The IBindable element. ### history ```ts 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 ```ts historyCombine?: boolean ``` Whether to combine history actions. ### historyName ```ts historyName?: string ``` The name of each history action. ### historyPostfix ```ts historyPostfix?: string ``` A postfix that will be used for the name of every history action. ### historyPrefix ```ts historyPrefix?: string ``` A prefix that will be used for the name of every history action. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/BindingObserversToElementArgs.md # BindingObserversToElementArgs Interface · extends [`BindingBaseArgs`](https://api.playcanvas.com/pcui/interfaces/BindingBaseArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingObserversToElement/index.ts#L10 The interface for arguments for the [BindingObserversToElement](https://api.playcanvas.com/pcui/classes/BindingObserversToElement.md) constructor. ## Properties ### customUpdate ```ts customUpdate?: (element: IBindable, observers: Observer[], paths: string[]) => void ``` Custom update function. ## Inherited from [BindingBaseArgs](https://api.playcanvas.com/pcui/interfaces/BindingBaseArgs.md) - `element?: IBindable` - `history?: History` - `historyCombine?: boolean` - `historyName?: string` - `historyPostfix?: string` - `historyPrefix?: string` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/BindingTwoWayArgs.md # BindingTwoWayArgs Interface · extends [`BindingBaseArgs`](https://api.playcanvas.com/pcui/interfaces/BindingBaseArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/binding/BindingTwoWay/index.ts#L12 The interface for arguments for the [BindingTwoWay](https://api.playcanvas.com/pcui/classes/BindingTwoWay.md) constructor. ## Properties ### bindingElementToObservers ```ts bindingElementToObservers?: BindingElementToObservers ``` BindingElementToObservers instance. ### bindingObserversToElement ```ts bindingObserversToElement?: BindingObserversToElement ``` BindingObserversToElement instance. ## Inherited from [BindingBaseArgs](https://api.playcanvas.com/pcui/interfaces/BindingBaseArgs.md) - `element?: IBindable` - `history?: History` - `historyCombine?: boolean` - `historyName?: string` - `historyPostfix?: string` - `historyPrefix?: string` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/BooleanInputArgs.md # BooleanInputArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/BooleanInput/index.ts#L12 The arguments for the [BooleanInput](https://api.playcanvas.com/pcui/classes/BooleanInput.md) constructor. ## Properties ### tabIndex ```ts tabIndex?: number ``` Sets the tabIndex of the [BooleanInput](https://api.playcanvas.com/pcui/classes/BooleanInput.md). Defaults to 0. ### type ```ts type?: string ``` The type of checkbox. Currently can be `null` or 'toggle'. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: boolean) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `width?: number` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `value?: boolean` - `values?: boolean[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/ButtonArgs.md # ButtonArgs Interface Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Button/index.ts#L9 The arguments for the [Button](https://api.playcanvas.com/pcui/classes/Button.md) constructor. ## Properties ### icon ```ts icon?: string ``` The CSS code for an icon for the button. e.g. 'E401' (notice we omit the '\\' character). Defaults to ''. ### size ```ts size?: "small" ``` Sets the 'size' type of the button. Can be 'small' or `null`. Defaults to `null`. ### text ```ts text?: string ``` Sets the text of the button. Defaults to ''. ### unsafe ```ts unsafe?: boolean ``` If `true`, the [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property will be used to set the text. Otherwise, [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) will be used instead. Defaults to `false`. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/CanvasArgs.md # CanvasArgs Interface Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Canvas/index.ts#L9 The arguments for the [Canvas](https://api.playcanvas.com/pcui/classes/Canvas.md) constructor. ## Properties ### useDevicePixelRatio ```ts useDevicePixelRatio?: boolean ``` Whether the canvas should use the [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). Defaults to `false`. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/CodeArgs.md # CodeArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Code/index.ts#L12 The arguments for the [Code](https://api.playcanvas.com/pcui/classes/Code.md) constructor. ## Properties ### text ```ts text?: string ``` Sets the text to display in the code block. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/ColorPickerArgs.md # ColorPickerArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/ColorPicker/index.ts#L16 The arguments for the [ColorPicker](https://api.playcanvas.com/pcui/classes/ColorPicker.md) constructor. ## Properties ### channels ```ts channels?: number ``` Number of color channels. Defaults to 3. Changing to 4 adds the option to change the alpha value. ### value ```ts 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 - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: number[]) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `values?: number[][]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md # ContainerArgs Interface · extends [`IParentArgs`](https://api.playcanvas.com/pcui/interfaces/IParentArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Container/index.ts#L26 The arguments for the [Container](https://api.playcanvas.com/pcui/classes/Container.md) constructor. ## Properties ### flex ```ts flex?: boolean ``` Sets whether the [Container](https://api.playcanvas.com/pcui/classes/Container.md) uses flex layout. ### grid ```ts grid?: boolean ``` Sets whether the [Container](https://api.playcanvas.com/pcui/classes/Container.md) supports the grid layout. ### onResize ```ts onResize?: () => void ``` Called when the [Container](https://api.playcanvas.com/pcui/classes/Container.md) has been resized. ### resizable ```ts resizable?: string ``` Sets whether the [Container](https://api.playcanvas.com/pcui/classes/Container.md) is resizable and where the resize handle is located. Can be one of 'top', 'bottom', 'right', 'left'. Defaults to `null` which disables resizing. ### resizeMax ```ts resizeMax?: number ``` Sets the maximum size the [Container](https://api.playcanvas.com/pcui/classes/Container.md) can take when resized in pixels. ### resizeMin ```ts resizeMin?: number ``` Sets the minimum size the [Container](https://api.playcanvas.com/pcui/classes/Container.md) can take when resized in pixels. ### scrollable ```ts scrollable?: boolean ``` Sets whether the [Container](https://api.playcanvas.com/pcui/classes/Container.md) should be scrollable. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IParentArgs](https://api.playcanvas.com/pcui/interfaces/IParentArgs.md) - `children?: ReactNode` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/GradientPickerArgs.md # GradientPickerArgs Interface Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GradientPicker/index.ts#L71 The arguments for the [GradientPicker](https://api.playcanvas.com/pcui/classes/GradientPicker.md) constructor. ## Properties ### channels ```ts channels?: number ``` Number of color channels. Defaults to 3. Changing to 4 adds the option to change the alpha value. ### renderChanges ```ts renderChanges?: boolean ``` If `true`, the picker will render changes to the gradient as they happen. Defaults to `true`. ### value ```ts value?: number[] ``` An array of 4 integers containing the RGBA values the picker should be initialized to. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/GridViewArgs.md # GridViewArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GridView/index.ts#L14 The arguments for the [GridView](https://api.playcanvas.com/pcui/classes/GridView.md) constructor. ## Properties ### allowDeselect ```ts allowDeselect?: boolean ``` If `true` and `multiSelect` is set to `false`, the layout will allow options to be deselected. Defaults to `true`. ### filterFn ```ts filterFn?: (item: GridViewItem) => boolean ``` A filter function to filter [GridViewItem](https://api.playcanvas.com/pcui/classes/GridViewItem.md)s with signature `(GridViewItem) => boolean`. ### multiSelect ```ts multiSelect?: boolean ``` If `true`, the layout will allow for multiple options to be selected. Defaults to `true`. ### vertical ```ts vertical?: boolean ``` If `true` the [GridView](https://api.playcanvas.com/pcui/classes/GridView.md) layout will be vertical. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/GridViewItemArgs.md # GridViewItemArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/GridViewItem/index.ts#L19 The arguments for the [GridViewItem](https://api.playcanvas.com/pcui/classes/GridViewItem.md) constructor. ## Properties ### allowSelect ```ts allowSelect?: boolean ``` If `true`, allow selecting the item. Defaults to `true`. ### selected ```ts selected?: boolean ``` Whether the item is selected. ### tabIndex ```ts tabIndex?: number ``` Sets the tabIndex of the [GridViewItem](https://api.playcanvas.com/pcui/classes/GridViewItem.md). Defaults to 0. ### text ```ts text?: string ``` The text of the item. Defaults to ''. ### type ```ts type?: string ``` The type of the [GridViewItem](https://api.playcanvas.com/pcui/classes/GridViewItem.md). Can be `null` or 'radio'. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/IBindable.md # IBindable Interface Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Element/index.ts#L35 The interface for bindable elements. ## Accessors ### renderChanges ```ts get renderChanges(): boolean set renderChanges(value: boolean) ``` Gets whether the input should flash on changes. ### value ```ts get value(): T set value(values: T) ``` Gets the value of the Element. ### values ```ts get values(): T[] set values(values: T[]) ``` Gets multiple values on the Element. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md # 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 ```ts renderChanges?: boolean ``` If `true` each input will flash on changes. ### value ```ts value?: T ``` Sets the value of the Element. ### values ```ts values?: T[] ``` Sets multiple values to the Element. It is up to the Element to determine how to display them. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/IFlexArgs.md # 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 ```ts alignItems?: string ``` Sets the element's `alignItems` CSS property. ### alignSelf ```ts alignSelf?: string ``` Sets the element's `alignSelf` CSS property. ### flexBasis ```ts flexBasis?: string | number ``` Sets the element's `flexBasis` CSS property. ### flexDirection ```ts flexDirection?: string ``` Sets the element's `flexDirection` CSS property. ### flexGrow ```ts flexGrow?: string | number ``` Sets the element's `flexGrow` CSS property. ### flexShrink ```ts flexShrink?: string | number ``` Sets the element's `flexShrink` CSS property. ### flexWrap ```ts flexWrap?: string ``` Sets the element's `flexWrap` CSS property. ### justifyContent ```ts justifyContent?: string ``` Sets the element's `justifyContent` CSS property. ### justifySelf ```ts justifySelf?: string ``` Sets the element's `justifySelf` CSS property. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/IFocusable.md # 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 ```ts blur(): void ``` Unfocus the element ### focus ```ts 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** - `select` (`boolean`, optional) -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/InfoBoxArgs.md # InfoBoxArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/InfoBox/index.ts#L10 The arguments for the [InfoBox](https://api.playcanvas.com/pcui/classes/InfoBox.md) constructor. ## Properties ### icon ```ts icon?: string ``` The CSS code for an icon for the [InfoBox](https://api.playcanvas.com/pcui/classes/InfoBox.md). e.g. 'E401' (notice we omit the '\\' character). Defaults to ''. Useful icon values for InfoBox are: - 'E218' - warning - 'E400' - info ### text ```ts text?: string ``` Sets the 'text' of the [InfoBox](https://api.playcanvas.com/pcui/classes/InfoBox.md). Defaults to ''. ### title ```ts title?: string ``` Sets the 'title' of the [InfoBox](https://api.playcanvas.com/pcui/classes/InfoBox.md). Defaults to ''. ### unsafe ```ts unsafe?: boolean ``` If `true`, the [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property will be used to set the text. Otherwise, [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) will be used instead. Defaults to `false`. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/InputElementArgs.md # InputElementArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)`<`[`T`](https://api.playcanvas.com/pcui/interfaces/InputElementArgs.md#t)`>`, [`IPlaceholderArgs`](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/InputElement/index.ts#L10 The arguments for the [InputElement](https://api.playcanvas.com/pcui/classes/InputElement.md) constructor. ## Properties ### blurOnEnter ```ts blurOnEnter?: boolean ``` Sets whether pressing Enter will blur (unfocus) the field. Defaults to `true`. ### blurOnEscape ```ts blurOnEscape?: boolean ``` Sets whether pressing Escape will blur (unfocus) the field. Defaults to `true`. ### input ```ts input?: HTMLInputElement ``` The input element to associate this [InputElement](https://api.playcanvas.com/pcui/classes/InputElement.md) with. If not supplied one will be created instead. ### keyChange ```ts keyChange?: boolean ``` Sets whether any key up event will cause a change event to be fired. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: T) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IPlaceholderArgs](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) - `placeholder?: string` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `value?: T` - `values?: T[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/IParentArgs.md # 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 ```ts children?: ReactNode ``` The children of the current component. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/IPlaceholder.md # 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 ```ts get placeholder(): string set placeholder(value: string) ``` Gets the placeholder text of the input. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md # 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 ```ts placeholder?: string ``` Sets the placeholder label that appears on the right of the input. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/LabelArgs.md # LabelArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)``, [`IPlaceholderArgs`](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Label/index.ts#L10 The arguments for the [Label](https://api.playcanvas.com/pcui/classes/Label.md) constructor. ## Properties ### allowTextSelection ```ts allowTextSelection?: boolean ``` If `true` then the label can be clicked to select text. Defaults to `false`. ### dom ```ts dom?: string | HTMLElement ``` The DOM element or its type to use for this component. Defaults to 'span'. ### nativeTooltip ```ts nativeTooltip?: boolean ``` If `true` then use the text of the label as the native HTML tooltip. Defaults to `false`. ### text ```ts text?: string ``` Sets the text of the Label. Defaults to ''. ### unsafe ```ts unsafe?: boolean ``` If `true`, the [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property will be used to set the text. Otherwise, [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) will be used instead. Defaults to `false`. ### value ```ts value?: string ``` Sets the value of the Label. Defaults to ''. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: string) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IPlaceholderArgs](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) - `placeholder?: string` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `values?: string[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/LabelGroupArgs.md # LabelGroupArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/LabelGroup/index.ts#L12 The arguments for the [LabelGroup](https://api.playcanvas.com/pcui/classes/LabelGroup.md) constructor. ## Properties ### field ```ts field?: Element ``` The [Element](https://api.playcanvas.com/pcui/classes/Element.md) to be wrapped by the label group. ### labelAlignTop ```ts labelAlignTop?: boolean ``` Whether to align the label at the top of the group. Defaults to `false` which aligns it at the center. ### nativeTooltip ```ts nativeTooltip?: boolean ``` Add a native tooltip to the label. ### text ```ts text?: string ``` The label text. Defaults to 'Label'. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/MenuArgs.md # MenuArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Menu/index.ts#L13 The arguments for the [Menu](https://api.playcanvas.com/pcui/classes/Menu.md) constructor. ## Properties ### hidden ```ts hidden?: boolean ``` Sets whether this [Menu](https://api.playcanvas.com/pcui/classes/Menu.md) is hidden. Defaults to `true`. ### items ```ts items?: MenuItemArgs[] ``` An array of [MenuItemArgs](https://api.playcanvas.com/pcui/interfaces/MenuItemArgs.md). If these are passed then new MenuItems will be created and appended to the menu. ### tabIndex ```ts tabIndex?: number ``` Sets the tabIndex of the [Menu](https://api.playcanvas.com/pcui/classes/Menu.md). Defaults to 1. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/MenuItemArgs.md # MenuItemArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/MenuItem/index.ts#L18 The arguments for the [MenuItem](https://api.playcanvas.com/pcui/classes/MenuItem.md) constructor. ## Properties ### hasChildren ```ts hasChildren?: boolean ``` Whether the MenuItem has any child MenuItems. ### icon ```ts icon?: string ``` Sets the CSS code for an icon for the MenuItem. e.g. 'E401' (notice we omit the '\\' character). ### items ```ts items?: MenuItemArgs[] ``` An array of MenuItem constructor data. If defined then child MenuItems will be created and added to the MenuItem. ### menu ```ts menu?: Menu ``` Sets the parent Menu Element. ### onIsEnabled ```ts onIsEnabled?: () => boolean ``` Sets the function that determines whether the MenuItem should be enabled when the Menu is shown. ### onIsVisible ```ts onIsVisible?: () => boolean ``` Sets the function that determines whether the MenuItem should be visible when the Menu is shown. ### onSelect ```ts onSelect?: (evt?: MouseEvent) => void ``` Sets the function called when we select the MenuItem. ### shortcut ```ts shortcut?: string ``` Sets the keyboard shortcut to display on the MenuItem (e.g., 'Ctrl+C'). ### text ```ts text?: string ``` Sets the text shown on the MenuItem. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/NumericInputArgs.md # NumericInputArgs Interface · extends [`InputElementArgs`](https://api.playcanvas.com/pcui/interfaces/InputElementArgs.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/NumericInput/index.ts#L16 The arguments for the [NumericInput](https://api.playcanvas.com/pcui/classes/NumericInput.md) constructor. ## Properties ### allowNull ```ts allowNull?: boolean ``` Sets whether the value can be `null`. If not then it will be 0 instead of `null`. ### hideSlider ```ts hideSlider?: boolean ``` Hide the input mouse drag slider. ### max ```ts max?: number ``` Sets the maximum value this field can take. ### min ```ts min?: number ``` Sets the minimum value this field can take. ### precision ```ts precision?: number ``` Sets the decimal precision of this field. Defaults to 7. ### step ```ts step?: number ``` Sets the amount that the value will be increased or decreased when using the arrow keys and the slider input. ### stepPrecision ```ts 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](https://api.playcanvas.com/pcui/classes/NumericInput.md#step) * 0.1. ## Inherited from [InputElementArgs](https://api.playcanvas.com/pcui/interfaces/InputElementArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `blurOnEnter?: boolean` - `blurOnEscape?: boolean` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `input?: HTMLInputElement` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `keyChange?: boolean` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: string | number) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `placeholder?: string` - `readOnly?: boolean` - `renderChanges?: boolean` - `style?: string` - `tabIndex?: number` - `value?: string | number` - `values?: (string | number)[]` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/OverlayArgs.md # OverlayArgs Interface Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Overlay/index.ts#L14 The arguments for the [Overlay](https://api.playcanvas.com/pcui/classes/Overlay.md) constructor. ## Properties ### clickable ```ts clickable?: boolean ``` Whether the overlay can be hidden by clicking on it. ### transparent ```ts transparent?: boolean ``` Whether the overlay is transparent or not. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/PanelArgs.md # PanelArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Panel/index.ts#L19 The arguments for the [Panel](https://api.playcanvas.com/pcui/classes/Panel.md) constructor. ## Properties ### collapsed ```ts collapsed?: boolean ``` Sets whether the Element should be collapsed. ### collapseHorizontally ```ts collapseHorizontally?: boolean ``` Sets whether the panel collapses horizontally - this would be the case for side panels. Defaults to `false`. ### collapsible ```ts collapsible?: boolean ``` Sets whether the Element is collapsible. ### content ```ts content?: HTMLElement ``` A DOM element to use for the content container. ### header ```ts header?: HTMLElement ``` A DOM element to use for the header container. ### headerSize ```ts headerSize?: number ``` The height of the header in pixels. Defaults to 32. ### headerText ```ts headerText?: string ``` The header text of the panel. Defaults to the empty string. ### panelType ```ts panelType?: "normal" ``` Sets the panel type. ### removable ```ts removable?: boolean ``` Sets whether the panel can be removed. ### sortable ```ts sortable?: boolean ``` Sets whether the panel can be reordered. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/ProgressArgs.md # ProgressArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Progress/index.ts#L11 The arguments for the [Progress](https://api.playcanvas.com/pcui/classes/Progress.md) constructor. ## Properties ### value ```ts value?: number ``` Sets the value of the progress bar (between 0 and 100). ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/RadioButtonArgs.md # RadioButtonArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)`` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/RadioButton/index.ts#L11 The arguments for the [RadioButton](https://api.playcanvas.com/pcui/classes/RadioButton.md) constructor. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: boolean) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `value?: boolean` - `values?: boolean[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/ReparentedItem.md # 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](https://api.playcanvas.com/pcui/classes/TreeView.md) drag operation. ## Properties ### item ```ts item: TreeViewItem ``` The reparented tree view item. ### newChildIndex ```ts newChildIndex?: number ``` The new child index of the item within its new parent. ### newParent ```ts newParent?: Element ``` The new parent of the item. ### oldParent ```ts oldParent: Element ``` The old parent of the item. -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/SelectInputArgs.md # SelectInputArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)``, [`IPlaceholderArgs`](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/SelectInput/index.ts#L40 The arguments for the [SelectInput](https://api.playcanvas.com/pcui/classes/SelectInput.md) constructor. ## Properties ### allowCreate ```ts 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 ```ts 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 ```ts allowNull?: boolean ``` If `true` then null is a valid input value. Defaults to `false`. ### createFn ```ts 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 ```ts createLabelText?: string ``` The placeholder text to show when creating a new value. Used when allowInput and allowCreate are both true. ### defaultValue ```ts defaultValue?: unknown ``` Default value for the input. ### disabledOptions ```ts disabledOptions?: Record ``` 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 ```ts 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 ```ts 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 ```ts multiSelect?: boolean ``` If `true` then the input value becomes an array allowing the selection of multiple options. Defaults to `false`. ### onSelect ```ts onSelect?: (value: unknown) => void ``` If provided, this function will be called each time an option is selected. ### options ```ts 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 ```ts optionsFn?: () => { t: string; v: OptionValue }[] ``` Used to map the options. ### prefix ```ts prefix?: string ``` Text to display in the SelectInput before the selected option. ### type ```ts type?: "string" | "number" | "boolean" ``` The type of each value. Can be one of 'string', 'number' or 'boolean'. Defaults to 'string'. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IPlaceholderArgs](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) - `placeholder?: string` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `value?: unknown` - `values?: unknown[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/SliderInputArgs.md # SliderInputArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)``, [`IPlaceholderArgs`](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/SliderInput/index.ts#L17 The arguments for the [SliderInput](https://api.playcanvas.com/pcui/classes/SliderInput.md) constructor. ## Properties ### allowNull ```ts allowNull?: boolean ``` Sets whether the value can be null. If not then it will be 0 instead of null. ### keyChange ```ts keyChange?: boolean ``` Sets whether any key up event will cause a change event to be fired. ### max ```ts max?: number ``` Sets the maximum value that the numeric input field can take. ### min ```ts min?: number ``` Sets the minimum value that the numeric input field can take. ### precision ```ts precision?: number ``` Sets the maximum number of decimals a value can take. Defaults to 2. ### sliderMax ```ts sliderMax?: number ``` Sets the maximum value that the slider field can take. Defaults to 1. ### sliderMin ```ts sliderMin?: number ``` Sets the minimum value that the slider field can take. Defaults to 0. ### step ```ts 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 - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: number) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from [IPlaceholderArgs](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) - `placeholder?: string` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `value?: number` - `values?: number[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/SpinnerArgs.md # SpinnerArgs Interface Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Spinner/index.ts#L21 The arguments for the [Spinner](https://api.playcanvas.com/pcui/classes/Spinner.md) constructor. ## Properties ### size ```ts size?: string | number ``` Sets the pixel size of the spinner. Defaults to 12. ### type ```ts type?: "small-thick" ``` Can be 'small-thick'. Defaults to 'small-thick'. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/TextAreaInputArgs.md # TextAreaInputArgs Interface · extends [`TextInputArgs`](https://api.playcanvas.com/pcui/interfaces/TextInputArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TextAreaInput/index.ts#L15 The arguments for the [TextAreaInput](https://api.playcanvas.com/pcui/classes/TextAreaInput.md) constructor. ## Properties ### resizable ```ts 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](https://api.playcanvas.com/pcui/interfaces/TextInputArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `blurOnEnter?: boolean` - `blurOnEscape?: boolean` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `input?: HTMLInputElement` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `keyChange?: boolean` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: string) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onValidate?: (value: string) => boolean` - `parent?: Element` - `placeholder?: string` - `readOnly?: boolean` - `renderChanges?: boolean` - `style?: string` - `tabIndex?: number` - `value?: string` - `values?: string[]` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/TextInputArgs.md # TextInputArgs Interface · extends [`InputElementArgs`](https://api.playcanvas.com/pcui/interfaces/InputElementArgs.md)``, [`IPlaceholderArgs`](https://api.playcanvas.com/pcui/interfaces/IPlaceholderArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TextInput/index.ts#L12 The arguments for the [TextInput](https://api.playcanvas.com/pcui/classes/TextInput.md) constructor. ## Properties ### onValidate ```ts 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](https://api.playcanvas.com/pcui/interfaces/InputElementArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `blurOnEnter?: boolean` - `blurOnEscape?: boolean` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `input?: HTMLInputElement` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `keyChange?: boolean` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: string) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `placeholder?: string` - `readOnly?: boolean` - `renderChanges?: boolean` - `style?: string` - `tabIndex?: number` - `value?: string` - `values?: string[]` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/TreeViewArgs.md # TreeViewArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeView/index.ts#L42 The arguments for the [TreeView](https://api.playcanvas.com/pcui/classes/TreeView.md) constructor. ## Properties ### allowDrag ```ts allowDrag?: boolean ``` Whether dragging a [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md) is allowed. Defaults to `true`. ### allowRenaming ```ts allowRenaming?: boolean ``` Whether renaming [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s is allowed by double clicking on them. Defaults to `false`. ### allowReordering ```ts allowReordering?: boolean ``` Whether reordering [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s is allowed. Defaults to `true`. ### dragScrollElement ```ts dragScrollElement?: Element ``` The element to scroll on drag. Defaults to this [TreeView](https://api.playcanvas.com/pcui/classes/TreeView.md)'s element. ### filter ```ts filter?: string ``` A filter that searches [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md)s and only shows the ones that are relevant to the filter. ### onContextMenu ```ts onContextMenu?: (evt: MouseEvent, item: TreeViewItem) => void ``` A function to be called when we right click on a [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md). ### onReparent ```ts 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](https://api.playcanvas.com/pcui/classes/TreeView.md) but instead will rely on the function to reparent them as it sees fit. ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/TreeViewItemArgs.md # TreeViewItemArgs Interface · extends [`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/TreeViewItem/index.ts#L39 The arguments for the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md) constructor. ## Properties ### allowDrag ```ts allowDrag?: boolean ``` Whether this [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md) can be dragged. Only considered if the parent [TreeView](https://api.playcanvas.com/pcui/classes/TreeView.md) has `allowDrag` set to `true`. Defaults to `true`. ### allowDrop ```ts allowDrop?: boolean ``` Whether dropping is allowed on the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md). Defaults to `true`. ### allowSelect ```ts allowSelect?: boolean ``` Whether the item can be selected. Defaults to `true`. ### icon ```ts icon?: string ``` The icon shown before the text in the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md). Defaults to 'E360'. ### onDeselect ```ts onDeselect?: () => void ``` Method to be called when the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md) is deselected. ### onSelect ```ts onSelect?: (deselect: () => void) => void ``` Method to be called when the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md) is selected. ### open ```ts open?: boolean ``` Whether the item is open (showing its children). Defaults to `false`. ### selected ```ts selected?: boolean ``` Whether the item is selected. ### text ```ts text?: string ``` The text shown by the [TreeViewItem](https://api.playcanvas.com/pcui/classes/TreeViewItem.md). ## Inherited from [ContainerArgs](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md) - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `children?: ReactNode` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flex?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `grid?: boolean` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: unknown) => void` - `onClick?: () => void` - `onRemove?: () => void` - `onResize?: () => void` - `parent?: Element` - `readOnly?: boolean` - `resizable?: string` - `resizeMax?: number` - `resizeMin?: number` - `scrollable?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/interfaces/VectorInputArgs.md # VectorInputArgs Interface · extends [`IBindableArgs`](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md)``, `IMultiPlaceholderArgs` Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/VectorInput/index.ts#L20 The arguments for the [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md) constructor. ## Properties ### dimensions ```ts dimensions?: 2 | 3 | 4 ``` The number of dimensions in the vector. Can be between 2 to 4. Defaults to 3. ### max ```ts max?: number ``` The maximum value of each vector element. ### min ```ts min?: number ``` The minimum value of each vector element. ### precision ```ts precision?: number ``` The decimal precision of each vector element. Defaults to 7. ### step ```ts step?: number ``` The incremental step when using arrow keys or dragger for each vector element. ### stepPrecision ```ts stepPrecision?: number ``` The incremental step when holding Shift and using arrow keys or dragger for each vector element. ## Inherited from ElementArgs - `alignItems?: string` - `alignSelf?: string` - `binding?: BindingBase` - `class?: string | string[]` - `dom?: string | HTMLElement` - `enabled?: boolean` - `error?: boolean` - `flexBasis?: string | number` - `flexDirection?: string` - `flexGrow?: string | number` - `flexShrink?: string | number` - `flexWrap?: string` - `height?: number` - `hidden?: boolean` - `id?: string` - `ignoreParent?: boolean` - `isRoot?: boolean` - `justifyContent?: string` - `justifySelf?: string` - `link?: { observer: Observer | Observer[]; path: string | string[] }` - `onChange?: (value: number[]) => void` - `onClick?: () => void` - `onRemove?: () => void` - `parent?: Element` - `readOnly?: boolean` - `style?: string` - `tabIndex?: number` - `width?: number` ## Inherited from IMultiPlaceholderArgs - `placeholder?: string | string[]` ## Inherited from [IBindableArgs](https://api.playcanvas.com/pcui/interfaces/IBindableArgs.md) - `renderChanges?: boolean` - `value?: string | number[]` - `values?: (string | number[])[]` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/variables/revision.md # 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. ```ts const revision: "PACKAGE_REVISION" = 'PACKAGE_REVISION' ``` -------------------------------------------------------------------------------- URL: https://api.playcanvas.com/pcui/variables/version.md # 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`. ```ts const version: "PACKAGE_VERSION" = 'PACKAGE_VERSION' ``` --------------------------------------------------------------------------------