# 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<ElementArgs>)
```

Creates a new Element.

**Parameters**

- `args` (`Readonly<ElementArgs>`, 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 extends Element>(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 extends Element>(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');
});
```