diff --git a/en/application-dev/reference/arkui-ts/figures/slider_2.png b/en/application-dev/reference/arkui-ts/figures/slider_2.png new file mode 100644 index 0000000000000000000000000000000000000000..2e2ae097236ec779751fc65d9e7bf39992c09281 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/slider_2.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md index 0753b4ab4dc8028e3747f8905b1032f2a099bcfc..db5774afd9e4cda3a3e620f718619d2f2aa547cb 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -509,6 +509,7 @@ This API is supported in ArkTS widgets. | 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_ULTRA_THICK | Material that creates the maximum depth of field effect. | +| NONE10+ | No blur. | ## ThemeColorMode10+ @@ -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.| | INLINE | Inline input style. The background height of the selected text is the same as the height of the text box. | + +## ImageSmoothingQuality8+ + +Since API version 9, this API is supported in ArkTS widgets. + +| Name | Description | +| -------- | -------------- | +| low | Low quality.| +| medium | Medium quality.| +| high | High quality.| + +## CanvasDirection8+ + +Since API version 9, this API is supported in ArkTS widgets. + +| Name | Description | +| -------- | -------------- | +| inherit | The text direction is inherited from the **\** component.| +| ltr | The text direction is from left to right.| +| rtl | The text direction is from right to left.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index 369a17a005daa7bbf1951ed25aea0ff635606df0..d2861f650f3ede62450d477ee1904b0e29e17cf2 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -24,7 +24,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Description| | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\** component.
Since API version 9, this API is supported in ArkTS widgets.| +| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\** component.
Default value: **'#99666666'**
Since API version 9, this API is supported in ArkTS widgets.| +| enableLoading10+ | boolean | Whether to show the loading animation.
Default value: **true**
**NOTE**
The component still takes up space in the layout when the loading animation is not shown.
While the universal attribute **Visibility.Hidden** hides the entire component, including borders and paddings, **enableLoading=false** hides the loading animation only.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md index cab18d856b6dc0e86a5d49b75b7bb56afc7b7ca7..5939f8899543cdb715d6f758821af47c6ea022f7 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -79,7 +79,7 @@ Enumerates the types of the slider in the block direction. ## 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| | -------- | -------- | @@ -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.| | Click | 3 | The user moves the slider by touching the slider track.| - ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -253,3 +254,52 @@ struct SliderExample { ``` ![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) diff --git a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index 8605a29ab1e390a0e5fea2ca77f0b5d337172783..8e0313f27220c5220f4e21d3bd33d176e06c94d3 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -24,10 +24,10 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut | alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| | 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.
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.| -| gridCount8+ | number | No | Number of [grid columns](../../ui/arkts-layout-development-grid-layout.md) occupied by the dialog box.
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.| +| gridCount8+ | number | No | Number of [grid columns](../../ui/arkts-layout-development-grid-layout.md) occupied by the dialog box.
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.| | maskColor10+ | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.
Default value: **0x33000000** | -| openAnimation10+ | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.
**NOTE**
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.| -| closeAniamtion10+ | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box. | +| openAnimation10+ | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.
**NOTE**
**iterations**: The default value is **1**, indicating that the animation is played once; any other value evaluates to the default value.
**playMode**: The default value is **PlayMode.Normal**; any other value evaluates to the default value.| +| closeAniamtion10+ | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box.
**NOTE**
**iterations**: The default value is **1**, indicating that the animation is played once; any other value evaluates to the default value.
**playMode**: The default value is **PlayMode.Normal**; any other value evaluates to the default value. | | showInSubWindow10+ | boolean | No | Whether to display a dialog box in a subwindow.
Default value: **false**, indicating that the dialog box is not displayed in the subwindow
**NOTE**
A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.| ## CustomDialogController @@ -45,7 +45,7 @@ dialogController : CustomDialogController = new CustomDialogController(value:{bu 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 @@ -64,6 +64,7 @@ struct CustomDialogExample { @Link textValue: string @Link inputValue: string 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 confirm: () => void @@ -89,6 +90,7 @@ struct CustomDialogExample { }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) } + // The default value of borderRadius is 24vp. The border attribute must be used together with the borderRadius attribute. } }