ui/Marquee

A component that will marquee its overflowing contents.

Import Usage

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

Members

Marquee   Component

A minimally-styled marquee component.

Import Usage

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

Extends: ui/Marqueeui/Marquee.MarqueeBase
Wrapped with: ui/Marqueeui/Marquee.MarqueeDecorator

MarqueeBase   Component

Marquees the children of the component.

For automated marquee calculations use ui/Marqueeui/Marquee.Marquee.

Import Usage

import {MarqueeBase} from '@enact/ui/Marquee';

Properties

alignment

String

Text alignment value of the marquee

Valid values are:

• 'left',

• 'right', and

• 'center'

---

animating

Boolean

Applies animating styles such as removing the ellipsis.

---

aria-label

String

Sets the value of the aria-label attribute for the wrapped component.

---

children

Node

The text or a set of components that should be marqueed

This prop may be empty in some cases, which is OK.

---

clientRef

ObjectFunction

Called when mounting or unmounting with a reference to the client node

---

css

Object

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 class

• animate - Applied to the inner content node when the text is animating

• spacing - The spacing node used between the repeated content

• text - The inner content node

• willAnimate - Applied to the inner content node shortly before animation

---

distance

Number

Distance to animate the marquee

Usually, the distance is the width of the text minus the width of the container

---

onMarqueeComplete

Function

Called when the marquee completes its animation

---

overflow

'clip''ellipsis'

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

---

rtl

Boolean

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

Default: false

---

spacing

Number

Amount of spacing, in pixels, between the instances of the content

Default: 0

---

speed

Number

Speed of marquee animation in pixels/second.

---

willAnimate

Boolean

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

MarqueeController   Higher-Order Component

A higher-order component that synchronizes contained Marquees.

Import Usage

import {MarqueeController} from '@enact/ui/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 when sibling components are focused.

Default: false

MarqueeDecorator   Higher-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 Usage

import {MarqueeDecorator} from '@enact/ui/Marquee';

Configuration

blur

String

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

Default: 'onBlur'

---

component

Component

The base marquee component wrapping the content.

Default: ui/Marquee.Marquee

---

css

Object

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 class

• animate - Applied to the inner content node when the text is animating

• spacing - The spacing node used between the repeated content

• text - The inner content node

• willAnimate - Applied to the inner content node shortly before animation

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(String)

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'

---

marqueeDirection

Function

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

alignment

String

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

---

children

Node

Children to be marqueed

---

disabled

Boolean

Passed through to the wrapped component.

Does not affect Marquee behavior except that components that are marqueeOn="focus" will be treated as if they were marqueeOn="hover", to allow disabled (and thus, unfocusable) components to marquee.

---

forceDirection

String

Forces the direction of 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/utili18n/util.isRtlText.

If 'locale', the direction is determined by the locale, same as ui/Marqueeui/Marquee.MarqueeDecorator.rtl. In other words, it will not consider the text content for determining the direction.

---

locale

String

The current locale as a https://toolshttps://tools.ietf.org/html/rfc5646.

---

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

'focus''hover''render'

Determines what triggers the marquee to start its animation.

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

---

marqueeSpacing

StringNumber

Amount 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/resolutionui/resolution.

Default: '50%'

---

marqueeSpeed

Number

Rate of marquee measured in pixels/second.

Default: 60

---

rtl

String

Indicates the text directionality of the current locale is right-to-left