Enact

moonstone/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
String

Text alignment value of the marquee. Valid values are 'left', 'right' and 'center'.

animating
Boolean

true when the component should be animating

centered ✘
Boolean

When true, the contents will be centered regardless of the text directionality.

replaced by alignment

children
ArrayNodeNode

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
String

CSS class name for the root node

clientRef
Function

Function to capture a reference to the client node

distance
Number

Distance to animate the marquee which is generally the width of the text minus the width of the container.

onMarqueeComplete
Function

Callback function for when the marquee completes its animation

overflow
String

Text overflow setting. Either 'clip' or 'ellipsis'

rtl
Boolean

true if the directionality of the content is right-to-left

Default: false
speed
Number

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
Boolean

When true, any onFocus 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
String

Property containing the callback to stop the animation when marqueeOn is 'focus'

Default: 'onBlur'
className
String

Optional CSS class to apply to the marqueed element

Default: null
enter
String

Property containing the callback to start the animation when marqueeOn is 'hover'

Default: 'onMouseEnter'
focus
String

Property containing the callback to start the animation when marqueeOn is 'focus'

Default: 'onFocus'
invalidateProps
Array

Invalidate the distance if any property (like 'inline') changes. Expects an array of props which on change trigger invalidateMetrics.

Default: ['remeasure']
leave
String

Property containing the callback to stop the animation when marqueeOn is 'hover'

Default: 'onMouseLeave'
Properties added to wrapped component
alignment
String

Text alignment value of the marquee. Valid values are 'left', 'right' and 'center'.

children
Node

Children to be marqueed

disabled
Boolean

Disables all marquee behavior except when marqueeOn is 'hover' or 'focus'. Will be forwarded onto the wrapped component as well.

forceDirection
String

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 ✘
Boolean

When true, the contents will be centered regardless of the text directionality.

replaced by alignment

marqueeDelay
Number

Number of milliseconds to wait before starting marquee when marqueeOn is 'hover' or 'focus' or before restarting any marquee.

Default: 1000
marqueeDisabled
Boolean

Disables all marquee behavior and removes supporting markup.

marqueeOn
String

Determines what triggers the marquee to start its animation. Valid values are 'focus', 'hover' and 'render'. The default is 'focus'.

Default: 'focus'
marqueeOnRenderDelay
Number

Number of milliseconds to wait before starting marquee the first time. Has no effect if marqueeOn is not 'render'

Default: 1000
marqueeResetDelay
Number

Number of milliseconds to wait before resetting the marquee position after it finishes. A minimum of 40 milliseconds is enforced.

Default: 1000
marqueeSpeed
Number

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';
ArrayBooleanFunctionModuleNumberObjectString