Enact
Edit on GitHub

ui/ViewManager

A component that manages the transitions of views.

import ViewManager from '@enact/ui/ViewManager';

Members

ViewManagerComponent

A ViewManager controls the visibility of a configurable number of views, allowing for them to be transitioned on and off the viewport.

import ViewManager from '@enact/ui/ViewManager';

SlideArrangerFunction

SlideArranger( config )Arranger

A basic arranger factory that must be configured with direction and optionally an amount.

1 Param
config Object

Configuration object.

Object keys for config
amount Object

Amount, as a whole number, to "slide" where 100 is the entire size of the node along the axis of the direction.

direction 'bottom''left''right''top'

Direction from which the view will transition.

Returns
Arranger

An arranger

SlideBottomArrangerArranger

An arranger that enters from the top and leaves to the bottom..

SlideLeftArrangerArranger

An arranger that enters from the right and leaves to the left..

SlideRightArrangerArranger

An arranger that enters from the left and leaves to the right.

SlideTopArrangerArranger

An arranger that enters from the bottom and leaves to the top..

ViewManagerBaseComponent

The base ViewManager component, without ViewManagerDecorator applied.

import {ViewManagerBase} from '@enact/ui/ViewManager';
Properties
arranger
Arranger

Arranger to control the animation

childProps
Object

An object containing properties to be passed to each child.

children
Node

Views to be managed.

May be any renderable component including custom React components or primitive DOM nodes.

component
StringComponent

Type of component wrapping the children. May be a DOM node or a custom React component.

Default: 'div'
componentRef
ObjectFunction

Called with a reference to the root component.

When using ui/ViewManager.ViewManager, the ref prop is forwarded to this component as componentRef.

duration
Number

Time in milliseconds to complete a transition

Default: 300
end
Number

Index of last visible view.

Defaults to the current value of index.

Default: value of index
enteringDelay
Number

Time, in milliseconds, to wait after a view has entered to inform it by pass the enteringProp as false.

Default: 0
enteringProp
String

Name of the property to pass to the wrapped view to indicate when it is entering the viewport.

When true, the view has been created but has not transitioned into place. When false, the view has finished its transition.

The notification can be delayed by setting enteringDelay. If not set, the view will not be notified of the change in transition.

index
Number

Index of active view

Default: 0
noAnimation
Boolean

Indicates if the transition should be animated

Default: false
onAppear
Function

Called when each view is rendered during initial construction.

onEnter
Function

Called when each view completes its transition into the viewport.

onLeave
Function

Called when each view completes its transition out of the viewport.

onStay
Function

Called when each view completes its transition within the viewport.

onTransition
Function

Called once when all views have completed their transition.

onWillTransition
Function

Called once before views begin their transition.

reverseTransition
Boolean

Explicitly sets the transition direction.

If omitted, the direction is determined automatically based on the change of index or a string comparison of the first child's key.

rtl
Boolean

Indicates the current locale uses right-to-left reading order.

rtl is passed to the arranger in order to alter the animation (e.g. reversing the horizontal direction).

start
Number

Index of first visible view. Defaults to the current value of index.

Default: value of index

ViewManagerDecoratorHigher-Order Component

Applies ViewManager behaviors.

import {ViewManagerDecorator} from '@enact/ui/ViewManager';

Type Definitions

ArrangerObject

An object with callback functions to arrange views within ui/ViewManager.ViewManager.

enter •
ArrangerCallback

Returns an array of keyframes describing the animation when a view is entering the viewport.

leave •
ArrangerCallback

Returns an array of keyframes describing the animation when a view is leaving the viewport.

stay
ArrangerCallback

Returns an array of keyframes describing the animation when a view is remaining in the viewport.

ArrangerCallbackFunction

ArrangerCallback(config)Animation

A function that generates an animation for a given transition configuration

1 Param
config Object

Animation configuration object.

Object keys for config
duration Number

Duration of the animation in ms.

fill 'forwards''backwards''both''none'

Animation effect should be reflected by previous state or retained after animation.

from Number

Index from which the ViewManager is transitioning.

node Node

DOM node to be animated.

reverse Boolean

true when the animation should be reversed.

rtl Boolean

true when the ViewManager was configured with rtl for locales that use right-to-left reading order.

to Number

Index to which the ViewManager is transitioning.

Returns
Animation

An Animation-compatible object

ArrayBooleanFunctionModuleNumberObjectString