diff --git a/en/application-dev/quick-start/arkts-extend.md b/en/application-dev/quick-start/arkts-extend.md index fba84d8154592ba5c61b2106ab130b4ff92991ce..321ccf5a93aec3e5acd154fe4e8db164e4b02a26 100644 --- a/en/application-dev/quick-start/arkts-extend.md +++ b/en/application-dev/quick-start/arkts-extend.md @@ -5,6 +5,7 @@ Apart from\@Styles used to extend styles, AkrUI also provides \@Extend, which al > **NOTE** +> > Since API version 9, this decorator is supported in ArkTS widgets. @@ -169,7 +170,7 @@ struct FancyUse { Text(`${this.label}`) .fancyText(200, Color.Pink) Text(`${this.label}`) - .fancyText(200, Color.Orange) + .fancyText(300, Color.Orange) }.margin('20%') } } diff --git a/en/application-dev/quick-start/arkts-localstorage.md b/en/application-dev/quick-start/arkts-localstorage.md index 3c3e4853f8aac66be1afc1ef47d295ecc7528830..6be9a62d0c84043783c75d29e4af3e7d252829c0 100644 --- a/en/application-dev/quick-start/arkts-localstorage.md +++ b/en/application-dev/quick-start/arkts-localstorage.md @@ -9,7 +9,7 @@ This topic describes only the LocalStorage application scenarios and related dec > **NOTE** > -> This module is supported since API version 9. +> LocalStorage is supported since API version 9. ## Overview diff --git a/en/application-dev/reference/arkui-ts/figures/swiper-digit.gif b/en/application-dev/reference/arkui-ts/figures/swiper-digit.gif new file mode 100644 index 0000000000000000000000000000000000000000..2873aa12e2e64ac904f88aef7fa8a48dd70fcd4d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/swiper-digit.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/swiper-dot.gif b/en/application-dev/reference/arkui-ts/figures/swiper-dot.gif new file mode 100644 index 0000000000000000000000000000000000000000..159d58f9ee979616b60352da34f483010a1ea386 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/swiper-dot.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/swiper.gif b/en/application-dev/reference/arkui-ts/figures/swiper.gif index 692ac1398e1c98217a7466c66b1a3b873165a7ee..bd38d6a7e3283c15269079284432bbace9f20df5 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/swiper.gif and b/en/application-dev/reference/arkui-ts/figures/swiper.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md index 0136146723cecb5883d6300b006450922d7f2b00..e9667470ccce848f8e67856851b4eaef9100ca1a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md @@ -24,7 +24,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | -------- | ------------------------- | ---------------------------------------------------------------- | -| fontSizedeprecated | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.
This API is deprecated since API version 10. You are advised to use **font** instead.| +| fontSize(deprecated) | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.
This API is deprecated since API version 10. You are advised to use **font** instead.| | font10+ | [Font](ts-types.md#font) | Font style of the menu text.| | fontColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu text.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index 72b9bb67da9e44ca5298039151dbe5b929ce408d..1ba4a1e5a8798b90e59da638404cfbdcaae94e22 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -35,19 +35,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | ----------------------------- | ---------------------------------------- | ---------------------------------------- | | title | [ResourceStr](ts-types.md#resourcestr)10+ \| [CustomBuilder](ts-types.md#custombuilder8)8+ \| [NavigationCommonTitle](#navigationcommontitle)9+ \| [NavigationCustomTitle](#navigationcustomtitle)9+ | Page title.
**NOTE**
When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.
When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).| -| subTitledeprecated | string | Subtitle of the page. If this attribute is not set, no subtitle is displayed. This attribute is deprecated since API version 9. You are advised to use **title** instead.| +| subTitle(deprecated) | string | Subtitle of the page. If this attribute is not set, no subtitle is displayed. This attribute is deprecated since API version 9. You are advised to use **title** instead.| | menus | Array<[NavigationMenuItem](#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Menu items in the upper right corner of the page. If this parameter is not set, no menu item is displayed. When the value type is Array\<[NavigationMenuItem](#navigationmenuitem)>, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, plus excess icons (if any) under the automatically generated **More** icon.| | titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.
Default value: **NavigationTitleMode.Free**| | toolBar | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Content of the toolbar. If this attribute is not set, no toolbar is displayed.
**items**: items on the toolbar.
**NOTE**
Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area. If the text is too long, it is scaled down level by level, wrapped in two lines, and then clipped with an ellipsis (...).| | hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Display the toolbar.| | hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false**
**true**: Hide the title bar.
**false**: Display the title bar.| -| hideBackButton | boolean | Whether to hide the back button.
Default value: **false**
**true**: Hide the back button.
**false**: Display the back button.
The back button in the title bar of the **\** component cannot be hidden.
**NOTE**
The back button is available only when **titleMode** is set to **NavigationTitleMode.Mini**.| +| hideBackButton | boolean | Whether to hide the back button.
Default value: **false**
**true**: Hide the back button.
**false**: Display the back button.
The back button in the title bar of the **\** component cannot be hidden.
**NOTE**
The back button works only when **titleMode** is set to **NavigationTitleMode.Mini**.| | navBarWidth9+ | [Length](ts-types.md#length) | Width of the navigation bar.
Default value: **200**
Unit: vp
**NOTE**
This attribute is valid only when the **\** component is split.| -| navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**
**NOTE**
This attribute is valid only when the **\** component is split.| -| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**
At the default settings, the component adapts to a single column or two columns based on the component width.| +| navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**
**NOTE**
This attribute is valid only when the **\** component is split.| +| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**
At the default settings, the component adapts to a single column or two columns based on the component width.| | backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The back button in the title bar of the **\** component cannot be hidden.| | hideNavBar9+ | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.| -| navDestination10+ | builder: (name: string, param: unknown) => void | Creates a **\** component.
**NOTE**
The **builder** function is used, with the **name** and **param** parameters passsed in. In the builder, a layer of custom components can be included outside the **\** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.| +| navDestination10+ | builder: (name: string, param: unknown) => void | Creates a **\** component.
**NOTE**
The **builder** function is used, with the **name** and **param** parameters passed in. In the builder, a layer of custom components can be included outside the **\** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.| +| navBarWidthRange10+ | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Minimum and maximum widths of the navigation bar.
Default value: [240, 280]
Unit: vp | +| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | Minimum width of the navigation bar content area.
Default value: **360**
Unit: vp | ## NavPathStack10+ @@ -75,7 +77,7 @@ Pushes the navigation destination page specified by **name** to the navigation s | Name | Type | Mandatory | Description | | ------ | ----------------------- | ---- | --------------- | -| name | string | Yes | Name of the navigation destination page. | +| name | string | Yes | Name of the navigation destination page. | | param | unknown | Yes | Parameter information of the navigation destination page. | ### pop10+ @@ -89,7 +91,7 @@ Pops the top element out of the navigation stack. | Type | Description | | ------ | -------- | | NavPathInfo | Returns the information about the navigation destination page at the top of the stack.| -| undefined | Returns **undefined** if the navigation stack is empty.| +| undefined | Returns **undefined** if the navigation stack is empty.| ### popTo10+ @@ -101,7 +103,7 @@ Returns the navigation stack to the first navigation destination page that match | Name | Type | Mandatory | Description | | ------ | ----------------------- | ---- | --------------- | -| name | string | Yes | Name of the navigation destination page. | +| name | string | Yes | Name of the navigation destination page. | **Return value** @@ -119,7 +121,7 @@ Returns the navigation stack to the navigation destination page that matches the | Name | Type | Mandatory | Description | | ------ | ----------------------- | ---- | --------------- | -| index | number | Yes | Index of the navigation destination page. | +| index | number | Yes | Index of the navigation destination page. | ### moveToTop10+ @@ -149,7 +151,7 @@ Moves to the top of the navigation stack the navigation destination page that ma | Name | Type | Mandatory | Description | | ------ | ----------------------- | ---- | --------------- | -| index | number | Yes | Index of the navigation destination page. | +| index | number | Yes | Index of the navigation destination page. | ### clear10+ @@ -179,13 +181,13 @@ Obtains the parameter information of the navigation destination page that matche | Name | Type | Mandatory | Description | | ------ | ----------------------- | ---- | --------------- | -| index | number | Yes | Index of the navigation destination page. | +| index | number | Yes | Index of the navigation destination page. | **Return value** | Type | Description | | ------ | -------- | -| unknown | Returns the parameter information of the matching navigation destination page.| +| unknown | Returns the parameter information of the matching navigation destination page.| | undefined | Returns **undefined** if the passed index is invalid.| ### getParamByName10+ @@ -216,7 +218,7 @@ Obtains the indexes information of all the navigation destination pages that mat | Name | Type | Mandatory | Description | | ------ | ----------------------- | ---- | --------------- | -| name | string | Yes | Name of the navigation destination page. | +| name | string | Yes | Name of the navigation destination page. | **Return value** diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index ef810a8be61e6dc14a8ccba62714a3f8bbe1b06e..c620b663ecdc67b90b59176f62639662b3bbf1a8 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -27,7 +27,7 @@ Since API version 9, this API is supported in ArkTS widgets. | value | number | Yes | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.
Since API version 9, this API is supported in ArkTS widgets.| | total | number | No | Total progress.
Default value: **100**
Since API version 9, this API is supported in ArkTS widgets.| | type8+ | [ProgressType](#progresstype) | No | Style of the progress indicator.
Default value: **ProgressType.Linear**
Since API version 9, this API is supported in ArkTS widgets.| -| styledeprecated | [ProgressStyle](#progressstyle) | No | Style of the progress indicator.
This parameter is deprecated since API version 8. You are advised to use **type** instead.
Default value: **ProgressStyle.Linear**| +| style(deprecated) | [ProgressStyle](#progressstyle) | No | Style of the progress indicator.
This parameter is deprecated since API version 8. You are advised to use **type** instead.
Default value: **ProgressStyle.Linear**| ## ProgressType diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index bc6f5ef081cf9c51067f4e15c63cf2f12482ce6e..327940062946a54cb8c4a6df65fbaa0991c7e3bb 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -33,7 +33,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | | color | [ResourceColor](ts-types.md#resourcecolor) | Color of the QR code.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.| -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.
Default value: **Color.White**
Since API version 9, this API is supported in ArkTS widgets.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.
Default value: **Color.White**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The settings of the universal attribute [backgroundColor](./ts-universal-attributes-background.md) applies to the QR code content area instead of the entire **\** component.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md index b76cb22dd303044b2e7456859da454cd815d957a..31136e74e7644fd2b3e30cac07b5428d0bf1106f 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md @@ -62,6 +62,9 @@ struct RadioExample { Column() { Text('Radio1') Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) + .radioStyle({ + checkedBackgroundColor: Color.Pink + }) .height(50) .width(50) .onChange((isChecked: boolean) => { @@ -71,6 +74,9 @@ struct RadioExample { Column() { Text('Radio2') Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false) + .radioStyle({ + checkedBackgroundColor: Color.Pink + }) .height(50) .width(50) .onChange((isChecked: boolean) => { @@ -80,6 +86,9 @@ struct RadioExample { Column() { Text('Radio3') Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false) + .radioStyle({ + checkedBackgroundColor: Color.Pink + }) .height(50) .width(50) .onChange((isChecked: boolean) => { @@ -90,4 +99,4 @@ struct RadioExample { } } ``` -![](figures/radio.gif) +![radio](figures/radio.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md index 8219faa65966b92064528a5068d5870ad757e769..366eb3e728268319bf8cdd926846b0bfc0b51ddc 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -14,6 +14,10 @@ This component can contain child components. > **NOTE** > > Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control. +> +> When the **\** component's **displayMode** attribute is set to **SwiperDisplayMode.AutoLinear** or its **displayCount** attribute is set to **'auto'**, the child component whose **visibility** attribute is set to **None** does not take up space in the viewport, but this does not affect the number of navigation dots. +> +> If the **visibility** attribute of a child component is set to **None** or **Hidden**, it takes up space in the viewport, but is not displayed. ## APIs @@ -22,42 +26,44 @@ Swiper(controller?: SwiperController) **Parameters** -| Name | Type | Mandatory | Description | +| Name | Type | Mandatory | Description | | ---------- | ------------------------------------- | ---- | -------------------- | -| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page switching.| +| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page switching.| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. [Menu control](ts-universal-attributes-menu.md) is not supported. -| Name | Type | Description | -| --------------------------- | ---------------------------------------- | ---------------------------------------- | -| index | number | Index of the child component currently displayed in the container.
Default value: **0**
**NOTE**
If the value is less than 0 or greater than or equal to the number of child components, the default value **0** is used.
Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| -| autoPlay | boolean | Whether to enable automatic playback for child component switching.
Default value: **false**
**NOTE**
If **loop** is set to **false**, the playback stops when the last page is displayed. The playback continues when the page is not the last page after a swipe gesture.| -| interval | number | Interval for automatic playback, in ms.
Default value: **3000** | -| indicator10+ | [DotIndicator](#dotindicator) \| [DigitIndicator](#digitindicator) \| boolean | Style of the navigation point indicator.
\- **DotIndicator**: dot style.
\- **DigitIndicator**: digit style.
\- **boolean**: whether to enable the navigation point indicator.
Default value: **true**
Default type: **DotIndicator**| -| loop | boolean | Whether to enable loop playback.
The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.
Default value: **true**| -| duration | number | Duration of the animation for switching child components, in ms.
Default value: **400** | -| vertical | boolean | Whether vertical swiping is used.
Default value: **false** | -| itemSpace | number \| string | Space between child components.
Default value: **0**
**NOTE**
This parameter cannot be set in percentage.| -| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.
Default value: **SwiperDisplayMode.Stretch**| -| cachedCount8+ | number | Number of child components to be cached.
Default value: **1**
**NOTE**
**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| -| disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | -| curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.
Default value: **Curve.Linear**| +| Name | Type | Description | +| ------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| index | number | Index of the child component currently displayed in the container.
Default value: **0**
**NOTE**
If the value is less than 0 or greater than or equal to the number of child components, the default value **0** is used.
Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| +| autoPlay | boolean | Whether to enable automatic playback for child component switching.
Default value: **false**
**NOTE**
If **loop** is set to **false**, the playback stops when the last page is displayed. The playback continues when the page is not the last page after a swipe gesture.| +| interval | number | Interval for automatic playback, in ms.
Default value: **3000** | +| indicator10+ | [DotIndicator](#dotindicator10) \| [DigitIndicator](#digitindicator10) \| boolean | Style of the navigation point indicator.
\- **DotIndicator**: dot style.
\- **DigitIndicator**: digit style.
\- **boolean**: whether to enable the navigation point indicator.
Default value: **true**
Default type: **DotIndicator**| +| loop | boolean | Whether to enable loop playback.
The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.
Default value: **true**| +| duration | number | Duration of the animation for switching child components, in ms.
Default value: **400** | +| vertical | boolean | Whether vertical swiping is used.
Default value: **false** | +| itemSpace | number \| string | Space between child components.
Default value: **0**
**NOTE**
This parameter cannot be set in percentage.| +| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.
Default value: **SwiperDisplayMode.Stretch**| +| cachedCount8+ | number | Number of child components to be cached.
Default value: **1**
**NOTE**
This attribute applies only when the **\** component uses [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| +| disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | +| curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.
Default value: **Curve.Linear**| | indicatorStyle(deprecated) | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.
This API is supported since API version 8 and is deprecated since API version 9. You are advised to use [indicator](#indicator10) instead.| -| displayCount8+ | number \| string | Number of elements to display per page.
Default value: **1**
**NOTE**
If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.
If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.| -| effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**
**NOTE**
The spring effect does not take effect when the controller API is called.| -| displayArrow10+ | value:[ArrowStyle](#arrowstyle10) \| boolean,
isHoverShow?: boolean | Arrow style of the navigation point indicator.
Default value: **false**
**isHoverShow**: whether to show the arrow when the mouse pointer hovers over the navigation point indicator.| +| displayCount8+ | number \| string \|
[SwiperAutoFill](#swiperautofill10)10+ | Number of elements to display per page.
Default value: **1**
**NOTE**
If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.
If the value is set to a number less than or equal to 0, the default value **1** is used.
If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.
If the value is of the SwiperAutoFill type, the system automatically calculates and changes the number of elements to display per page based on the **\** component width and the **minSize** settings for the child component. If **minSize** is left empty or set to a value less than or equal to 0, the **\** component displays one column.| +| effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**
**NOTE**
The spring effect does not take effect when the controller API is called.| +| displayArrow10+ | value:[ArrowStyle](#arrowstyle10) \| boolean,
isHoverShow?: boolean | Arrow style of the navigation point indicator.
- **value**: arrow and background to set. In abnormal scenarios, the default values in the **ArrowStyle** object are used.
\- **isHoverShow**: whether to show the arrow only when the mouse pointer hovers over the navigation point indicator.
Default value: **false**
**NOTE**
When **isHoverShow** is set to **false**, the arrow is always displayed and can be clicked to turn pages.
When **isHoverShow** is set to **true**, the arrow is displayed only when the mouse pointer hovers over the navigation point indicator, and it can be clicked to turn pages.| +| nextMargin10+ |
[Length](ts-types.md#length)
| Next margin, used to reveal a small part of the next item.
Default value: **0**
**NOTE**
This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**. | +| prevMargin10+ |
[Length](ts-types.md#length)
| Previous margin, used to reveal a small part of the previous item.
Default value: **0**
**NOTE**
This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**. | ## SwiperDisplayMode -| Name| Description| -| ----------- | ------------------------------------------ | -| Stretch(deprecated) | The slide width of the **\** component is equal to the width of the component.
This API is deprecated since API version 10. You are advised to use **STRETCH** instead.| -| AutoLinear(deprecated) | The slide width of the **\** component is equal to that of the child component with the maximum width.
This API is deprecated since API version 10. You are advised to use **AUTO_LINEAR** instead.| -| STRETCH10+ | The slide width of the **\** component is equal to the width of the component.| -| AUTO_LINEAR10+ | The slide width of the **\** component is equal to that of the child component with the maximum width.| +| Name | Description | +| --------------------------------- | ---------------------------------------- | +| Stretch(deprecated) | The slide width of the **\** component is equal to the width of the component.
This API is deprecated since API version 10. You are advised to use **STRETCH** instead.| +| AutoLinear(deprecated) | The slide width of the **\** component is equal to that of the child component with the maximum width.
This API is deprecated since API version 10. You are advised to use **AUTO_LINEAR** instead.| +| STRETCH10+ | The slide width of the **\** component is equal to the width of the component. | +| AUTO_LINEAR10+ | The slide width of the **\** component is equal to the width of the leftmost child component in the viewport. | ## SwiperController @@ -83,72 +89,80 @@ Stops an animation. **Parameters** -| Name | Type | Mandatory.| Description| -| --------- | ---------- | ------ | -------- | -| callback | () => void | No | Callback invoked when the animation stops.| +| Name | Type | Mandatory. | Description | +| -------- | ---------- | ---- | -------- | +| callback | () => void | No | Callback invoked when the animation stops.| ## Indicator10+ Sets the distance between the navigation point indicator and the **\** component. -| Name| Type| Mandatory.| Description | -| ------ | -------- | ------ | ------------------------------------ | -| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\** component.
Default value: **0**
Unit: vp| -| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\** component.
Default value: **0**
Unit: vp| -| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\** component.
Default value: **0**
Unit: vp| -| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\** component.
Default value: **0**
Unit: vp| +| Name | Type | Mandatory. | Description | +| ------ | ---------------------------- | ---- | ---------------------------------------- | +| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\** component.
Default value: **0**
Unit: vp| +| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\** component.
Default value: **0**
Unit: vp| +| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\** component.
Default value: **0**
Unit: vp| +| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\** component.
Default value: **0**
Unit: vp| -### DotIndicator +## DotIndicator10+ Defines the navigation point indicator of the dot style, which inherits attributes and features from **Indicator**. -| Name | Type | Mandatory.| Description | -| ------------------ | ------------- | ------ | ------------------------------------------------------ | -| itemWidth | [Length](ts-types.md#length) | No | Width of the navigation point indicator of the dot style.
Default value: **6**
Unit: vp| -| itemHeight | [Length](ts-types.md#length) | No | Height of the navigation point indicator of the dot style.
Default value: **6**
Unit: vp| -| selectedItemWidth | [Length](ts-types.md#length) | No | Width of the selected indicator dot.
Default value: **6**
Unit: vp| -| selectedItemHeight | [Length](ts-types.md#length) | No | Height of the selected indicator dot.
Default value: **6**
Unit: vp| -| mask | boolean | No | Whether to enable the mask for the navigation point indicator of the dot style.
Default value: **false**| -| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator of the dot style.
Default value: **'\#007DFF'**| -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected indicator dot.
Default value: **'\#182431'** (10% opacity)| +| Name | Type | Mandatory. | Description | +| ------------------ | ---------------------------------------- | ---- | ---------------------------------------- | +| itemWidth | [Length](ts-types.md#length) | No | Width of the navigation point indicator of the dot style.
Default value: **6**
Unit: vp| +| itemHeight | [Length](ts-types.md#length) | No | Height of the navigation point indicator of the dot style.
Default value: **6**
Unit: vp| +| selectedItemWidth | [Length](ts-types.md#length) | No | Width of the selected indicator dot.
Default value: **6**
Unit: vp| +| selectedItemHeight | [Length](ts-types.md#length) | No | Height of the selected indicator dot.
Default value: **6**
Unit: vp| +| mask | boolean | No | Whether to enable the mask for the navigation point indicator of the dot style.
Default value: **false**| +| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator of the dot style.
Default value: **'\#182431'** (10% opacity)| +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected indicator dot.
Default value: **'\#007DFF'**| -### DigitIndicator +## DigitIndicator10+ Defines the navigation point indicator of the digit style, which inherits attributes and features from **Indicator**. -| Name | Type | Mandatory.| Description | -| ----------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | -| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the navigation point indicator of the digit style.
Default value: **'\#ff182431'**| -| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected indicator digit.
Default value: **'\#ff182431'**| -| digitFont | {
size?:[Length](ts-types.md#length)
weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string
} | No | Font style of the navigation point indicator of the digit style.
\- **size**: font size.
Default value: **14vp**
\- **weight**: font weight.| -| selectedDigitFont | {
size?:[Length](ts-types.md#length)
weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string
} | No | Font style of the selected indicator digit.
\- **size**: font size.
Default value: **14vp**
\- **weight**: font weight.| +| Name | Type | Mandatory. | Description | +| ----------------- | ---------------------------------------- | ---- | ---------------------------------------- | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the navigation point indicator of the digit style.
Default value: **'\#ff182431'**| +| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected indicator digit.
Default value: **'\#ff182431'**| +| digitFont | {
size?:[Length](ts-types.md#length)
weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string
} | No | Font style of the navigation point indicator of the digit style.
\- **size**: font size.
Default value: **14vp**
\- **weight**: font weight.| +| selectedDigitFont | {
size?:[Length](ts-types.md#length)
weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string
} | No | Font style of the selected indicator digit.
\- **size**: font size.
Default value: **14vp**
\- **weight**: font weight.| -### ArrowStyle10+ +## ArrowStyle10+ Describes the left and right arrow attributes. -| Name | Type| Mandatory.| Description| -| ------------- | -------- | ------ | -------- | -| isShowBackground | boolean | No| Whether to show the background for the arrow.
Default value: **false**| -| isSidebarMiddle | boolean | No| Whether the arrow is centered on both sides of the content area.
Default value: **false** (the arrow is shown on either side of the navigation point indicator)| -| backgroundSize | [Length](ts-types.md#length) | No| Size of the background.
Default value: **24vp**| -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the background.
Default value: **'\#19182431'**| -| arrowSize | [Length](ts-types.md#length) | No| Size of the arrow.
Default value: **18vp**| -| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the arrow.
Default value: **\#182431**| +| Name | Type | Mandatory. | Description | +| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | +| isShowBackground | boolean | No | Whether to show the background for the arrow.
Default value: **false** | +| isSidebarMiddle | boolean | No | Whether the arrow is shown on either side of the navigation point indicator.
Default value: **false** (the arrow is shown on either side of the navigation point indicator) | +| backgroundSize | [Length](ts-types.md#length) | No | Size of the background.
On both sides of the navigation point indicator:
Default value: **24vp**
On both sides of the component:
Default value: **32vp**
This parameter cannot be set in percentage.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the background.
On both sides of the navigation point indicator:
Default value: **'\#19182431'**
On both sides of the component:
Default value: **'\#00000000'**| +| arrowSize | [Length](ts-types.md#length) | No | Size of the arrow.
On both sides of the navigation point indicator:
Default value: **18vp**
On both sides of the component:
Default value: **24vp**
**NOTE**
If **isShowBackground** is set to **true**, the value of **arrowSize** is 3/4 of the value of **backgroundSize**.
This parameter cannot be set in percentage.| +| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the arrow.
Default value: **\#182431** | + +## SwiperAutoFill10+ +Describes the auto-fill attribute. +| Name | Type | Mandatory.| Description | +| ------- | -------------------- | ------ | ------------------------------------ | +| minSize | [VP](ts-types.md#vp10) | Yes | Minimum width of the element.
Default value: **0**| ## Events In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------ | -| onChange(event: (index: number) => void) | Triggered when the index of the currently displayed child component changes.
- **index**: index of the currently displayed element.
**NOTE**
When the **\** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event.| -| onAnimationStart9+(event: (index: number) => void) | Triggered when the switching animation starts.
- **index**: index of the currently displayed element.
**NOTE**
The **index** parameter indicates the index before the animation starts (not the one after). When the **\** component contains multiple columns, the index is of the leftmost element.| -| onAnimationEnd9+(event: (index: number) => void) | Triggered when the switching animation ends.
- **index**: index of the currently displayed element.
**NOTE**
This event is triggered when the animation ends regardless of whether it is due to a user gesture or invocation of **finishAnimation** through **SwiperController**. The **index** parameter indicates the index after the animation ends. When the **\** component contains multiple columns, the index is of the leftmost element.| +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onChange(event: (index: number) => void) | Triggered when the index of the currently displayed child component changes.
- **index**: index of the currently displayed element.
**NOTE**
When the **\** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event.| +| onAnimationStart9+(event: (index: number, targetIndex10+: number, extraInfo10+: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | Triggered when the switching animation starts.
- **index**: index of the currently displayed element.
- **targetIndex**: index of the target element to switch to.
- **extraInfo**: extra information of the animation, including the offset of the currently displayed element and target element relative to the start position of the **\** along the main axis, and the hands-off velocity.
**NOTE**
The **index** parameter indicates the index before the animation starts (not the one after). When the **\** component contains multiple columns, the index is of the leftmost element.| +| onAnimationEnd9+(event: (index: number, extraInfo: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | Triggered when the switching animation ends.
- **index**: index of the currently displayed element.
- **extraInfo**: extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **\** along the main axis.
**NOTE**
This event is triggered when the switching animation of the **\** component ends, whether it is caused by gesture interruption or by calling **finishAnimation** through SwiperController. The **index** parameter indicates the index after the animation ends. When the **\** component contains multiple columns, the index is of the leftmost element.| +| onGestureSwipe10+(event: (index: number, extraInfo: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | Triggered on a frame-by-frame basis when the page is turned by a swipe.
- **index**: index of the currently displayed element.
- **extraInfo**: extra information of the animation, which is the offset of the currently displayed element relative to the start position of the **\** along the main axis.
**NOTE**
If there are multiple columns, **index** indicates the index of the leftmost component.| ## Example +### Example 1 ```ts // xxx.ets class MyDataSource implements IDataSource { @@ -204,10 +218,32 @@ struct SwiperExample { .loop(true) .duration(1000) .itemSpace(0) + .displayArrow({ + isShowBackground:true, + isSidebarMiddle:true, + backgroundSize:24, + backgroundColor:Color.White, + arrowSize:18, + arrowColor:Color.Blue},false) .curve(Curve.Linear) .onChange((index: number) => { console.info(index.toString()) }) + .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { + console.info("index: " + index) + console.info("current offset: " + extraInfo.currentOffset) + }) + .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { + console.info("index: " + index) + console.info("targetIndex: " + targetIndex) + console.info("current offset: " + extraInfo.currentOffset) + console.info("target offset: " + extraInfo.targetOffset) + console.info("velocity: " + extraInfo.velocity) + }) + .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { + console.info("index: " + index) + console.info("current offset: " + extraInfo.currentOffset) + }) Row({ space: 12 }) { Button('showNext') @@ -226,3 +262,163 @@ struct SwiperExample { ``` ![swiper](figures/swiper.gif) + +### Example 2 +```ts +// xxx.ets +class MyDataSource implements IDataSource { + private list: number[] = [] + private listener: DataChangeListener + + constructor(list: number[]) { + this.list = list + } + + totalCount(): number { + return this.list.length + } + + getData(index: number): any { + return this.list[index] + } + + registerDataChangeListener(listener: DataChangeListener): void { + this.listener = listener + } + + unregisterDataChangeListener() { + } +} + +@Entry +@Component +struct SwiperExample { + private swiperController: SwiperController = new SwiperController() + private data: MyDataSource = new MyDataSource([]) + + aboutToAppear(): void { + let list = [] + for (var i = 1; i <= 10; i++) { + list.push(i.toString()); + } + this.data = new MyDataSource(list) + } + + build() { + Column({ space: 5 }) { + Swiper(this.swiperController) { + LazyForEach(this.data, (item: string) => { + Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30) + }, item => item) + } + .cachedCount(2) + .index(1) + .autoPlay(true) + .interval(4000) + .indicator(Indicator.dot() + .itemWidth(15) + .itemHeight(15) + .selectedItemWidth(15) + .selectedItemHeight(15) + .color(Color.Gray) + .selectedColor(Color.Blue)) + .loop(true) + .duration(1000) + .itemSpace(0) + .displayArrow(true,true) + Row({ space: 12 }) { + Button('showNext') + .onClick(() => { + this.swiperController.showNext() + }) + Button('showPrevious') + .onClick(() => { + this.swiperController.showPrevious() + }) + }.margin(5) + }.width('100%') + .margin({ top: 5 }) + } +} +``` +![swiper](figures/swiper-dot.gif) + +### Example 3 +```ts +// xxx.ets +class MyDataSource implements IDataSource { + private list: number[] = [] + private listener: DataChangeListener + + constructor(list: number[]) { + this.list = list + } + + totalCount(): number { + return this.list.length + } + + getData(index: number): any { + return this.list[index] + } + + registerDataChangeListener(listener: DataChangeListener): void { + this.listener = listener + } + + unregisterDataChangeListener() { + } +} + +@Entry +@Component +struct SwiperExample { + private swiperController: SwiperController = new SwiperController() + private data: MyDataSource = new MyDataSource([]) + + aboutToAppear(): void { + let list = [] + for (var i = 1; i <= 10; i++) { + list.push(i.toString()); + } + this.data = new MyDataSource(list) + } + + build() { + Column({ space: 5 }) { + Swiper(this.swiperController) { + LazyForEach(this.data, (item: string) => { + Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30) + }, item => item) + } + .cachedCount(2) + .index(1) + .autoPlay(true) + .interval(4000) + .indicator(Indicator.digit() + .right(130) + .top(200) + .fontColor(Color.Gray) + .selectedFontColor(Color.Gray) + .digitFont({size:20,weight:FontWeight.Bold}) + .selectedDigitFont({size:20,weight:FontWeight.Normal})) + .loop(true) + .duration(1000) + .itemSpace(0) + .displayArrow(true,false) + Row({ space: 12 }) { + Button('showNext') + .onClick(() => { + this.swiperController.showNext() + }) + Button('showPrevious') + .onClick(() => { + this.swiperController.showPrevious() + }) + }.margin(5) + }.width('100%') + .margin({ top: 5 }) + } +} +``` +![swiper](figures/swiper-digit.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-types.md b/en/application-dev/reference/arkui-ts/ts-types.md index df71967ffb8f97b52183d429b82ae3d7c38b8c0e..1b3f4797c639b3e566b5beccff527ab4b83c21d8 100644 --- a/en/application-dev/reference/arkui-ts/ts-types.md +++ b/en/application-dev/reference/arkui-ts/ts-types.md @@ -249,7 +249,7 @@ The **ModalTransition** type is used to set the transition type for a full-scree | ------- | ------------ | | NONE | No transition animation for the modal. | | DEFAULT | Slide-up and slide-down animation for the modal. | -| ALPHA | Opacity gradient animation for the modal. | +| ALPHA | Opacity gradient animation for the modal.| ## Dimension10+ @@ -258,7 +258,7 @@ The **Length** type is used to represent a size unit. | Type | Description | | --------------------- | -------------------------------------- | | [PX](#px10) | Physical pixel unit type. The unit px must be included, for example, **'10px'**.| -| [VP](#vp10) | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.| +| [VP](#vp10) | Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, **10** or **'10vp'**.| | [FP](#fp10) | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.| | [LPX](#lpx10) | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.| | [Percentage](#percentage10) | Percentage type. The unit % must be included, for example, **'10%'**.| @@ -278,7 +278,7 @@ The **VP** type is used to represent a length in vp. | Type | Description | | --------------------- | -------------------------------------- | -| {number}vp | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.| +| {number}vp\|number | Pixel unit type specific to the screen density. The unit vp can be included or omitted, for example, **10** or **'10vp'**.| ## FP10+ @@ -311,3 +311,13 @@ The **Degree** type is used to represent a length in deg. | Type | Description | | --------------------- | -------------------------------------- | | {number}deg | Degree type. The unit deg must be included, for example, **'10deg'**.| + +## SwiperAnimationEvent10+ + +Describes the animation information of the \ component. + +| Name | Type | Description | +| ------------- | ---------------------- | ---------------------------------------- | +| currentOffset | number | Offset of the currently displayed element relative to the start position of the **\** along the main axis. Unit: vp
Default value: **0**| +| targetOffset | number | Offset of the target element relative to the start position of the **\** along the main axis. Unit: vp
Default value: **0**| +| velocity | number | Hands-off velocity at the beginning of the animation. Unit: vp/s
Default value: **0**| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md index a6a11470211d552783c6218ce240102bf175bfc7..0332ec9d66896963273111eb6c6f514489085857 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md @@ -5,22 +5,26 @@ You can bind a sheet to a component through the **bindSheet** attribute. You can > **NOTE** > > The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. +> > Switching between landscape and portrait modes is not supported. ## Attributes -| Name| Parameter | Description| -| -------- | -------- | -------- | -| bindSheet | isShow: boolean,
builder: [CustomBuilder](ts-types.md#custombuilder8),
sheetStyle?: [SheetStyle](#sheetstyle10) | Binds a sheet to the component, which can be displayed when the component is touched. **isShow**: whether to display the sheet. Mandatory.
**builder**: content of the sheet. Mandatory.
**sheetStyle**: height and control bar visibility of the sheet. Optional. By default, the default height is **Large** and the control bar is visible.| +| Name| Parameter| Description| +| ----- | ----- | ----- | +| bindSheet | isShow: boolean,
builder: [CustomBuilder](ts-types.md#custombuilder8),
options?: [SheetOptions](#sheetoptions) | Binds a sheet to the component, which can be displayed when the component is touched.
**isShow**: whether to display the sheet. Mandatory.
**builder**: content of the sheet. Mandatory.
**options**: options of the sheet. Optional.| -## SheetStyle10+ +## SheetOptions -| Name | Type | Mandatory| Description | -| ------------------ | -------------------------------------- | ---- | ---------------------- | -| height | [SheetSize](#sheetsize10) \| [Length](ts-types.md#length) | No| Height of the sheet. | -| dragBar | boolean | No | Whether the control bar is visible. | +| Name| Type| Mandatory| Description| +| ----- | ----- | ----- | ------ | +| height | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | No| Height of the sheet.
Default value: **LARGE**| +| dragBar | boolean | No| Whether to display the drag bar. By default, the drag bar is displayed .| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the sheet.| +| onAppear | () => void | No| Callback invoked when the sheet is displayed.| +| onDisappear | () => void | No| Callback invoked when the sheet is hidden.| -## SheetSize10+ +## SheetSize | Name| Description| | -------- | -------- | @@ -81,7 +85,7 @@ struct SheetTransitionExample { }) .fontSize(20) .margin(10) - .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar}) + .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () => {console.log("BindSheet onAppear.")}, onDisappear: () => {console.log("BindSheet onDisappear.")}}) } .justifyContent(FlexAlign.Center) .width('100%') diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index feb63e3f4a94158424dc7892e0abc8a7ea747d94..3344dfa1bbd18b706c1a2318e907063555800c7e 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -2,22 +2,22 @@ Universal text attributes include text style attributes applicable to text containers. -> **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. ## Attributes -| Name | Type | Description | -| -----------| ---------------------------------------- | ------------------------------------ | -| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Font color.
Since API version 9, this API is supported in ArkTS widgets.| -| fontSize | [Length](ts-types.md#length) | Font size. If the value is of the number type, the unit fp is used. The default font size is 16. This attribute cannot be set in percentage.
Since API version 9, this API is supported in ArkTS widgets.| -| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.
Default value: **FontStyle.Normal**
Since API version 9, this API is supported in ArkTS widgets.| -| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.
Default value: **FontWeight.Normal**
Since API version 9, this API is supported in ArkTS widgets.| -| fontFamily | string \| [Resource](ts-types.md#resource) | Font family.
Default value: **'HarmonyOS Sans'**. Currently, only the default font is supported.
Since API version 9, this API is supported in ArkTS widgets.| +| Name | Type | Description | +| ---------- | ---------------------------------------- | ---------------------------------------- | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Font color.
Since API version 9, this API is supported in ArkTS widgets.| +| fontSize | [Length](ts-types.md#length) | Font size. If the value is of the number type, the unit fp is used. The default font size is 16. This attribute cannot be set in percentage.
Since API version 9, this API is supported in ArkTS widgets.| +| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.
Default value: **FontStyle.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight. The string type supports only the string of the number type, for example, **400**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.
Default value: **FontWeight.Normal**
Since API version 9, this API is supported in ArkTS widgets.| +| fontFamily | string \| [Resource](ts-types.md#resource) | Font family.
Default value: **'HarmonyOS Sans'**. Currently, only the default font is supported.
Since API version 9, this API is supported in ArkTS widgets.| | lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.
Since API version 9, this API is supported in ArkTS widgets.| | decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None,
color: Color.Black
}
Since API version 9, this API is supported in ArkTS widgets.| diff --git a/en/application-dev/ui/ui-js-animate-dynamic-effects.md b/en/application-dev/ui/ui-js-animate-dynamic-effects.md index 59afb8eea9271913bd997452ee93e95aa7f239fb..aae55d3c1ead3f7832e20d4628eca0c6df7b79b9 100644 --- a/en/application-dev/ui/ui-js-animate-dynamic-effects.md +++ b/en/application-dev/ui/ui-js-animate-dynamic-effects.md @@ -4,11 +4,6 @@ You can set the interpolator to implement the animation effect. -> **NOTE** -> -> This feature is supported since API version 6. - - ## Creating an Animation Object Use createAnimator to create an animation object and set the animation attributes by using the options parameter. diff --git a/en/application-dev/ui/ui-js-components-form.md b/en/application-dev/ui/ui-js-components-form.md index 12907b18fb1fde2797d331a082f7c6aa6aee3647..8160cb320cb16763ecc67c7ed67720e3f27db72f 100644 --- a/en/application-dev/ui/ui-js-components-form.md +++ b/en/application-dev/ui/ui-js-components-form.md @@ -2,12 +2,6 @@ The **\
** component allows the content in [\](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md). - -> **NOTE** -> -> The APIs of this module are supported since API version 6. - - ## Creating a \ Component Create a **\** component in the .hml file under **pages/index**. diff --git a/en/application-dev/ui/ui-js-components-stepper.md b/en/application-dev/ui/ui-js-components-stepper.md index 9e4c0fc869b27d64dc12ca27171eff333ec78e47..c739f8e0fa06d9924015e48396550172f2477f65 100644 --- a/en/application-dev/ui/ui-js-components-stepper.md +++ b/en/application-dev/ui/ui-js-components-stepper.md @@ -3,11 +3,6 @@ When multiple steps are required to complete a task, you can use the **\** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md). -> **NOTE** -> -> This component is supported since API version 5. - - ## Creating a \ Component Create a **\** component in the .hml file under **pages/index**. diff --git a/en/application-dev/ui/ui-js-components-svg-overview.md b/en/application-dev/ui/ui-js-components-svg-overview.md index e60d0046423c933ca2950d1804c93b99de764a5c..5ef12f8195275381503a1c0288f1a396a270e6f9 100644 --- a/en/application-dev/ui/ui-js-components-svg-overview.md +++ b/en/application-dev/ui/ui-js-components-svg-overview.md @@ -5,9 +5,8 @@ The **<svg>** component is used as the root node of the SVG canvas and can > **NOTE** -> - The APIs of this component are supported since API version 7. > -> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn. +> The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn. ## Creating an <svg> Component