1# Marquee 2 3The **\<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. 4 5 6> **NOTE** 7> 8> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 9 10 11## Child Components 12 13Not supported 14 15 16## APIs 17 18Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) 19 20Since API version 9, this API is supported in ArkTS widgets. 21 22**Parameters** 23 24| Name| Type| Mandatory| Description| 25| -------- | -------- | -------- | -------- | 26| start | boolean | Yes| Whether to start scrolling.| 27| step | number | No| Scrolling step.<br>Default value: **6**, in vp| 28| loop | number | No| Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.<br>Default value: **-1**<br>**NOTE**<br>Regardless of the value, the marquee scrolls only once on an ArkTS widget.| 29| fromStart | boolean | No| Whether the text scrolls from the start.<br>Default value: **true**| 30| src | string | Yes| Text to scroll.| 31 32## Attributes 33In addition to the universal text attributes **fontColor**, **fontSize**, **fontWeight**, and **fontFamily**, the following attributes are supported. 34| Name | Type| Description | 35| ---------- | -------- | ------------------------------------------------------------ | 36| allowScale | boolean | Whether to allow text to scale.<br>This attribute is not supported currently.<br>Default value: **false** | 37 38## Events 39 40| Name| Description| 41| -------- | -------- | 42| onStart(event: () => void) | Triggered when the marquee starts scrolling.<br>Since API version 9, this API is supported in ArkTS widgets.| 43| onBounce(event: () => void) | Triggered when the marquee has reached the end. This event will be triggered for multiple times if the **loop** attribute is not set to **1**.<br>Since API version 9, this API is supported in ArkTS widgets.| 44| onFinish(event: () => void) | Triggered when the marquee has finished the number of scrolling times set by the **loop** attribute.<br>Since API version 9, this API is supported in ArkTS widgets.| 45 46 47## Example 48 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct MarqueeExample { 55 @State start: boolean = false 56 private fromStart: boolean = true 57 private step: number = 50 58 private loop: number = Infinity 59 private src: string = "Running Marquee starts rolling" 60 61 build() { 62 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 63 Marquee({ 64 start: this.start, 65 step: this.step, 66 loop: this.loop, 67 fromStart: this.fromStart, 68 src: this.src 69 }) 70 .width(360) 71 .height(80) 72 .fontColor('#FFFFFF') 73 .fontSize(48) 74 .fontWeight(700) 75 .backgroundColor('#182431') 76 .margin({ bottom: 40 }) 77 .onStart(() => { 78 console.info('Marquee animation complete onStart') 79 }) 80 .onBounce(() => { 81 console.info('Marquee animation complete onBounce') 82 }) 83 .onFinish(() => { 84 console.info('Marquee animation complete onFinish') 85 }) 86 Button('Start') 87 .onClick(() => { 88 this.start = true 89 }) 90 .width(120) 91 .height(40) 92 .fontSize(16) 93 .fontWeight(500) 94 .backgroundColor('#007DFF') 95 } 96 .width('100%') 97 .height('100%') 98 } 99} 100``` 101 102 103
