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

!20847 翻译完成 20372+20727+20349+19819+20137+20173:slider组件+loadingProgress组件等

Merge pull request !20847 from ester.zhou/TR-20372
...@@ -509,6 +509,7 @@ This API is supported in ArkTS widgets. ...@@ -509,6 +509,7 @@ This API is supported in ArkTS widgets.
| BACKGROUND_REGULAR | Material that creates a medium shallow depth of field effect. | | BACKGROUND_REGULAR | Material that creates a medium shallow depth of field effect. |
| BACKGROUND_THICK | Material that creates a high shallow depth of field effect. | | BACKGROUND_THICK | Material that creates a high shallow depth of field effect. |
| BACKGROUND_ULTRA_THICK | Material that creates the maximum depth of field effect. | | BACKGROUND_ULTRA_THICK | Material that creates the maximum depth of field effect. |
| NONE<sup>10+</sup> | No blur. |
## ThemeColorMode<sup>10+</sup> ## ThemeColorMode<sup>10+</sup>
...@@ -564,3 +565,23 @@ This API is supported in ArkTS widgets. ...@@ -564,3 +565,23 @@ This API is supported in ArkTS widgets.
| ------- | ------------------------------------------------------------ | | ------- | ------------------------------------------------------------ |
| DEFAULT | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text.| | DEFAULT | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text.|
| INLINE | Inline input style. The background height of the selected text is the same as the height of the text box. | | INLINE | Inline input style. The background height of the selected text is the same as the height of the text box. |
## ImageSmoothingQuality<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| low | Low quality.|
| medium | Medium quality.|
| high | High quality.|
## CanvasDirection<sup>8+</sup>
Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | -------------- |
| inherit | The text direction is inherited from the **\<Canvas>** component.|
| ltr | The text direction is from left to right.|
| rtl | The text direction is from right to left.|
...@@ -24,7 +24,8 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -24,7 +24,8 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\<LoadingProgress>** component.<br>Since API version 9, this API is supported in ArkTS widgets.| | color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\<LoadingProgress>** component.<br>Default value: **'#99666666'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| enableLoading<sup>10+</sup> | boolean | Whether to show the loading animation.<br>Default value: **true**<br>**NOTE**<br> The component still takes up space in the layout when the loading animation is not shown.<br>While the universal attribute **Visibility.Hidden** hides the entire component, including borders and paddings, **enableLoading=false** hides the loading animation only.|
## Example ## Example
......
...@@ -79,7 +79,7 @@ Enumerates the types of the slider in the block direction. ...@@ -79,7 +79,7 @@ Enumerates the types of the slider in the block direction.
## Events ## Events
In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported. In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported.
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
...@@ -96,9 +96,10 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -96,9 +96,10 @@ Since API version 9, this API is supported in ArkTS widgets.
| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.| | End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.|
| Click | 3 | The user moves the slider by touching the slider track.| | Click | 3 | The user moves the slider by touching the slider track.|
## Example ## Example
### Example 1
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -253,3 +254,52 @@ struct SliderExample { ...@@ -253,3 +254,52 @@ struct SliderExample {
``` ```
![en-us_image_0000001179613854](figures/en-us_image_0000001179613854.gif) ![en-us_image_0000001179613854](figures/en-us_image_0000001179613854.gif)
### Example 2
```ts
@Entry
@Component
struct SliderExample {
@State tipsValue: number = 40
build() {
Column({ space: 8 }) {
Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
Slider({ style: SliderStyle.OutSet, value: 40 })
.blockSize({ width: 40, height: 40 })
.blockBorderColor(Color.Red)
.blockBorderWidth(5)
Divider()
Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
Slider({ style: SliderStyle.InSet, value: 40, step: 10 })
.showSteps(true)
.stepSize(8)
.stepColor(Color.Yellow)
Divider()
Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
Slider({ style: SliderStyle.InSet, value: 40 })
.trackBorderRadius(2)
Divider()
Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
Slider({ style: SliderStyle.OutSet, value: 40 })
.blockStyle({ type: SliderBlockType.DEFAULT })
Slider({ style: SliderStyle.OutSet, value: 40 })
.blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') })
Slider({ style: SliderStyle.OutSet, value: 40 })
.blockSize({ width: '60px', height: '60px' })
.blockColor(Color.Red)
.blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M30 30 L15 56 L45 56 Z' }) })
Divider()
Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
Slider({ style: SliderStyle.InSet, value: this.tipsValue })
.showTips(true, 'value:' + this.tipsValue.toFixed())
.onChange(value => {
this.tipsValue = value
})
}
}
}
```
![](figures/slider_2.png)
...@@ -24,10 +24,10 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut ...@@ -24,10 +24,10 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**| | alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**|
| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position. | | offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position. |
| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp.| | customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp.|
| gridCount<sup>8+</sup> | number | No | Number of [grid columns](../../ui/arkts-layout-development-grid-layout.md) occupied by the dialog box.<br>The default value is 4, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.| | gridCount<sup>8+</sup> | number | No | Number of [grid columns](../../ui/arkts-layout-development-grid-layout.md) occupied by the dialog box.<br>The default value is subject to the window size, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.|
| maskColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.<br>Default value: **0x33000000** | | maskColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.<br>Default value: **0x33000000** |
| openAnimation<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.<br>**NOTE**<br>If **iterations** is set to an odd number and **playMode** is set to **Reverse**, the dialog box will not be displayed when the animation ends.| | openAnimation<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.<br>**NOTE**<br>**iterations**: The default value is **1**, indicating that the animation is played once; any other value evaluates to the default value.<br>**playMode**: The default value is **PlayMode.Normal**; any other value evaluates to the default value.|
| closeAniamtion<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box. | | closeAniamtion<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box.<br>**NOTE**<br>**iterations**: The default value is **1**, indicating that the animation is played once; any other value evaluates to the default value.<br>**playMode**: The default value is **PlayMode.Normal**; any other value evaluates to the default value. |
| showInSubWindow<sup>10+</sup> | boolean | No | Whether to display a dialog box in a subwindow.<br>Default value: **false**, indicating that the dialog box is not displayed in the subwindow<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.| | showInSubWindow<sup>10+</sup> | boolean | No | Whether to display a dialog box in a subwindow.<br>Default value: **false**, indicating that the dialog box is not displayed in the subwindow<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.|
## CustomDialogController ## CustomDialogController
...@@ -45,7 +45,7 @@ dialogController : CustomDialogController = new CustomDialogController(value:{bu ...@@ -45,7 +45,7 @@ dialogController : CustomDialogController = new CustomDialogController(value:{bu
open(): void open(): void
Opens the content of the custom dialog box. If the content has been displayed, this API does not take effect. Opens the content of the custom dialog box. This API can be called multiple times. If the dialog box displayed in a subwindow, no new subwindow is allowed.
### close ### close
...@@ -64,6 +64,7 @@ struct CustomDialogExample { ...@@ -64,6 +64,7 @@ struct CustomDialogExample {
@Link textValue: string @Link textValue: string
@Link inputValue: string @Link inputValue: string
controller: CustomDialogController controller: CustomDialogController
// You can pass in multiple other controllers in the CustomDialog to open one or more other CustomDialogs in the CustomDialog. In this case, you must place the controller pointing to the self at the end.
cancel: () => void cancel: () => void
confirm: () => void confirm: () => void
...@@ -89,6 +90,7 @@ struct CustomDialogExample { ...@@ -89,6 +90,7 @@ struct CustomDialogExample {
}).backgroundColor(0xffffff).fontColor(Color.Red) }).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 }) }.margin({ bottom: 10 })
} }
// The default value of borderRadius is 24vp. The border attribute must be used together with the borderRadius attribute.
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册