<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p164801809111"><aname="p164801809111"></a><aname="p164801809111"></a>Maximum length of each scroll.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p164801031110"><aname="p164801031110"></a><aname="p164801031110"></a>Number of rolling times. If this parameter is not set, the default value <strongid="b94021459245"><aname="b94021459245"></a><aname="b94021459245"></a>-1</strong> is used. When the value is less than or equal to <strongid="b415127958"><aname="b415127958"></a><aname="b415127958"></a>0</strong>, the marquee scrolls continuously.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p64801707115"><aname="p64801707115"></a><aname="p64801707115"></a>Direction in which the marquee scrolls, which can be <strongid="b13301427193515"><aname="b13301427193515"></a><aname="b13301427193515"></a>left</strong> or <strongid="b970462943510"><aname="b970462943510"></a><aname="b970462943510"></a>right</strong>.</p>
</td>
</tr>
</tbody>
</table>
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
## Styles<a name="section14898114221220"></a>
| Name | Type | Default Value | Mandatory | Description |
| scrollamount | number | 6 | No | Maximum length of each scroll. |
| loop | number | -1 | No | Number of rolling times. If this parameter is not set, the default value **-1** is used. When the value is less than or equal to **0**, the marquee scrolls continuously.|
| direction | string | left | No | Direction in which the marquee scrolls, which can be **left** or **right**. |
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p15973251294"><aname="p15973251294"></a><aname="p15973251294"></a>Font color of the scrolling text.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p8597132516911"><aname="p8597132516911"></a><aname="p8597132516911"></a>Font size of the scrolling text. </p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p7598192511919"><aname="p7598192511919"></a><aname="p7598192511919"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note185981525290"><aname="note185981525290"></a><aname="note185981525290"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1259842517919"><aname="p1259842517919"></a><aname="p1259842517919"></a>If the <strongid="b1536242895218"><aname="b1536242895218"></a><aname="b1536242895218"></a>config-changes</strong> tag of <strongid="b6367152819525"><aname="b6367152819525"></a><aname="b6367152819525"></a>fontSize</strong> is configured for abilities in the <strongid="b2367228115217"><aname="b2367228115217"></a><aname="b2367228115217"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p75985251598"><aname="p75985251598"></a><aname="p75985251598"></a>Font weight of the scrolling text. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b19548144111381"><aname="b19548144111381"></a><aname="b19548144111381"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1459972510914"><aname="p1459972510914"></a><aname="p1459972510914"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text. </p>
</td>
</tr>
</tbody>
</table>
## Styles
## Events<a name="section3892191911214"></a>
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
| Name | Type | Default Value | Mandatory | Description |
| color | <color> | \#e5000000 | No | Font color of the scrolling text. |
| font-size | <length> | 37.5 | No | Font size of the scrolling text. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| font-weight | number \| string | normal | No | Font weight of the scrolling text. For details, see **font-weight** of the **[\<text> component](../arkui-js/js-components-basic-text.md#styles)**.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p65581539160"><aname="p65581539160"></a><aname="p65581539160"></a>Triggered when the marquee scrolls to the end.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p18558125361620"><aname="p18558125361620"></a><aname="p18558125361620"></a>Triggered when the marquee finishes the specified number of scrollings (value of the <strongid="b1030012198368"><aname="b1030012198368"></a><aname="b1030012198368"></a>loop</strong> attribute). It can be triggered only when the <strongid="b15990247163611"><aname="b15990247163611"></a><aname="b15990247163611"></a>loop</strong> attribute is set to a number greater than 0.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1955817532168"><aname="p1955817532168"></a><aname="p1955817532168"></a>Triggered when the marquee starts to scroll.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section47669296127"></a>
## Events
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| bounce(Rich) | - | Triggered when the marquee scrolls to the end. |
| finish(Rich) | - | Triggered when the marquee finishes the specified number of scrollings (value of the **loop** attribute). It can be triggered only when the **loop** attribute is set to a number greater than 0.|
| start(Rich) | - | Triggered when the marquee starts to scroll. |
## Example Code<a name="section198211501414"></a>
## Methods
```
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Marquee>** component is used to display a scrolling piece of text.
The **\<Marquee>** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component.
| loop | number | No | -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously. |
| fromStart | boolean | No | true | Whether the text scrolls from the start. |
| loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.|
| fromStart | boolean | No| true | Whether the text scrolls from the start.|
| src | string | Yes| - | Text to scroll.|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onStart(callback: () => void) | Triggered when the marquee starts scrolling. |
| onBounce(callback: () => void) | Triggered when the marquee has reached the end. |
| onFinish(callback: () => void) | Triggered when the marquee has finished scrolling. |
| onStart(callback: () => void) | Triggered when the marquee starts scrolling.|
| onBounce(callback: () => void) | Triggered when the marquee has reached the end.|
| onFinish(callback: () => void) | Triggered when the marquee has finished scrolling.|
