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
Properties
BackdropBlur
• Optional
BackdropBlur: BackdropBlurEffect
Inherited from
BlendMode
• Optional
BlendMode: BlendModeEffect
Inherited from
Blur
• Optional
Blur: BlurEffect
Inherited from
Brightness
• Optional
Brightness: BrightnessEffect
Inherited from
Contrast
• Optional
Contrast: ContrastEffect
Inherited from
Draggable
• Optional
Draggable: DraggableEffect
Inherited from
Follow
• Optional
Follow: FollowEffect
Inherited from
Glow
• Optional
Glow: GlowEffect
Inherited from
Grayscale
• Optional
Grayscale: GrayscaleEffect
Inherited from
HueRotate
• Optional
HueRotate: HueRotateEffect
Inherited from
Invert
• Optional
Invert: InvertEffect
Inherited from
LetterSpacing
• Optional
LetterSpacing: LetterSpacingEffect
Inherited from
LookAt
• Optional
LookAt: LookAtEffect
Inherited from
Oscillate
• Optional
Oscillate: OscillateEffect
Inherited from
Physics
• Optional
Physics: PhysicsEffect
Inherited from
Saturation
• Optional
Saturation: SaturationEffect
Inherited from
Sepia
• Optional
Sepia: SepiaEffect
Inherited from
Shadow
• Optional
Shadow: ShadowEffect
Inherited from
Spin
• Optional
Spin: SpinEffect
Inherited from
TextOutline
• Optional
TextOutline: TextOutlineEffect
Inherited from
Transform
• Optional
Transform: TransformEffect
Inherited from
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
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
componentType
• Readonly
componentType: string
The component's type. E.g. "View", "Text", "Button", "Page", etc.
Inherited from
defaultBounciness
• defaultBounciness: number
0: no bounce, 10: default, 100: full bounce, >100: increases velocity
Default
10
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
100
defaultFriction
• defaultFriction: number
Between 0 (no friction) and 100 (strong friction).
Default
30
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
horizontalGravity
• horizontalGravity: number
The horizontal gravity force (nerd alert: in meters per second).
Default
0
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
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
linkRel
• linkRel: LinkRelType
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel (opens in a new tab)
Inherited from
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
linkTitle
• linkTitle: string
The title of the link displayed on hover. If '' nothing is displayed.
Default
''
Inherited from
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
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
page
• Readonly
page: undefined
| Page
The Page that this component is a child of, if any.
Inherited from
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
physicsEnabled
• physicsEnabled: boolean
Whether physics is enabled.
Default
true
rotation
• rotation: number
The component's rotation, in degrees.
Inherited from
scale
• scale: number
The component's scale multiplier.
Inherited from
scrollLeft
• scrollLeft: number
The number of pixels that a Container's content is scrolled horizontally.
Inherited from
scrollTop
• scrollTop: number
The number of pixels that a Container's content is scrolled vertically.
Inherited from
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
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
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
width
• width: number
The width of the component.
Inherited from
x
• x: number
The component's x coordinate.
Inherited from
y
• y: number
The component's y coordinate.
Inherited from
Methods
addEffect
▸ addEffect(effect
): void
Add an effect to the component.
Parameters
Name | Type |
---|---|
effect | string |
Returns
void
Inherited from
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
Example
const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);
Overrides
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
focus
▸ focus(options?
): void
Parameters
Name | Type |
---|---|
options? | FocusOptions |
Returns
void
Inherited from
hasPointerCapture
▸ hasPointerCapture(pointerId
): boolean
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
boolean
Inherited from
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(x
, y
): Object
Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.
Parameters
Name | Type | Description |
---|---|---|
x | number | The x position in the client viewport. |
y | number | The y position in the client viewport. |
Returns
Object
an object with x and y properties.
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
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
releasePointerCapture
▸ releasePointerCapture(pointerId
): void
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
void
Inherited from
remove
▸ remove(): void
Remove the component from its parent.
Returns
void
Example
view.remove();
Inherited from
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
setPointerCapture
▸ setPointerCapture(pointerId
): void
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
void