Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“f4e7a47381a78a7bb56e14db68433a5eab39d633”上不存在“cmake/git@gitcode.net:s920243400/PaddleDetection.git”
提交 38cd4d77 编写于 作者: E ester.zhou
浏览文件
操作

update docs (0827) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 eed26642
显示空白变更内容
内联 并排
Showing with 108 addition and 92 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 38cd4d77
# RichText
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<RichText>** component parses and displays HTML text.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components
None
Not supported
## APIs
RichText\(content:string\)
RichText(content:string)
- Parameters
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| content | string | Yes| - | String in HTML format.|
| Name| Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| content | string | Yes| - | Text string in HTML format. |
## Events
| Name| Description|
| Name | Description|
| -------- | -------- |
| onStart() => void | Triggered when web page loading starts.|
| onComplete() => void | Triggered when web page loading is completed.|
| onStart(callback: () => void) => void | Triggered when web page loading starts. |
| onComplete(callback: () => void) => void | Triggered when web page loading is completed. |
## Supported Tags
| Name| Description| Example|
| Name | Description | Example |
| -------- | -------- | -------- |
| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading.| \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2>|
| \<p>\</p> | Defines a paragraph.| \<p>This is a paragraph\</p>|
| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.| \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
| \<i>\</i> | Displays text in italic style.| \<i>This is in italic style\</i> |
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\<u>\<p> |
| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading. | \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2> |
| \<p>\</p> | Defines a paragraph. | \<p>This is a paragraph\</p> |
| \<br/> | Inserts a newline character. | \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line. | \<p>This is a paragraph\</p>\<hr/>\<p>This is a paragraph\</p> |
| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time. | \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
| \<i>\</i> | Displays text in italic style. | \<i>This is in italic style\</i> |
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink. | \<p>\<u>This is an underlined paragraph\<u>\<p> |
| \<style>\</style> | Used to embed CSS within an HTML document. | \<style>h1{color:red;}p{color:blue;}\</style> |
| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**. | \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
## Example
```
You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
```ts
// xxx.ets
@Entry
@Component
struct RichTextExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ 38cd4d77
# XComponent
> **NOTE**<br>
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<XComponent>** can accept and display the EGL/OpenGLES and media data input.
The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data input.
## Required Permissions
......@@ -15,24 +16,36 @@
## APIs
XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
- Name
| Name | Type | Mandatory | Description |
| ----------- | --------------------------------------- | --------- | ------------------------------------------------------------ |
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
| type | string | Yes | Type of the component. The options are as follows:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **component**: The content of this component is displayed after having been combined with that of other components. |
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
| controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. |
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters.|
| type | string | Yes | Type of the component. The options are as follows:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **component**: The content of this component is displayed after having been combined with that of other components.|
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer.|
| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component.|
## Events
| Name | Description |
| ------------------------------- | ------------------------ |
| onLoad(context?: object) => void | Triggered when the plug-in is loaded. |
| onDestroy() => void | Triggered when the plug-in is destroyed. |
### onLoad
onLoad(callback: (event?: object) => void )
Triggered when the plug-in is loaded.
**Parameters**
| Name | Type | Mandatory | Description |
| ------------- | ------ | ---- | ----------------------- |
| event | object | No | Context of the **\<XComponent>** object. The APIs contained in the context are defined at the C++ layer by developers.|
### onDestroy
onDestroy(event: () => void )
Triggered when the plug-in is destroyed.
## XComponentController
......@@ -50,11 +63,13 @@ getXComponentSurfaceId(): string
Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used for @ohos interfaces, such as camera-related interfaces.
- Return value
**System API**: This is a system API.
**Return value**
| Type | Description |
| ------ | --------------------------- |
| string | ID of the surface held by the **\<XComponent>**. |
| Type | Description |
| ------ | ----------------------- |
| string | ID of the surface held by the **\<XComponent>**.|
### setXComponentSurfaceSize
......@@ -62,12 +77,14 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
Sets the width and height of the surface held by the **\<XComponent>**.
- Parameters
**System API**: This is a system API.
| Name | Type | Mandatory | Default Value | Description |
| ------------- | -------- | ---- | ------ | ----------------------------- |
| surfaceWidth | number | Yes | - | Width of the surface held by the **\<XComponent>**. |
| surfaceHeight | number | Yes | - | Height of the surface held by the **\<XComponent>**. |
**Parameters**
| Name | Type | Mandatory | Description |
| ------------- | ------ | ---- | ----------------------- |
| surfaceWidth | number | Yes | Width of the surface held by the **\<XComponent>**.|
| surfaceHeight | number | Yes | Height of the surface held by the **\<XComponent>**.|
### getXComponentContext
......@@ -75,16 +92,18 @@ getXComponentContext(): Object
Obtains the context of an **\<XComponent>** object.
- Return value
**Return value**
| Type | Description |
| ------ | ------------------------------------------------------------ |
| Object | Context of an **\<XComponent>** object. The APIs contained in the context are defined by developers. |
| Type | Description |
| ------ | ---------------------------------------- |
| Object | Context of the **\<XComponent>** object. The APIs contained in the context are defined by developers.|
## Example
Provide a surface-type **\<XComponent>** to support capabilities such as camera preview.
You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
```ts
// xxx.ets
import camera from '@ohos.multimedia.camera';
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 38cd4d77
# Popup Control
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -17,44 +18,34 @@ None
| -------- | -------- | -------- | -------- |
| bindPopup | show: boolean,<br/>popup: PopupOptions \| CustomPopupOptions | - | Settings of the popup bound to a component.<br/>**show**: whether to display the popup on the creation page by default. The default value is **false**.<br/>**popup**: parameters of the current popup. |
## PopupOptions
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| message | string | Yes | - | Content of the popup message. |
| placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
| primaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
| secondaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event.<br>**isVisible**: visibility of the popup. |
## CustomPopupOptions<sup>8+</sup>
| Name | Type | Mandatory | Default Value | Description |
| ------------- | ---------------------------------------------- | ---- | ---------------- | ------------------------------------------------------------ |
| builder | () =&gt; any | Yes | - | Builder of the tooltip content. |
| placement | [Placement](ts-appendix-enums.md) | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
| maskColor | [Color](ts-appendix-enums.md#color) | No | - | Color of the tooltip mask. |
| popupColor | [Color](ts-appendix-enums.md#color) | No | - | Color of the tooltip. |
| enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. |
| autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. |
| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- PopupOptions attributes
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| message | string | Yes | - | Content of the popup message. |
| placementOnTop | boolean | No | false | Whether to display the popup above the component. The default value is **false**. |
| primaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | First button.<br/>**value**: text of the primary button in the popup.<br/>**action**: callback function for clicking the primary button. |
| secondaryButton | {<br/>value: string,<br/>action: () =&gt; void<br/>} | No | - | Second button.<br/>**value**: text of the secondary button in the popup.<br/>**action**: callback function for clicking the secondary button. |
| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- CustomPopupOptions<sup>8+</sup>
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| builder | () =&gt; any | Yes | - | Builder of the tooltip content. |
| placement | Placement | No | Placement.Bottom | Preferred position of the tooltip component. If the set position is insufficient for holding the component, it will be automatically adjusted. |
| maskColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip mask. |
| popupColor | [Color](../../ui/ts-types.md) | No | - | Color of the tooltip. |
| enableArrow | boolean | No | true | Whether to display arrows. Arrows are displayed only for tooltips in the up and down directions. |
| autoCancel | boolean | No | true | Whether to automatically close the tooltip when an operation is performed on the page. |
| onStateChange | (isVisible: boolean) =&gt; void | No | - | Callback for the popup status change event. The parameter **isVisible** indicates the visibility of the popup. |
- Placement<sup>8+</sup> enums
| Name | Description |
| -------- | -------- |
| Left | The tooltip is on the left of the component. |
| Right | The tooltip is on the right of the component. |
| Top | The tooltip is on the top of the component. |
| Bottom | The tooltip is at the bottom of the component. |
| TopLeft | The tooltip is in the upper left corner of the component. |
| TopRight | The tooltip is in the upper right corner of the component. |
| BottomLeft | The tooltip is in the lower left corner of the component. |
| BottomRight | The tooltip is in the lower right corner of the component. |
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct PopupExample {
......@@ -65,7 +56,7 @@ struct PopupExample {
@Builder popupBuilder() {
Row({ space: 2 }) {
Image('/resource/ic_public_thumbsup.svg').width(24).height(24).margin({ left: -5 })
Text('Custom Popup').fontSize(12)
Text('Custom Popup').fontSize(10)
}.width(100).height(50).backgroundColor(Color.White)
}
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
浏览文件 @ 38cd4d77
# Z-order Control
The **zIndex** attribute sets the z-order of a component in the stacking context.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -13,15 +15,16 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level. |
| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger value indicates a higher display level. |
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ZIndexExample {
......@@ -38,7 +41,7 @@ struct ZIndexExample {
Text('third child, zIndex(1)')
.size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart)
.zIndex(1)
}
}.width('100%').height(200)
}.width('100%').height(200)
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或