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

!20758 翻译完成...

!20758 翻译完成 20502+20462+20411+20399+20216+20091+20038+19485+19083+20180+19907+20180+18153+19857+20685
Merge pull request !20758 from ester.zhou/TR-20502
......@@ -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%')
}
}
......
......@@ -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
......
......@@ -24,7 +24,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| -------- | ------------------------- | ---------------------------------------------------------------- |
| fontSize<sup>deprecated</sup> | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.<br>This API is deprecated since API version 10. You are advised to use **font** instead.|
| fontSize<sup>(deprecated)</sup> | [Length](ts-types.md#length) | Font size of the menu text. When **Length** is of the number type, the unit is fp.<br>This API is deprecated since API version 10. You are advised to use **font** instead.|
| font<sup>10+</sup> | [Font](ts-types.md#font) | Font style of the menu text.|
| fontColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Font color of the menu text.|
......
......@@ -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)<sup>10+</sup> \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> \| [NavigationCommonTitle](#navigationcommontitle)<sup>9+</sup> \| [NavigationCustomTitle](#navigationcustomtitle)<sup>9+</sup> | Page title.<br>**NOTE**<br>When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.<br>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 (...).|
| subTitle<sup>deprecated</sup> | 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<sup>(deprecated)</sup> | 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)&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 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.<br>Default value: **NavigationTitleMode.Free**|
| toolBar | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**items**: items on the toolbar.<br>**NOTE**<br>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.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Display the toolbar.|
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false**<br>**true**: Hide the back button.<br>**false**: Display the back button.<br>The back button in the title bar of the **\<NavDestination>** component cannot be hidden.<br>**NOTE**<br>The back button is available only when **titleMode** is set to **NavigationTitleMode.Mini**.|
| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false**<br>**true**: Hide the back button.<br>**false**: Display the back button.<br>The back button in the title bar of the **\<NavDestination>** component cannot be hidden.<br>**NOTE**<br>The back button works only when **titleMode** is set to **NavigationTitleMode.Mini**.|
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.|
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.|
| backButtonIcon<sup>9+</sup> | 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 **\<NavDestination>** component cannot be hidden.|
| hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | Creates a **\<NavDestination>** component.<br>**NOTE**<br>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 **\<NavDestination>** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.|
| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | Creates a **\<NavDestination>** component.<br>**NOTE**<br>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 **\<NavDestination>** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.|
| navBarWidthRange<sup>10+</sup> | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Minimum and maximum widths of the navigation bar.<br>Default value: [240, 280]<br>Unit: vp |
| minContentWidth<sup>10+</sup> | [Dimension](ts-types.md#dimension10) | Minimum width of the navigation bar content area.<br>Default value: **360**<br>Unit: vp |
## NavPathStack<sup>10+</sup>
......@@ -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. |
### pop<sup>10+</sup>
......@@ -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.|
### popTo<sup>10+</sup>
......@@ -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. |
### moveToTop<sup>10+</sup>
......@@ -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. |
### clear<sup>10+</sup>
......@@ -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.|
### getParamByName<sup>10+</sup>
......@@ -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**
......
......@@ -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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| total | number | No | Total progress.<br>Default value: **100**<br>Since API version 9, this API is supported in ArkTS widgets.|
| type<sup>8+</sup> | [ProgressType](#progresstype) | No | Style of the progress indicator.<br>Default value: **ProgressType.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.|
| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle) | No | Style of the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**|
| style<sup>(deprecated)</sup> | [ProgressStyle](#progressstyle) | No | Style of the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**|
## ProgressType
......
......@@ -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.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.<br>Default value: **Color.White**<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.<br>Default value: **Color.White**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The settings of the universal attribute [backgroundColor](./ts-universal-attributes-background.md) applies to the QR code content area instead of the entire **\<QRCode>** component.|
## Events
......
......@@ -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)
......@@ -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.|
## Dimension<sup>10+</sup>
......@@ -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'**.|
## FP<sup>10+</sup>
......@@ -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'**.|
## SwiperAnimationEvent<sup>10+</sup>
Describes the animation information of the \<Swiper> component.
| Name | Type | Description |
| ------------- | ---------------------- | ---------------------------------------- |
| currentOffset | number | Offset of the currently displayed element relative to the start position of the **\<Swiper>** along the main axis. Unit: vp<br>Default value: **0**|
| targetOffset | number | Offset of the target element relative to the start position of the **\<Swiper>** along the main axis. Unit: vp<br>Default value: **0**|
| velocity | number | Hands-off velocity at the beginning of the animation. Unit: vp/s<br>Default value: **0**|
......@@ -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,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>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.<br>**builder**: content of the sheet. Mandatory.<br> **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,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | Binds a sheet to the component, which can be displayed when the component is touched.<br>**isShow**: whether to display the sheet. Mandatory.<br>**builder**: content of the sheet. Mandatory.<br> **options**: options of the sheet. Optional.|
## SheetStyle<sup>10+</sup>
## 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.<br>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.|
## SheetSize<sup>10+</sup>
## 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%')
......
......@@ -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.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.<br>Default value: **FontStyle.Normal**<br>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**.<br>Default value: **FontWeight.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontFamily | string \| [Resource](ts-types.md#resource) | Font family.<br> Default value: **'HarmonyOS Sans'**. Currently, only the default font is supported.<br>Since API version 9, this API is supported in ArkTS widgets.|
| Name | Type | Description |
| ---------- | ---------------------------------------- | ---------------------------------------- |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Font color.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Font style.<br>Default value: **FontStyle.Normal**<br>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**.<br>Default value: **FontWeight.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.|
| fontFamily | string \| [Resource](ts-types.md#resource) | Font family.<br> Default value: **'HarmonyOS Sans'**. Currently, only the default font is supported.<br>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.<br>Since API version 9, this API is supported in ArkTS widgets.|
| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>}<br>Since API version 9, this API is supported in ArkTS widgets.|
......
......@@ -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.
......
......@@ -2,12 +2,6 @@
The **\<form>** component allows the content in [\<Input>](../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 \<form> Component
Create a **\<form>** component in the .hml file under **pages/index**.
......
......@@ -3,11 +3,6 @@
When multiple steps are required to complete a task, you can use the **\<stepper>** 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 \<stepper> Component
Create a **\<stepper>** component in the .hml file under **pages/index**.
......
......@@ -5,9 +5,8 @@ The **&lt;svg&gt;** 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 **&lt;svg&gt;** parent component or **&lt;svg&gt;** component. Otherwise, the component is not drawn.
> The width and height must be defined for the **&lt;svg&gt;** parent component or **&lt;svg&gt;** component. Otherwise, the component is not drawn.
## Creating an &lt;svg&gt; Component
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册