diff --git a/en/application-dev/reference/arkui-js/js-components-basic-marquee.md b/en/application-dev/reference/arkui-js/js-components-basic-marquee.md index 6f8ba597ae293c90835bc5d867ebcb91eaa733ab..9f13895436ce5f1104994f9d6956deba5e04a928 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-marquee.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-marquee.md @@ -1,215 +1,69 @@ -# marquee +# marquee -The **** component displays single-line scrolling text. +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. +> Since API version 6, the text scrolls only when its width exceeds the width of the **\** component. -## Required Permissions +The **\** component is used to display a scrolling piece of text. + +## Required Permissions None -## Child Component + +## Child Components Not supported -## Attributes -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. +## Attributes - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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 [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. -## Styles +| 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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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.

-
NOTE:

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.

-

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 that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text.

-
+## Styles -## Events +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.
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 **[\ 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.| - - - - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

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.

-
-## Methods +## 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. - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

start

-

-

-

Starts scrolling.

-

stop

-

-

-

Stops scrolling.

-
+| Name | Parameter | Description | +| ------------ | ---- | ---------------------------------------- | +| 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 +## Methods -``` +In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. + +| Name | Parameter | Description | +| ----- | ---- | ----- | +| start | - | Starts scrolling.| +| stop | - | Stops scrolling.| + + +## Example + +```html
``` -``` +```css /* xxx.css */ .container { flex-direction: column; @@ -252,7 +106,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods. } ``` -``` +```js // xxx.js export default { data: { @@ -279,5 +133,4 @@ export default { } ``` -![](figures/lite_bar.gif) - +![lite_bar](figures/lite_bar.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md index 757050181d0b2828e0dc806b3f06d170c554ef74..dc89934a2760b1c67f84ca216530d0c3a58752e9 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md @@ -1,11 +1,12 @@ # Marquee -> **NOTE**
-> 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 **\** component is used to display a scrolling piece of text. +The **\** component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\** component. ## Required Permissions @@ -15,7 +16,7 @@ None ## Child Components -None +Not supported ## APIs @@ -23,28 +24,29 @@ None Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | start | boolean | Yes | - | Whether to start scrolling. | - | step | number | No | 6 | Scrolling step. | - | 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. | + | start | boolean | Yes| - | Whether to start scrolling.| + | step | number | No| 6 | Scrolling step.| + | 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.| ## Example -``` +```ts +// xxx.ets @Entry @Component struct MarqueeExample { @@ -63,6 +65,7 @@ struct MarqueeExample { fromStart: this.fromStart, src: this.src }) + .width(400) .fontColor(Color.White) .fontSize(50) .allowScale(false) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index f530a14d3a73a1fbd35503c2b6198bb48b77543f..f37f499e123b4b282ed24136951cece34446b314 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -1,16 +1,20 @@ # Border -You can set border styles for components. > **NOTE** > > The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > > The border of a component is displayed above the content of its child components since API version 9. + +You can set border styles for components. + + ## Required Permissions None + ## Attributes @@ -27,11 +31,25 @@ None | -------- | -------- | -------- | -------- | -------- | | width | [Length](../../ui/ts-types.md) | 0 | No| Border width.| | color | [ResourceColor](../../ui/ts-types.md) | 'Black' | No| Border color.| - | radius | [Length](../../ui/ts-types.md) | 0 | No| Border radius.| + | radius | [Length](../../ui/ts-types.md)\| EdgeRadiuses9+ | 0 | No| Border radius.| | style | BorderStyle | BorderStyle.Solid | No| Border style.| +- EdgeRadiuses9+ + + To reference this object, at least one parameter must be passed. + + | Name | Type| Mandatory| Default Value| Description | + | ----------- | -------- | ---- | ------ | ---------------- | + | topLeft | length | No | 0 | Radius of the upper-left rounded corner.| + | topRight | length | No | 0 | Radius of the upper-right rounded corner.| + | bottomLeft | length | No | 0 | Radius of the lower-left rounded corner.| + | bottomRight | length | No | 0 | Radius of the lower-right rounded corner.| + + + - BorderStyle enums + | Name| Description| | -------- | -------- | | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.| @@ -52,6 +70,10 @@ struct BorderExample { Text('dashed') .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) + Text('dashed') + .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE) + .borderRadius({ topLeft: 10, topRight: 20, bottomLeft: 30, bottomRight: 60 }) + .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) // Dotted border Text('dotted') .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })