moonstone/ Marquee
Exports the moonstone/Marquee.Marquee, moonstone/Marquee.MarqueeBase, moonstone/Marquee.MarqueeController, moonstone/Marquee.MarqueeDecorator, and moonstone/Marquee.MarqueeText components.
The default export is moonstone/Marquee.Marquee.
import Marquee from '@enact/moonstone/Marquee';
Members
MarqueeComponent❌
since 1.15.0. Will be moved to moonstone/Marquee.MarqueeBase in 2.0.0
moonstone/Marquee.Marquee is a stateless text container element which implements a text cut-off followed by an ellipsis character.
import Marquee from '@enact/moonstone/Marquee';
Properties
- alignment
Text alignment value of the marquee. Valid values are
'left'
,'right'
and'center'
.- animating
true
when the component should be animating- centered ✘
When
true
, the contents will be centered regardless of the text directionality.replaced by
alignment
- children
children
is the text or a set of components that should be scrolled by the moonstone/Marquee.Marquee component. This prop may be empty in some cases, which is OK.- className
CSS class name for the root node
- clientRef
Function to capture a reference to the client node
- distance
Distance to animate the marquee which is generally the width of the text minus the width of the container.
- onMarqueeComplete
Callback function for when the marquee completes its animation
- overflow
Text overflow setting. Either
'clip'
or'ellipsis'
- rtl
true
if the directionality of the content is right-to-leftDefault: false- speed
Speed of marquee animation in pixels/second.
MarqueeControllerHigher-Order Component
moonstone/Marquee.MarqueeController is a Higher-order Component which will synchronize contained Marquee's.
import {MarqueeController} from '@enact/moonstone/Marquee';
Configuration
- marqueeOnFocus
When
true
, anyonFocus
events that bubble to the controller will start the contained Marquee instances. This is useful when a component contains Marquee instances that need to be started with sibling components are focused.Default: false
MarqueeDecoratorHigher-Order Component
moonstone/Marquee.MarqueeDecorator is a Higher-order Component which makes the Wrapped component's children marquee.
import {MarqueeDecorator} from '@enact/moonstone/Marquee';
Configuration
- blur
Property containing the callback to stop the animation when
marqueeOn
is'focus'
Default: 'onBlur'- className
Optional CSS class to apply to the marqueed element
Default: null- enter
Property containing the callback to start the animation when
marqueeOn
is'hover'
Default: 'onMouseEnter'- focus
Property containing the callback to start the animation when
marqueeOn
is'focus'
Default: 'onFocus'- invalidateProps
Invalidate the distance if any property (like 'inline') changes. Expects an array of props which on change trigger invalidateMetrics.
Default: ['remeasure']- leave
Property containing the callback to stop the animation when
marqueeOn
is'hover'
Default: 'onMouseLeave'
Properties added to wrapped component
- alignment
Text alignment value of the marquee. Valid values are
'left'
,'right'
and'center'
.- children
Children to be marqueed
- disabled
Disables all marquee behavior except when
marqueeOn
is'hover'
or'focus'
. Will be forwarded onto the wrapped component as well.- forceDirection
Forces the
direction
of the marquee. Valid values are'rtl'
and'ltr'
. This includes non-text elements as well. The default behavior, if this prop is unset, is to evaluate the text content for directionality using i18n/util.isRtlText.- marqueeCentered ✘
When
true
, the contents will be centered regardless of the text directionality.replaced by
alignment
- marqueeDelay
Number of milliseconds to wait before starting marquee when
marqueeOn
is'hover'
or'focus'
or before restarting any marquee.Default: 1000- marqueeDisabled
Disables all marquee behavior and removes supporting markup.
- marqueeOn
Determines what triggers the marquee to start its animation. Valid values are
'focus'
,'hover'
and'render'
. The default is'focus'
.Default: 'focus'- marqueeOnRenderDelay
Number of milliseconds to wait before starting marquee the first time. Has no effect if
marqueeOn
is not'render'
Default: 1000- marqueeResetDelay
Number of milliseconds to wait before resetting the marquee position after it finishes. A minimum of 40 milliseconds is enforced.
Default: 1000- marqueeSpeed
Rate of marquee measured in pixels/second.
Default: 60
MarqueeTextComponent❌
since 1.15.0. Will be moved to moonstone/Marquee.Marquee in 2.0.0
moonstone/Marquee.MarqueeText is a basic marqueeing text component.
import {MarqueeText} from '@enact/moonstone/Marquee';