Interface: Container

The Container component is a base class for components that can contain other components. It has all the properties, methods, and events of the View component, plus the following:

Hierarchy

View
Scrollable

↳ Container

↳↳ Page

↳↳ Section

↳↳ Slideshow

Properties

BackdropBlur

• Optional BackdropBlur: BackdropBlurEffect

Inherited from

View.BackdropBlur

BlendMode

• Optional BlendMode: BlendModeEffect

Inherited from

View.BlendMode

Blur

• Optional Blur: BlurEffect

Inherited from

View.Blur

Brightness

• Optional Brightness: BrightnessEffect

Inherited from

View.Brightness

Contrast

• Optional Contrast: ContrastEffect

Inherited from

View.Contrast

Draggable

• Optional Draggable: DraggableEffect

Inherited from

View.Draggable

Follow

• Optional Follow: FollowEffect

Inherited from

View.Follow

Glow

• Optional Glow: GlowEffect

Inherited from

View.Glow

Grayscale

• Optional Grayscale: GrayscaleEffect

Inherited from

View.Grayscale

HueRotate

• Optional HueRotate: HueRotateEffect

Inherited from

View.HueRotate

Invert

• Optional Invert: InvertEffect

Inherited from

View.Invert

LetterSpacing

• Optional LetterSpacing: LetterSpacingEffect

Inherited from

View.LetterSpacing

LookAt

• Optional LookAt: LookAtEffect

Inherited from

View.LookAt

Oscillate

• Optional Oscillate: OscillateEffect

Inherited from

View.Oscillate

Physics

• Optional Physics: PhysicsEffect

Inherited from

View.Physics

Saturation

• Optional Saturation: SaturationEffect

Inherited from

View.Saturation

Sepia

• Optional Sepia: SepiaEffect

Inherited from

View.Sepia

Shadow

• Optional Shadow: ShadowEffect

Inherited from

View.Shadow

Spin

• Optional Spin: SpinEffect

Inherited from

View.Spin

TextOutline

• Optional TextOutline: TextOutlineEffect

Inherited from

View.TextOutline

Transform

• Optional Transform: TransformEffect

Inherited from

View.Transform

backgroundColor

• backgroundColor: undefined | string

The background color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined background color is transparent.

Example

// Set the background color of the view to a translucent red.
view.backgroundColor = 'rgba(255, 0, 0, 50%)'

Inherited from

View.backgroundColor

backgroundImageFit

• backgroundImageFit: "fill" | "fit" | "stretch" | "tile"

backgroundImageOpacity

• backgroundImageOpacity: number

backgroundImagePosition

• backgroundImagePosition: "center" | "top" | "bottom"

backgroundImageTileSize

• backgroundImageTileSize: number

children

• Readonly children: View[]

The components that are children of this component.

collisionVelocityThreshold

• collisionVelocityThreshold: number

The velocity threshold for elastic collisions. Any collision with a relative linear velocity below this threshold will be treated as inelastic.

Default

1.0

color

• color: undefined | string

The foreground or text color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined foreground color is inherited from one of the component's ancestors.

Example

// Set the foreground color of the view to red.
view.color = 'red';

Inherited from

View.color

componentType

• Readonly componentType: string

The component's type. E.g. "View", "Text", "Button", "Page", etc.

Inherited from

View.componentType

defaultBounciness

• defaultBounciness: number

0: no bounce, 10: default, 100: full bounce, >100: increases velocity

Default

defaultDensity

• defaultDensity: number

The density is used to set the mass of an element, measured in kilograms by square meter. Higher density means heavier bodies, and it can't be negative.

Default

defaultFriction

• defaultFriction: number

Between 0 (no friction) and 100 (strong friction).

Default

defaultPhysicsType

• defaultPhysicsType: "none" | "dynamic" | "static" | "kinematic"

Controls how the object responds to gravity, forces, collisions and being moved by an action or animation.

'static' - Stays put (like the ground or a wall) and other objects bounce off of it.
gravity: ❌, collisions: ✅, animatable: ❌ 'dynamic' - Feels the affects of gravity by falling or floating and can collide with other objects.
gravity: ✅, collisions: ✅, animatable: ❌ 'kinematic' - Adds force to dynamic objects when they collide during an animation or action (like a flipper in a pinball machine)
gravity: ❌, collisions: ✅, animatable: ✅ 'none' - Not affected by physics at all.
gravity: ❌, collisions: ❌, animatable: ✅

Default

'static'

defaultShape

• defaultShape: "box" | "circle"

Defines the shape of the object for collision purposes.

'box' - A rectangular box the width and height of the object. Slides and tumbles. 'circle' - A circular shape. Good for things that should roll.

Default

'box'

height

• height: number

The height of the component.

Inherited from

View.height

horizontalGravity

• horizontalGravity: number

The horizontal gravity force (nerd alert: in meters per second).

Default

id

• Readonly id: number

Every Component is assigned a unique numerical id that cannot be changed. Components can be looked up by id using the get function.

Inherited from

View.id

link

• link: undefined | string

The address of the link. Can be a URL to a web page, a 'tel:' phone number, a 'mailto:' email address, or a 'sms:' phone number. Also can be a relative link to a page, "@previous" for the previous page, or "@next" for the next page. If undefined the component is not treated as a link.

Default

undefined

Inherited from

View.link

linkRel

• linkRel: LinkRelType

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel (opens in a new tab)

Inherited from

View.linkRel

linkTarget

• linkTarget: "_blank" | "_self" | "_parent" | "_top"

The target of the link. Can be '_blank' (open in new window or tab), '_self' (replace current page), '_parent' (replace parent if in an iframe), or '_top' (replace top if in an iframe).

Default

'_self'

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target (opens in a new tab)

Inherited from

View.linkTarget

linkTitle

• linkTitle: string

The title of the link displayed on hover. If '' nothing is displayed.

Default

''

Inherited from

View.linkTitle

name

• name: undefined | string

Every Component can have a user-assigned name. It can be anything and is not guaranteed to be unique. Components can be looked up by name using the get function.

Inherited from

View.name

opacity

• opacity: number

The component's opacity, or level of transparency.

1 is fully opaque (not transparent at all), 0.5 is 50% see-through, and 0 is completely transparent.

Inherited from

View.opacity

parent

• Readonly parent: undefined | View

When added to a Container (or a Page, which is a Container), the Container is assigned to the parent property.

Inherited from

View.parent

physicsEnabled

• physicsEnabled: boolean

Whether physics is enabled.

Default

true

rotation

• rotation: number

The component's rotation, in degrees.

Inherited from

View.rotation

scale

• scale: number

The component's scale multiplier.

Inherited from

View.scale

scrollLeft

• scrollLeft: number

The number of pixels that a Container's content is scrolled horizontally.

Inherited from

Scrollable.scrollLeft

scrollTop

• scrollTop: number

The number of pixels that a Container's content is scrolled vertically.

Inherited from

Scrollable.scrollTop

style

• style: Partial (opens in a new tab)<CSSStyleDeclaration (opens in a new tab)>

Low-level access to the component's CSS property.

Inherited from

View.style

tabIndex

• tabIndex: undefined | number

Control if or how the component is focused when the tab key is pressed.

0 - The component should be focusable in sequential keyboard navigation, after any positive tabIndex values. a positive value - Should be focusable in sequential keyboard navigation, with the order defined by the value. -1 - Should not be focusable in sequential keyboard navigation, but could be focused programmatically. undefined - the browser decides whether the component is focusable.

Default

undefined

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex (opens in a new tab)

Inherited from

View.tabIndex

verticalGravity

• verticalGravity: number

The vertical gravity force (nerd alert: in meters per second).

Default

9.8

visible

• visible: boolean

The component's visibility.

true is visible, false is invisible

Inherited from

View.visible

width

• width: number

The width of the component.

Inherited from

View.width

x

• x: number

The component's x coordinate.

Inherited from

View.x

y

• y: number

The component's y coordinate.

Inherited from

View.y

Methods

addEffect

▸ addEffect(effect): void

Add an effect to the component.

Parameters

Name	Type
`effect`	`string`

Returns

void

Inherited from

View.addEffect

appendChild

▸ appendChild(child): void

Add a child component to this component.

Parameters

Name	Type
`child`	`View`

Returns

void

clone

▸ clone(): Container

Create an exact duplicate of a component.

The clone must be added to a container with appendChild to be visible.

Returns

Container

Example

const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);

Overrides

View.clone

dispatchEvent

▸ dispatchEvent(event): Promise (opens in a new tab)<void>

Triggers the event listeners for the specified event.

Parameters

Name	Type
`event`	`Event` (opens in a new tab)

Returns

Promise (opens in a new tab)<void>

Inherited from

View.dispatchEvent

focus

▸ focus(options?): void

Parameters

Name	Type
`options?`	`FocusOptions`

Returns

void

Inherited from

View.focus

hasPointerCapture

▸ hasPointerCapture(pointerId): boolean

Parameters

Name	Type
`pointerId`	`number`

Returns

boolean

Inherited from

View.hasPointerCapture

insertChild

▸ insertChild(child, index): void

Insert a child component into this component at the specified index.

Parameters

Name	Type
`child`	`View`
`index`	`number`

Returns

void

localPointFromClient

▸ localPointFromClient(clientX, clientY): Object

Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.

Parameters

Name	Type	Description
`clientX`	`number`	The x position in the client viewport.
`clientY`	`number`	The y position in the client viewport.

Returns

Object

an object with x and y properties in the local coordinate system of the component.

Name	Type
`x`	`number`
`y`	`number`

Example

let dragging = false;
let pointerOffset;
this.on("pointerdown", (event) => {
  this.setPointerCapture(event.pointerId);
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(event.clientX, event.clientY)
  pointerOffset = { x: point.x - this.x, y: point.y - this.y };
  dragging = true;
});
 
this.on("pointermove", (ev) => {
if (!dragging)
    return;
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(ev.clientX, ev.clientY);
  this.x = point.x - pointerOffset.x;
  this.y = point.y - pointerOffset.y;
});
 
this.on("pointerup", (event) => {
  this.releasePointerCapture(event.pointerId);
  dragging = false;
});

Inherited from

View.localPointFromClient

on

▸ on<K>(type, listener, options?): () => void

Add an event listener to the component.

Type parameters

Name	Type
`K`	extends keyof `EventHandlersEventMap`

Parameters

Name	Type
`type`	`K`
`listener`	(`event`: `EventHandlersEventMap`[`K`]) => `any`
`options?`	`EventListenerOptions`

Returns

fn

Returns a function that removes the event listener.

▸ (): void

Add an event listener to the component.

Returns

void

Returns a function that removes the event listener.

Inherited from

View.on

releasePointerCapture

▸ releasePointerCapture(pointerId): void

Parameters

Name	Type
`pointerId`	`number`

Returns

void

Inherited from

View.releasePointerCapture

remove

▸ remove(): void

Remove the component from its parent.

Returns

void

Example

view.remove();

Inherited from

View.remove

removeChild

▸ removeChild(child): void

Remove a child component from this component.

Parameters

Name	Type
`child`	`View`

Returns

void

removeEffect

▸ removeEffect(effect): void

Remove an effect to the component.

Parameters

Name	Type
`effect`	`string`

Returns

void

Inherited from

View.removeEffect

setPointerCapture

▸ setPointerCapture(pointerId): void

Parameters

Name	Type
`pointerId`	`number`

Returns

void

Inherited from

View.setPointerCapture

Confetti Contrasteffect