Interface: Slideshow

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

Container

↳ Slideshow

Properties

BackdropBlur

• Optional BackdropBlur: BackdropBlurEffect

Inherited from

Container.BackdropBlur

BlendMode

• Optional BlendMode: BlendModeEffect

Inherited from

Container.BlendMode

Blur

• Optional Blur: BlurEffect

Inherited from

Container.Blur

Brightness

• Optional Brightness: BrightnessEffect

Inherited from

Container.Brightness

Contrast

• Optional Contrast: ContrastEffect

Inherited from

Container.Contrast

Draggable

• Optional Draggable: DraggableEffect

Inherited from

Container.Draggable

Follow

• Optional Follow: FollowEffect

Inherited from

Container.Follow

Glow

• Optional Glow: GlowEffect

Inherited from

Container.Glow

Grayscale

• Optional Grayscale: GrayscaleEffect

Inherited from

Container.Grayscale

HueRotate

• Optional HueRotate: HueRotateEffect

Inherited from

Container.HueRotate

Invert

• Optional Invert: InvertEffect

Inherited from

Container.Invert

LetterSpacing

• Optional LetterSpacing: LetterSpacingEffect

Inherited from

Container.LetterSpacing

LookAt

• Optional LookAt: LookAtEffect

Inherited from

Container.LookAt

Oscillate

• Optional Oscillate: OscillateEffect

Inherited from

Container.Oscillate

Physics

• Optional Physics: PhysicsEffect

Inherited from

Container.Physics

Saturation

• Optional Saturation: SaturationEffect

Inherited from

Container.Saturation

Sepia

• Optional Sepia: SepiaEffect

Inherited from

Container.Sepia

Shadow

• Optional Shadow: ShadowEffect

Inherited from

Container.Shadow

Spin

• Optional Spin: SpinEffect

Inherited from

Container.Spin

TextOutline

• Optional TextOutline: TextOutlineEffect

Inherited from

Container.TextOutline

Transform

• Optional Transform: TransformEffect

Inherited from

Container.Transform

autoplay

• autoplay: boolean

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

Container.backgroundColor

backgroundImageFit

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

Inherited from

Container.backgroundImageFit

backgroundImageOpacity

• backgroundImageOpacity: number

Inherited from

Container.backgroundImageOpacity

backgroundImagePosition

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

Inherited from

Container.backgroundImagePosition

backgroundImageTileSize

• backgroundImageTileSize: number

Inherited from

Container.backgroundImageTileSize

children

• Readonly children: View[]

The components that are children of this component.

Inherited from

Container.children

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

Inherited from

Container.collisionVelocityThreshold

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

Container.color

componentType

• Readonly componentType: string

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

Inherited from

Container.componentType

defaultBounciness

• defaultBounciness: number

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

Default

Inherited from

Container.defaultBounciness

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

Inherited from

Container.defaultDensity

defaultFriction

• defaultFriction: number

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

Default

Inherited from

Container.defaultFriction

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'

Inherited from

Container.defaultPhysicsType

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'

Inherited from

Container.defaultShape

duration

• duration: number

height

• height: number

The height of the component.

Inherited from

Container.height

horizontalGravity

• horizontalGravity: number

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

Default

Inherited from

Container.horizontalGravity

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

Container.id

index

• index: number

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

Container.link

linkRel

• linkRel: LinkRelType

See

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

Inherited from

Container.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

Container.linkTarget

linkTitle

• linkTitle: string

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

Default

''

Inherited from

Container.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

Container.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

Container.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

Container.parent

physicsEnabled

• physicsEnabled: boolean

Whether physics is enabled.

Default

true

Inherited from

Container.physicsEnabled

rotation

• rotation: number

The component's rotation, in degrees.

Inherited from

Container.rotation

scale

• scale: number

The component's scale multiplier.

Inherited from

Container.scale

scrollLeft

• scrollLeft: number

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

Inherited from

Container.scrollLeft

scrollTop

• scrollTop: number

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

Inherited from

Container.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

Container.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

Container.tabIndex

verticalGravity

• verticalGravity: number

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

Default

9.8

Inherited from

Container.verticalGravity

visible

• visible: boolean

The component's visibility.

true is visible, false is invisible

Inherited from

Container.visible

width

• width: number

The width of the component.

Inherited from

Container.width

x

• x: number

The component's x coordinate.

Inherited from

Container.x

y

• y: number

The component's y coordinate.

Inherited from

Container.y

Methods

addEffect

▸ addEffect(effect): void

Add an effect to the component.

Parameters

Name	Type
`effect`	`string`

Returns

void

Inherited from

Container.addEffect

appendChild

▸ appendChild(child): void

Add a child component to this component.

Parameters

Name	Type
`child`	`View`

Returns

void

Inherited from

Container.appendChild

clone

▸ clone(): Slideshow

Create an exact duplicate of a component.

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

Returns

Slideshow

Example

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

Overrides

Container.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

Container.dispatchEvent

focus

▸ focus(options?): void

Parameters

Name	Type
`options?`	`FocusOptions`

Returns

void

Inherited from

Container.focus

goto

▸ goto(index): void

Go to a specific item in the slideshow.

Parameters

Name	Type
`index`	`number`

Returns

void

hasPointerCapture

▸ hasPointerCapture(pointerId): boolean

Parameters

Name	Type
`pointerId`	`number`

Returns

boolean

Inherited from

Container.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

Inherited from

Container.insertChild

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

Container.localPointFromClient

▸ next(): void

Go to the Next item in the slideshow.

Returns

void

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

Container.on

▸ previous(): void

Go to the Next item in the slideshow.

Returns

void

releasePointerCapture

▸ releasePointerCapture(pointerId): void

Parameters

Name	Type
`pointerId`	`number`

Returns

void

Inherited from

Container.releasePointerCapture

remove

▸ remove(): void

Remove the component from its parent.

Returns

void

Example

view.remove();

Inherited from

Container.remove

removeChild

▸ removeChild(child): void

Remove a child component from this component.

Parameters

Name	Type
`child`	`View`

Returns

void

Inherited from

Container.removeChild

removeEffect

▸ removeEffect(effect): void

Remove an effect to the component.

Parameters

Name	Type
`effect`	`string`

Returns

void

Inherited from

Container.removeEffect

setPointerCapture

▸ setPointerCapture(pointerId): void

Parameters

Name	Type
`pointerId`	`number`

Returns

void

Inherited from

Container.setPointerCapture

Slider Spineffect