A component that will marquee its overflowing contents.
import Marquee from '@enact/ui/Marquee';Members
MarqueeComponent
A minimally-styled marquee component.
import Marquee from '@enact/ui/Marquee';MarqueeBaseComponent
Marquees the children of the component.
For automated marquee calculations use ui/Marquee.Marquee.
import {MarqueeBase} from '@enact/ui/Marquee';Properties
Text alignment value of the marquee
Valid values are:
'left','right', and'center'
Applies animating styles such as removing the ellipsis.
Sets the value of the
aria-labelattribute for the wrapped component.The text or a set of components that should be marqueed
This prop may be empty in some cases, which is OK.
Called when mounting or unmounting with a reference to the client node
Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.
The following classes are supported:
marquee- The root component classanimate- Applied to the inner content node when the text is animatingspacing- The spacing node used between the repeated contenttext- The inner content nodewillAnimate- Applied to the inner content node shortly before animation
Distance to animate the marquee
Usually, the
distanceis the width of the text minus the width of the containerCalled when the marquee completes its animation
Text overflow setting. Either
'clip'or'ellipsis'trueif the directionality of the content is right-to-leftDefault: falseAmount of spacing, in pixels, between the instances of the content
Default: 0Speed of marquee animation in pixels/second.
Indicates the marquee will animate soon.
Should be used by the component to prepare itself for animation such as promoting composite layers for improved performance.
Default: false
MarqueeControllerHigher-Order Component
A higher-order component that synchronizes contained Marquees.
import {MarqueeController} from '@enact/ui/Marquee';Configuration
When
true, anyonFocusevents that bubble to the controller will start the containedMarqueeinstances. This is useful when a component containsMarqueeinstances that need to be started when sibling components are focused.Default: false
MarqueeDecoratorHigher-Order Component
A higher-order component that provides marquee functionalities.
Note: This HoC passes additional properties to the wrapped component and wraps the children
prop with an additional component necessary for rendering the marquee.
import {MarqueeDecorator} from '@enact/ui/Marquee';Configuration
Property containing the callback to stop the animation when
marqueeOnis'focus'Default: 'onBlur'Optional CSS class name to customize the marquee
componentWill be removed in 5.0.0. Use ui/Marquee.MarqueeDecorator.defaultConfig.css instead.
Default: nullThe base marquee component wrapping the content.
Default: ui/Marquee.MarqueeCustomizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.
The following classes are supported:
marquee- The root component classanimate- Applied to the inner content node when the text is animatingspacing- The spacing node used between the repeated contenttext- The inner content nodewillAnimate- Applied to the inner content node shortly before animation
Default: nullProperty containing the callback to start the animation when
marqueeOnis'hover'Default: 'onMouseEnter'Property containing the callback to start the animation when
marqueeOnis'focus'Default: 'onFocus'Invalidate the distance if any property (like 'inline') changes. Expects an array of props which on change trigger invalidateMetrics.
Default: ['remeasure']Property containing the callback to stop the animation when
marqueeOnis'hover'Default: 'onMouseLeave'A function that determines the text directionality of a string.
Returns:
'rtl'if the text should marquee to the right'ltr'if the text should marquee to the left
Properties added to wrapped component
Text alignment value of the marquee. Valid values are
'left','right'and'center'.Children to be marqueed
Passed through to the wrapped component.
Does not affect Marquee behavior except that components that are
marqueeOn="focus"will be treated as if they weremarqueeOn="hover", to allow disabled (and thus, unfocusable) components to marquee.Forces the
directionof the marquee.Valid values are
'rtl','ltr', and'locale'. 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.If
'locale', thedirectionis determined by the locale, same as ui/Marquee.MarqueeDecorator.rtl. In other words, it will not consider the text content for determining the direction.The current locale as a BCP 47 language tag.
Number of milliseconds to wait before starting marquee when
marqueeOnis'hover'or'focus'or before restarting any marquee.Default: 1000Disables all marquee behavior and removes supporting markup.
Determines what triggers the marquee to start its animation.
Default: 'focus'Number of milliseconds to wait before starting marquee the first time.
Has no effect if
marqueeOnis not'render'Default: 1000Number of milliseconds to wait before resetting the marquee position after it finishes.
A minimum of 40 milliseconds is enforced.
Default: 1000Amount of spacing between the instances of the content when animating.
May either be a number indicating the number of pixels or a string indicating the percentage relative to the width of the component.
Note: When using a number, the value should be based on 1920x1080 display and will be scaled automatically for the current resolution using ui/resolution.
Default: '50%'Rate of marquee measured in pixels/second.
Default: 60Indicates the text directionality of the current locale is right-to-left