1# marquee 2 3The **\<marquee>** component is used to display a scrolling piece of text. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name| Type| Default Value| Mandatory| Description| 18| -------- | -------- | -------- | -------- | -------- | 19| scrollamount | number | 6 | No| Maximum length of each scroll.| 20| id | string | - | No| Unique ID of the component.| 21| style | string | - | No| Style declaration of the component.| 22| class | string | - | No| Style class of the component, which is used to refer to a style table.| 23| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| 24 25 26## Events 27 28| Name| Parameter| Description| 29| -------- | -------- | -------- | 30| click | - | Triggered when the component is clicked. | 31| longpress | - | Triggered when the component is long pressed. | 32| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component. | 33 34 35## Styles 36 37| Name| Type| Default Value| Mandatory| Description| 38| -------- | -------- | -------- | -------- | -------- | 39| color | <color> | \#ffffff<br><br><br>| No| Font color of the scrolling text.| 40| font-size | <length> | <br>30 | No| Font size of the scrolling text.| 41| font-family | string | <br><br>SourceHanSansSC-Regular | No| <br><br>Font. Only the **SourceHanSansSC-Regular** font is supported.| 42| width | <length> \| <percentage><sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.| 43| height | <length> \| <percentage><sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.| 44| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 45| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 46| margin | <length> \| <percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 47| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 48| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 49| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 50| border-radius | <length> | - | No| Radius of round-corner borders.| 51| background-color | <color> | - | No| Background color.| 52| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| 53| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 54| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 55 56## Example 57 58```html 59<!-- xxx.hml --> 60<div class="container"> 61 <marquee class="customMarquee" scrollamount="{{scrollAmount}}">{{marqueeCustomData}}</marquee> 62 <text class="text" onclick="addSpeed">speed+</text> 63 <text class="text" onclick="downSpeed">speed-</text> 64 <text class="text" onclick="changeData">changeData</text> 65</div> 66``` 67 68```css 69/* xxx.css */ 70.container { 71 flex-direction: column; 72 width: 100%; 73 height: 100%; 74 flex-direction: column; 75 align-items: center; 76} 77.customMarquee { 78 width: 50%; 79 height: 80px; 80 padding: 10px; 81 margin: 20px; 82 border-width: 4px; 83 border-color: #ffffff; 84 border-radius: 20px; 85 font-size: 38px; 86} 87.text { 88 font-size: 30px; 89 text-align: center; 90 width: 30%; 91 height: 10%; 92 margin-top: 5%; 93 background-color: #f2f2f2; 94 border-radius: 40px; 95 color: #0d81f2; 96} 97``` 98 99```javascript 100// xxx.js 101export default { 102 data: { 103 scrollAmount: 30, 104 marqueeCustomData: 'Custom marquee Custom marquee Custom marquee' 105 }, 106 addSpeed() { 107 this.scrollAmount++; 108 }, 109 downSpeed() { 110 this.scrollAmount--; 111 }, 112 changeData() { 113 this.marqueeCustomData = 'Change Data Change Data Change Data'; 114 } 115} 116``` 117 118 119
