未验证 提交 7b0ee367 编写于 作者: O openharmony_ci 提交者: Gitee

!6881 翻译完成 5718:border新增说明,border绘制在内容之后

Merge pull request !6881 from ester.zhou/TR-5718
# Marquee # Marquee
> **NOTE**<br> > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. >
> 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.
## Required Permissions ## Required Permissions
...@@ -15,7 +16,7 @@ None ...@@ -15,7 +16,7 @@ None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
...@@ -23,28 +24,29 @@ None ...@@ -23,28 +24,29 @@ None
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| start | boolean | Yes | - | Whether to start scrolling. | | start | boolean | Yes| - | Whether to start scrolling.|
| step | number | No | 6 | Scrolling step. | | 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. | | 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. | | fromStart | boolean | No| true | Whether the text scrolls from the start.|
| src | string | Yes | - | Text to scroll. | | src | string | Yes| - | Text to scroll.|
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling. | | onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling.|
| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end. | | onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end.|
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling. | | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.|
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MarqueeExample { struct MarqueeExample {
...@@ -63,6 +65,7 @@ struct MarqueeExample { ...@@ -63,6 +65,7 @@ struct MarqueeExample {
fromStart: this.fromStart, fromStart: this.fromStart,
src: this.src src: this.src
}) })
.width(400)
.fontColor(Color.White) .fontColor(Color.White)
.fontSize(50) .fontSize(50)
.allowScale(false) .allowScale(false)
......
# Border # Border
You can set border styles for components.
> **NOTE** > **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 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. > 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 ## Required Permissions
None None
## Attributes ## Attributes
...@@ -27,11 +31,25 @@ None ...@@ -27,11 +31,25 @@ None
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| width | [Length](../../ui/ts-types.md) | 0 | No| Border width.| | width | [Length](../../ui/ts-types.md) | 0 | No| Border width.|
| color | [ResourceColor](../../ui/ts-types.md) | 'Black' | No| Border color.| | 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)\| EdgeRadiuses<sup>9+</sup> | 0 | No| Border radius.|
| style | BorderStyle | BorderStyle.Solid | No| Border style.| | style | BorderStyle | BorderStyle.Solid | No| Border style.|
- EdgeRadiuses<sup>9+</sup>
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 - BorderStyle enums
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| Dotted | Dotted border. The radius of a dot is half of **borderWidth**.| | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
...@@ -52,6 +70,10 @@ struct BorderExample { ...@@ -52,6 +70,10 @@ struct BorderExample {
Text('dashed') Text('dashed')
.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16) .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 // Dotted border
Text('dotted') Text('dotted')
.border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册