提交 e5acc65c 编写于 作者: E ester.zhou

Update docs (16747)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 08279267
...@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| min | number \| string | No| Minimum size of the **\<Blank>** component in the container along the main axis.<br>Default value: **0**| | min | number \| string | No| Minimum size of the **\<Blank>** component in the container along the main axis.<br>Default value: **0**<br>**NOTE**<br>This parameter cannot be set in percentage. If the value is negative, the default value is used. If the minimum size is larger than the available space of the container, it is used as the component size, and the component extends beyond the container.|
## Attributes ## Attributes
...@@ -30,10 +30,14 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -30,10 +30,14 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.<br>Since API version 9, this API is supported in ArkTS widgets.| | color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.<br>Default value: **Color.Transparent**<br>Since API version 9, this API is supported in ArkTS widgets. |
## Events
The [universal events](ts-universal-events-click.md) are supported.
## Example ## Example
### Example 1 ### Example 1
The sample below shows how the **\<Blank>** component fills the empty spaces in the container in landscape and portrait modes. The sample below shows how the **\<Blank>** component fills the empty spaces in the container in landscape and portrait modes.
```ts ```ts
......
...@@ -25,8 +25,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -25,8 +25,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| ----------- | ---------- | ------------------ | | ----------- | ---------- | ------------------ |
| vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| | vertical | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.<br>Since API version 9, this API is supported in ArkTS widgets.| | color | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.<br>Default value: **'\#33182431'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute cannot be set to a percentage.| | strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute cannot be set to a percentage. The priority of this attribute is lower than that of the universal attribute [height](ts-universal-attributes-size.md). If the value of this attribute is greater than that of the universal attribute, cropping is performed based on the universal attribute settings.|
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.| | lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.|
......
...@@ -9,7 +9,10 @@ ...@@ -9,7 +9,10 @@
## Child Components ## Child Components
Supported > **NOTE**
>
> - Supported types of child components: built-in components and custom components, 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.
> - Number of child components: multiple.
## APIs ## APIs
...@@ -21,7 +24,11 @@ NavDestination() ...@@ -21,7 +24,11 @@ NavDestination()
In addition to the [backgroundColor](ts-universal-attributes-background.md) attribute, the following attributes are supported. In addition to the [backgroundColor](ts-universal-attributes-background.md) attribute, the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| -------------- | ---------------------------------------- | ---------------------------------------- | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| title | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](ts-basic-components-navigation.md#navigationcommontitle) \| [NavigationCustomTitle](ts-basic-components-navigation.md##navigationcustomtitle) | Page title. | | title | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](ts-basic-components-navigation.md#navigationcommontitle) \| [NavigationCustomTitle](ts-basic-components-navigation.md##navigationcustomtitle) | 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 (...).|
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.| | hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
## Events
The [universal events](ts-universal-events-click.md) are supported.
...@@ -23,86 +23,85 @@ Navigation() ...@@ -23,86 +23,85 @@ Navigation()
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | 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. | | 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. 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. 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. | | 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**| | 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.<br>**items**: items on the toolbar. | | 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.| | 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.| | 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.|The Back button in the title bar of the **\<NavDestination>** component cannot be hidden.| | 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**.|
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **200vp**| | 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**| | 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**| | 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.| | 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**.| | hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
## NavigationMenuItem ## NavigationMenuItem
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | ------------------------------ | | ------ | ----------------------- | ---- | --------------- |
| value | string | Yes | Text of a menu item. | | value | string | Yes | Text of a menu item. |
| icon | string | No | Icon path of a menu item.| | icon | string | No | Icon path of a menu item.|
| action | () =&gt; void | No | Callback invoked when a menu item is selected. | | action | () =&gt; void | No | Callback invoked when a menu item is selected. |
## object ## object
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | ------------------------------ | | ------ | ----------------------- | ---- | --------------- |
| value | string | Yes | Text of an option on the toolbar. | | value | string | Yes | Text of an option on the toolbar. |
| icon | string | No | Icon path of an option on the toolbar.| | icon | string | No | Icon path of an option on the toolbar.|
| action | () =&gt; void | No | Callback invoked when an option is selected. | | action | () =&gt; void | No | Callback invoked when an option is selected. |
## NavigationTitleMode ## NavigationTitleMode
| Name | Description | | Name | Description |
| ---- | ---------------------------------------- | | ---- | ---------------------------------------- |
| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.| | Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.|
| Mini | The title is fixed at mini mode. | | Mini | The title is fixed at mini mode. |
| Full | The title is fixed at full mode. | | Full | The title is fixed at full mode. |
## NavigationCommonTitle ## NavigationCommonTitle
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | --------- | ---- | -------- | | ---- | ------ | ---- | ------ |
| main | string | Yes| Main title.| | main | string | Yes | Main title.|
| sub | string | Yes| Subtitle.| | sub | string | Yes | Subtitle.|
## NavigationCustomTitle ## NavigationCustomTitle
| Name | Type | Mandatory| Description | | Name | Type | Mandatory | Description |
| ------ | ----------------------- | ---- | ------------------------------ | | ------- | ---------------------------------------- | ---- | -------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes| Content of the title bar.| | builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Content of the title bar.|
| height | [TitleHeight](#titleheight) \| [Length](ts-types.md#length) | Yes| Height of the title bar.| | height | [TitleHeight](#titleheight) \| [Length](ts-types.md#length) | Yes | Height of the title bar.|
## NavBarPosition ## NavBarPosition
| Name| Description | | Name | Description |
| ---- | ---------------------------------------- | | ----- | ---------------- |
| Start | When two columns are displayed, the main column is at the start of the main axis.| | Start | When two columns are displayed, the main column is at the start of the main axis.|
| End | When two columns are displayed, the main column is at the end of the main axis. | | End | When two columns are displayed, the main column is at the end of the main axis.|
## NavigationMode ## NavigationMode
| Name| Description | | Name | Description |
| ---- | ---------------------------------------- | | ----- | ---------------------------------------- |
| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages.| | Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages. |
| Split | The navigation bar and content area are displayed in different columns.| | Split | The navigation bar and content area are displayed in different columns. |
| Auto | When the window width is greater than or equal to 520 vp, Split mode is used. Otherwise, the Stack mode is used.| | Auto | When the window width is greater than or equal to 520 vp, Split mode is used. Otherwise, the Stack mode is used.|
## TitleHeight ## TitleHeight
| Name| Description | | Name | Description |
| ---- | ---------------------------------------- | | ----------- | -------------------------- |
| MainOnly | Recommended height (56 vp) of the title bar when only the main title is available.| | MainOnly | Recommended height (56 vp) of the title bar when only the main title is available. |
| MainWithSub | Recommended height (82 vp) of the title bar when both the main title and subtitle exist.| | MainWithSub | Recommended height (82 vp) of the title bar when both the main title and subtitle exist.|
> **NOTE** > **NOTE**
>
> Among the scrollable components, only **\<List>** is supported. > Among the scrollable components, only **\<List>** is supported.
...@@ -150,7 +149,7 @@ struct NavigationExample { ...@@ -150,7 +149,7 @@ struct NavigationExample {
.fontSize(14) .fontSize(14)
.lineHeight(19) .lineHeight(19)
.opacity(0.4) .opacity(0.4)
.margin({ top: 2 }) .margin({ top: 2, bottom: 20 })
}.alignItems(HorizontalAlign.Start) }.alignItems(HorizontalAlign.Start)
} }
...@@ -195,16 +194,16 @@ struct NavigationExample { ...@@ -195,16 +194,16 @@ struct NavigationExample {
Column() { Column() {
Navigation() { Navigation() {
TextInput({ placeholder: 'search...' }) TextInput({ placeholder: 'search...' })
.width(336) .width('90%')
.height(40) .height(40)
.backgroundColor('#FFFFFF') .backgroundColor('#FFFFFF')
.margin({ top: 8, left: 12 }) .margin({ top: 8 })
List({ space: 12, initialIndex: 0 }) { List({ space: 12, initialIndex: 0 }) {
ForEach(this.arr, (item) => { ForEach(this.arr, (item) => {
ListItem() { ListItem() {
Text('' + item) Text('' + item)
.width(336) .width('90%')
.height(72) .height(72)
.backgroundColor('#FFFFFF') .backgroundColor('#FFFFFF')
.borderRadius(24) .borderRadius(24)
...@@ -216,7 +215,7 @@ struct NavigationExample { ...@@ -216,7 +215,7 @@ struct NavigationExample {
} }
.height(324) .height(324)
.width('100%') .width('100%')
.margin({ top: 12, left: 12 }) .margin({ top: 12, left: '10%' })
} }
.title(this.NavigationTitle) .title(this.NavigationTitle)
.menus(this.NavigationMenus) .menus(this.NavigationMenus)
......
...@@ -31,9 +31,16 @@ Creates a **PluginComponent** to display the UI provided by an external applicat ...@@ -31,9 +31,16 @@ Creates a **PluginComponent** to display the UI provided by an external applicat
| source | string | Component template name. | | source | string | Component template name. |
| bundleName | string | Bundle name of the provider ability.| | bundleName | string | Bundle name of the provider ability.|
## Attributes
The universal attribute [size](ts-universal-attributes-size.md) is supported and must be set.
## Events ## Events
Only the [gesture event](ts-gesture-settings.md) can be distributed to the provider page and processed inside the provider page.
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Description | | Name | Description |
| ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| onComplete(callback: () =&gt; void) | Triggered when the component loading is complete. | | onComplete(callback: () =&gt; void) | Triggered when the component loading is complete. |
......
...@@ -55,13 +55,18 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -55,13 +55,18 @@ Since API version 9, this API is supported in ArkTS widgets.
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| value | number | 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. Invalid values do not take effect.<br>Since API version 9, this API is supported in ArkTS widgets.| | value | number | 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. Invalid values do not take effect.<br>Since API version 9, this API is supported in ArkTS widgets.|
| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Since API version 9, this API is supported in ArkTS widgets.| | color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Default value: **'\#ff007dff'**<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Since API version 9, this API is supported in ArkTS widgets.| | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Default value: **'\#19182431'**<br><br>Since API version 9, this API is supported in ArkTS widgets.|
| style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.<br>Default value: **4.0Vp**<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>Default value: **120**<br>- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.<br>Default value: **2.0Vp**<br>Since API version 9, this API is supported in ArkTS widgets.| | style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.<br>Default value: **4.0Vp**<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>Default value: **120**<br>- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.<br>Default value: **2.0Vp**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Events
The [universal events](ts-universal-events-click.md) are supported.
## Example ## Example
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册