ui/ View Manager
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.
- 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.
Object keys for config
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 to control the animation
An object containing properties to be passed to each child.
Views to be managed.
May be any renderable component including custom React components or primitive DOM nodes.
Type of component wrapping the children. May be a DOM node or a custom React component.
Default: 'div'Called with a reference to the root component.
When using ui/ViewManager.ViewManager, the
ref
prop is forwarded to this component ascomponentRef
.Time in milliseconds to complete a transition
Default: 300Index of last visible view.
Defaults to the current value of
index
.Default: value of indexTime, in milliseconds, to wait after a view has entered to inform it by pass the
enteringProp
as false.Default: 0Name 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. Whenfalse
, 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 of active view
Default: 0Indicates if the transition should be animated
Default: falseCalled when each view is rendered during initial construction.
Called when each view completes its transition into the viewport.
Called when each view completes its transition out of the viewport.
Called when each view completes its transition within the viewport.
Called once when all views have completed their transition.
Called once before views begin their transition.
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.
Indicates the current locale uses right-to-left reading order.
rtl
is passed to thearranger
in order to alter the animation (e.g. reversing the horizontal direction).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.
- 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 withrtl
for locales that use right-to-left reading order.- to Number
Index to which the ViewManager is transitioning.
Object keys for config
Returns
- Animation
An
Animation
-compatible object