The Scrolling Label component allows you to (automatically) scroll a long text within a set width.
If you want to use the Scrolling Label component, import it from Lightning UI.
import { ScrollingLabel } from '@lightningjs/ui'
To use the Scrolling Label component you create an instance with the type
ScrollingLabel:
class MyApp extends Lightning.Application {
static _template() {
return {
MyScrollingLabel: {
type: ScrollingLabel,
label: 'This bit of text is waaaaaaaaaaaaaaaaaay toooooo long...',
w: 400
},
}
}
}
This code sample should display a piece of text on the screen that automatically starts scrolling.
If you want you're Scrolling Label component to not automatically start scrolling use the following:
MyScrollingLabel: {
type: ScrollingLabel,
label: 'This bit of text is waaaaaaaaaaaaaaaaaay toooooo long...',
w: 400,
autoStart: false
}
You can start and stop the Scrolling animation by using the start
and stop
function, for example when focusing or unfocusing a item.
_focus() {
this.tag('MyScrollingLabel').start();
}
_unfocus() {
this.tag('MyScrollingLabel').stop();
}
Starts the scrolling animation.
Stops the scrolling animation.
Sets the text for the ScrollingLabel. Generally the input is a string
, you can however also feed it a text object
commonly used in Lightning to alter the styling of the label.
This sets the label's alignment when the label's render width is smaller than the width of ScrollingLabel component. Expected input is either left
, center
, or right
.
This sets the amount of repeats for the scroll animation. Expected input is an integer
. Default value for repeat is -1 which is infinite.
This sets the delay before the scroll animation starts playing. Expected input is a float
in seconds.
This sets the duration for the animation. If there is no duration specified the component wil automatically generate a duration for the scroll animation. Expected input is a float
in seconds.
With this setter you can add more transition settings commonly used for Lightning animations. The values of repeat, delay, and duration are also stored here. Expected input is an object
.
Return the label tag
.
Returns the current alignment.
Returns the amount of animation repeats.
Returns the delay before the scroll animation starts.
Returns the duration of the current scroll animation.
Returns the current animation settings.