Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 8b2ee890 编写于 作者: L LiAn 提交者： Gitee
浏览文件
操作

Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into OpenHarmony-3.1-Release 

Signed-off-by: NLiAn <lian15@huawei.com>
上级 1c859342 b0f508df
展开全部 隐藏空白更改
内联 并排
Showing with 3293 addition and 2444 deletion
en/application-dev/Readme-EN.md
浏览文件 @ 8b2ee890
......@@ -15,6 +15,7 @@
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md)
- [Resource File Categories](quick-start/basic-resource-file-categories.md)
- [SysCap](quick-start/syscap.md)
- Development
- [Ability Development](ability/Readme-EN.md)
......@@ -42,6 +43,9 @@
- [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
- APIs
- [JS and TS APIs](reference/apis/Readme-EN.md)
- [JS and TS APIs](reference/apis/Readme-EN.md)
- Native APIs
- [Standard Libraries](reference/native-lib/third_party_libc/musl.md)
- [Node_API](reference/native-lib/third_party_napi/napi.md)
- Contribution
- [How to Contribute](../contribute/documentation-contribution.md)
en/application-dev/database/database-relational-guidelines.md
浏览文件 @ 8b2ee890
......@@ -2,7 +2,7 @@
## When to Use
A relational database (RDB) store allows you to operate local data with or without native SQL statements based on SQLite.
A relational database (RDB) store allows you to manage local data with or without native SQL statements based on SQLite.
## Available APIs
......@@ -21,11 +21,11 @@ The table below describes the APIs available for creating and deleting an RDB st
### Managing Data in an RDB Store
The RDB provides APIs for inserting, deleting, updating, and querying data in the local RDB store.
The **RDB** module provides APIs for inserting, deleting, updating, and querying data in a local RDB store.
- **Inserting Data**
The RDB provides APIs for inserting data through a **ValuesBucket** in a data table. If the data is inserted, the row ID of the data inserted will be returned; otherwise, **-1** will be returned.
The **RDB** module provides APIs for inserting data through a **ValuesBucket** in a data table. If the data is inserted, the row ID of the data inserted will be returned; otherwise, **-1** will be returned.
**Table 2** API for inserting data
......@@ -41,7 +41,7 @@ The RDB provides APIs for inserting, deleting, updating, and querying data in th
| Class| API| Description|
| -------- | -------- | -------- |
| RdbStore | update(values:ValuesBucket,rdbPredicates:RdbPredicates):Promise\<number> | Updates data based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **values**: data to update, which is stored in **ValuesBucket**.<br>- **rdbPredicates**: conditions for updating data. |
| RdbStore | update(values:ValuesBucket,rdbPredicates:RdbPredicates):Promise\<number> | Updates data based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **values**: data to update, which is stored in **ValuesBucket**.<br>- **rdbPredicates**: conditions for updating data.|
- **Deleting Data**
......@@ -51,7 +51,7 @@ The RDB provides APIs for inserting, deleting, updating, and querying data in th
| Class| API| Description|
| -------- | -------- | -------- |
| RdbStore | delete(rdbPredicates:RdbPredicates):Promise\<number> | Deletes data from the RDB store based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **rdbPredicates**: conditions for deleting data. |
| RdbStore | delete(rdbPredicates:RdbPredicates):Promise\<number> | Deletes data from the RDB store based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **rdbPredicates**: conditions for deleting data.|
- **Querying data**
......@@ -69,19 +69,19 @@ The RDB provides APIs for inserting, deleting, updating, and querying data in th
### Using Predicates
The RDB provides **RdbPredicates** for you to set database operation conditions.
The **RDB** module provides **RdbPredicates** for you to set database operation conditions.
The following lists common predicates. For more information about predicates, see [**RdbPredicates**](../reference/apis/js-apis-data-rdb.md#rdbpredicates).
The table below lists common predicates. For more information about predicates, see [**RdbPredicates**](../reference/apis/js-apis-data-rdb.md#rdbpredicates).
**Table 6** APIs for using RDB store predicates
| Class| API| Description|
| -------- | -------- | -------- |
| RdbPredicates | equalTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** to match the field with data type **ValueType** and value equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object that matches the specified field. |
| RdbPredicates | notEqualTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** to match the field with data type **ValueType** and value not equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object that matches the specified field. |
| RdbPredicates | or():RdbPredicates | Adds the OR condition to the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** with the OR condition.|
| RdbPredicates | and():RdbPredicates | Adds the AND condition to the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** with the AND condition.|
| RdbPredicates | contains(field:string,value:string):RdbPredicats | Sets an **RdbPredicates** to match a string that contains the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object that matches the specified field. |
| RdbPredicates | equalTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** object to match the field with data type **ValueType** and value equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object created.|
| RdbPredicates | notEqualTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** object to match the field with data type **ValueType** and value not equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object created.|
| RdbPredicates | or():RdbPredicates | Adds the OR condition to the **RdbPredicates** object.<br>- **RdbPredicates**: **RdbPredicates** with the OR condition.|
| RdbPredicates | and():RdbPredicates | Adds the AND condition to the **RdbPredicates** object.<br>- **RdbPredicates**: **RdbPredicates** with the AND condition.|
| RdbPredicates | contains(field:string,value:string):RdbPredicats | Sets an **RdbPredicates** object to match a string that contains the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object created.|
### Using the Result Set
......
en/application-dev/napi/Readme-EN.md
浏览文件 @ 8b2ee890
......@@ -2,6 +2,7 @@
- [Using Native APIs in Application Projects](napi-guidelines.md)
- [Drawing Development](drawing-guidelines.md)
- [Native Window Development](native_window-guidelines.md)
- [Raw File Development](rawfile-guidelines.md)
- [Native Window Development](native-window-guidelines.md)
en/application-dev/reference/apis/js-apis-timer.md
浏览文件 @ 8b2ee890
# Timer
The **Timer** module provides basic timer capabilities. You can use the APIs of this module to execute functions at the specified time.
> **NOTE**
>
> The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## setTimeout
......@@ -7,6 +12,8 @@ setTimeout(handler[,delay[,…args]]): number
Sets a timer for the system to call a function after the timer goes off.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -23,15 +30,15 @@ Sets a timer for the system to call a function after the timer goes off.
**Example**
```js
export default {
setTimeOut() {
var timeoutID = setTimeout(function() {
console.log('delay 1s');
}, 1000);
```js
export default {
setTimeOut() {
var timeoutID = setTimeout(function() {
console.log('delay 1s');
}, 1000);
}
}
}
```
```
## clearTimeout
......@@ -40,6 +47,8 @@ clearTimeout(timeoutID: number): void
Cancels the timer created via **setTimeout()**.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -48,16 +57,16 @@ Cancels the timer created via **setTimeout()**.
**Example**
```js
export default {
clearTimeOut() {
var timeoutID = setTimeout(function() {
console.log('do after 1s delay.');
}, 1000);
clearTimeout(timeoutID);
```js
export default {
clearTimeOut() {
var timeoutID = setTimeout(function() {
console.log('do after 1s delay.');
}, 1000);
clearTimeout(timeoutID);
}
}
}
```
```
## setInterval
......@@ -66,6 +75,8 @@ setInterval(handler[, delay[, ...args]]): number
Sets a repeating timer for the system to repeatedly call a function at a fixed interval.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -82,15 +93,15 @@ Sets a repeating timer for the system to repeatedly call a function at a fixed i
**Example**
```js
export default {
setInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
```js
export default {
setInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
}
}
}
```
```
## clearInterval
......@@ -99,6 +110,8 @@ clearInterval(intervalID: number): void
Cancels the repeating timer set via **setInterval()**.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -107,13 +120,13 @@ Cancels the repeating timer set via **setInterval()**.
**Example**
```js
export default {
clearInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
clearInterval(intervalID);
```js
export default {
clearInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
clearInterval(intervalID);
}
}
}
```
\ No newline at end of file
```
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 8b2ee890
# Search
The **\<Search>** component provides an input area for users to search.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Search>** component provides an input area for users to search.
## Required Permissions
None
......@@ -18,34 +18,34 @@ Not supported
Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | No| - | Text input in the search text box. |
| placeholder | string | No | - | Text displayed when there is no input. |
| icon | string | No| - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png. |
| controller | SearchController | No| - | Controller. |
| Name | Type | Mandatory | Default Value | Description |
| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | No | - | Text input in the search text box. |
| placeholder | string | No | - | Text displayed when there is no input. |
| icon | string | No | - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
| controller | SearchController | No | - | Controller. |
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button. |
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. |
| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. |
| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. |
| Name | Type | Default Value | Description |
| ----------------------- | ---------------------------------------- | ---- | --------------------- |
| searchButton | string | – | Text on the search button located next to the search text box. By default, there is no search button.|
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Placeholder text color. |
| placeholderFont | [Font](ts-types.md#font) | - | Placeholder text style. |
| textFont | [Font](ts-types.md#font) | - | Text font for the search text box. |
## Events
| Name | Description |
| -------- | -------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> - **value**: current text input. |
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> - **value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> - **value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> - **value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> - **value**: text pasted. |
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.<br> -**value**: current text input.|
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. |
## SearchController
......@@ -61,11 +61,11 @@ caretPosition(value: number): void
Sets the position of the caret.
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------------- |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. |
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | Yes | - | Length from the start of the character string to the position where the caret is located.|
......@@ -76,29 +76,30 @@ Sets the position of the caret.
@Entry
@Component
struct SearchExample {
@State changevalue: string = ''
@State submitvalue: string = ''
@State changeValue: string = ''
@State submitValue: string = ''
controller: SearchController = new SearchController()
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text(this.submitvalue)
Text(this.changevalue)
Search({value: '', placeholder: 'Type to search', controller: this.controller})
Text(this.submitValue)
Text(this.changeValue)
Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller})
.searchButton('Search')
.width(400)
.height(35)
.backgroundColor(Color.White)
.placeholderColor(Color.Grey)
.placeholderFont({ size: 50, weight: 10, family: 'serif', style: FontStyle.Normal })
.placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal })
.onSubmit((value: string) => {
this.submitvalue = value
this.submitValue = value
})
.onChange((value: string) => {
this.changevalue = value
this.changeValue = value
})
.margin({ top: 30 })
.margin({ top: 30, left:10, right:10 })
}
}
}
```
![search](figures/search.png)
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 8b2ee890
......@@ -33,23 +33,23 @@ Swiper(value:{controller?: SwiperController})
[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.<br>Default value: **0** |
| autoPlay | boolean | Whether to enable automatic playback for child component switching. If this attribute is **true**, the navigation dots indicator does not take effect.<br>Default value: **false** |
| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** |
| indicator | boolean | Whether to enable the navigation dots indicator.<br>Default value: **true** |
| loop | boolean | Whether to enable loop playback.<br>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.<br>Default value: **true**|
| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** |
| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** |
| itemSpace | Length | Space between child components.<br>Default value: **0** |
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md#curve-enums). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?:&nbsp;Length,<br>top?:&nbsp;Length,<br>right?:&nbsp;Length,<br>bottom?:&nbsp;Length,<br>size?:&nbsp;Length,<br>color?:&nbsp;Color,<br>selectedColor?:&nbsp;Color<br>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display.<br>Default value: **1** |
| effectMode<sup>8+</sup> | EdgeEffect | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
| Name | Type | Default Value | Description |
| --------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | 0 | Index of the child component currently displayed in the container. |
| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the navigation dots indicator does not take effect. |
| interval | number | 3000 | Interval for automatic playback, in ms. |
| indicator | boolean | true | Whether to enable the navigation dots indicator. |
| loop | boolean | true | Whether to enable loop playback.<br>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. |
| duration | number | 400 | Duration of the animation for switching child components, in ms. |
| vertical | boolean | false | Whether vertical swiping is used. |
| itemSpace | number \| string | 0 | Space between child components. |
| displayMode | SwiperDisplayMode | SwiperDisplayMode.Stretch | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| displayCount<sup>8+</sup> | number \| string | 1 | Number of elements to display. |
| effectMode<sup>8+</sup> | EdgeEffect | EdgeEffect.Spring | Swipe effect. For details, see **EdgeEffect**. |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Curve.Ease | 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](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module. |
| indicatorStyle<sup>8+</sup> | {<br/>left?: [Length](ts-types.md#length),<br/>top?: [Length](ts-types.md#length),<br/>right?: [Length](ts-types.md#length),<br/>bottom?: [Length](ts-types.md#length),<br/>size?: [Length](ts-types.md#length),<br/>mask?: boolean,<br/>color?: [ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?: [ResourceColor](ts-types.md#resourcecolor8)<br/>} | - | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
## SwiperDisplayMode
......@@ -98,7 +98,7 @@ Stops this animation.
### onChange
onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void
onChange( index: number) =&gt; void
Triggered when the index of the currently displayed component changes.
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 8b2ee890
# Image Effect Configuration
# Image Effects
Image effects include background blur, content blur, grayscale, and much more.
> **NOTE**
>
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,28 +17,30 @@ None
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| backdropBlur | number | - | Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
| shadow | {<br/>radius: number,<br/>color?: Color,<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
| blur | number | - | Adds the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| backdropBlur | number | - | Adds the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
| shadow | {<br/>radius: number,<br/>color?: Color \| string \| [Resource](../../ui/ts-types.md#resource-type),<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend <sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| colorBlend<sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
| hueRotate | number \| string | '0deg' |Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
| hueRotate | number \| string | '0deg' | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
## 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 ImageEffectsExample {
build() {
Column({space: 10}) {
Column({space: 10}) {
// Blur the font.
Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
Text('text').blur(3).width('90%').height(40)
......
en/application-dev/reference/native-lib/Readme-EN.md
浏览文件 @ 8b2ee890
# Standard Libraries Supported by Native APIs
- [Standard Libraries](third_party_libc/musl.md)
- [Node_API](third_party_napi/napi.md)
- [libuv](third_party_libuv/libuv.md)
- [Native API Symbols Not Exported](third_party_libc/musl-peculiar-symbol.md)
\ No newline at end of file
- [Standard Libraries](third_party_libc/musl.md)
- Appendix
- [Native API Symbols Not Exported](third_party_libc/musl-peculiar-symbol.md)
- [EGL Symbols Exported from Native APIs](third_party_opengl/egl-symbol.md)
- [OpenGL ES 3.0 Symbols Exported from Native APIs](third_party_opengl/openglesv3-symbol.md)
\ No newline at end of file
en/application-dev/ui/Readme-EN.md
浏览文件 @ 8b2ee890
# UI Development
- [ArkUI Overview](arkui-overview.md)
- TypeScript-based Declarative Development Paradigm
- [Overview](ui-ts-overview.md)
- Framework Overview
- File Organization
- [Directory Structure](ts-framework-directory.md)
- [Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)
- ["js" Tag](ts-framework-js-tag.md)
- Resource Management
- [Resource File Categories](ui-ts-basic-resource-file-categories.md)
- [Accessing Resources](ts-resource-access.md)
- [Pixel Units](ts-pixel-units.md)
- Declarative Syntax
- [Overview](ts-syntax-intro.md)
- General UI Description Specifications
- [Basic Concepts](ts-general-ui-concepts.md)
- Declarative UI Description Specifications
- [Configuration Without Parameters](ts-parameterless-configuration.md)
- [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
- [Attribute Configuration](ts-attribution-configuration.md)
- [Event Configuration](ts-event-configuration.md)
- [Child Component Configuration](ts-child-component-configuration.md)
- Componentization
- [@Component](ts-component-based-component.md)
- [@Entry](ts-component-based-entry.md)
- [@Preview](ts-component-based-preview.md)
- [@Builder](ts-component-based-builder.md)
- [@Extend](ts-component-based-extend.md)
- [@CustomDialog](ts-component-based-customdialog.md)
- [@Styles](ts-component-based-styles.md)
- About UI State Management
- [Basic Concepts](ts-ui-state-mgmt-concepts.md)
- Managing Component States
- [@State](ts-component-states-state.md)
- [@Prop](ts-component-states-prop.md)
- [@Link](ts-component-states-link.md)
- Managing Application States
- [AppStorage](ts-application-states-appstorage.md)
- [PersistentStorage](ts-application-states-apis-persistentstorage.md)
- [Environment](ts-application-states-apis-environment.md)
- Managing Other States
- [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
- [@Consume and @Provide](ts-other-states-consume-provide.md)
- [@Watch](ts-other-states-watch.md)
- About Rendering Control Syntax
- [if/else](ts-rending-control-syntax-if-else.md)
- [ForEach](ts-rending-control-syntax-foreach.md)
- [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
- About @Component
- [build Function](ts-function-build.md)
- [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
- [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
- [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
- [About Syntactic Sugar](ts-syntactic-sugar.md)
- Common Component Development Guidelines
- [Button](ui-ts-basic-components-button.md)
- [Web](ui-ts-components-web.md)
- Common Layout Development Guidelines
- [Flex Layout](ui-ts-layout-flex.md)
- [Grid Layout](ui-ts-layout-grid-container.md)
- [Media Query](ui-ts-layout-mediaquery.md)
- Experiencing the Declarative UI
- [Creating a Declarative UI Project](ui-ts-creating-project.md)
- [Getting to Know Components](ui-ts-components.md)
- [Creating a Simple Page](ui-ts-creating-simple-page.md)
- Defining Page Layout and Connection
- [Building a Food Data Model](ui-ts-building-data-model.md)
- [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
- [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
- [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
- JavaScript-based Web-like Development Paradigm
- [Overview](ui-js-overview.md)
- Framework
......@@ -73,73 +142,3 @@
- [Animation Effect](ui-js-animate-dynamic-effects.md)
- [Animation Frame](ui-js-animate-frame.md)
- [Custom Components](ui-js-custom-components.md)
- TypeScript-based Declarative Development Paradigm
- [Overview](ui-ts-overview.md)
- Framework Overview
- File Organization
- [Directory Structure](ts-framework-directory.md)
- [Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)
- ["js" Tag](ts-framework-js-tag.md)
- Resource Management
- [Resource File Categories](ui-ts-basic-resource-file-categories.md)
- [Accessing Resources](ts-resource-access.md)
- [Pixel Units](ts-pixel-units.md)
- [Types](ts-types.md)
- Declarative Syntax
- [Overview](ts-syntax-intro.md)
- General UI Description Specifications
- [Basic Concepts](ts-general-ui-concepts.md)
- Declarative UI Description Specifications
- [Configuration Without Parameters](ts-parameterless-configuration.md)
- [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
- [Attribute Configuration](ts-attribution-configuration.md)
- [Event Configuration](ts-event-configuration.md)
- [Child Component Configuration](ts-child-component-configuration.md)
- Componentization
- [@Component](ts-component-based-component.md)
- [@Entry](ts-component-based-entry.md)
- [@Preview](ts-component-based-preview.md)
- [@Builder](ts-component-based-builder.md)
- [@Extend](ts-component-based-extend.md)
- [@CustomDialog](ts-component-based-customdialog.md)
- [@Styles](ts-component-based-styles.md)
- About UI State Management
- [Basic Concepts](ts-ui-state-mgmt-concepts.md)
- Managing Component States
- [@State](ts-component-states-state.md)
- [@Prop](ts-component-states-prop.md)
- [@Link](ts-component-states-link.md)
- Managing Application States
- [AppStorage](ts-application-states-appstorage.md)
- [PersistentStorage](ts-application-states-apis-persistentstorage.md)
- [Environment](ts-application-states-apis-environment.md)
- Managing Other States
- [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
- [@Consume and @Provide](ts-other-states-consume-provide.md)
- [@Watch](ts-other-states-watch.md)
- About Rendering Control Syntax
- [if/else](ts-rending-control-syntax-if-else.md)
- [ForEach](ts-rending-control-syntax-foreach.md)
- [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
- About @Component
- [build Function](ts-function-build.md)
- [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
- [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
- [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
- [About Syntactic Sugar](ts-syntactic-sugar.md)
- Common Component Development Guidelines
- [Button](ui-ts-basic-components-button.md)
- [Web](ui-ts-components-web.md)
- Common Layout Development Guidelines
- [Flex Layout](ui-ts-layout-flex.md)
- [Grid Layout](ui-ts-layout-grid-container.md)
- [Media Query](ui-ts-layout-mediaquery.md)
- Experiencing the Declarative UI
- [Creating a Declarative UI Project](ui-ts-creating-project.md)
- [Getting to Know Components](ui-ts-components.md)
- [Creating a Simple Page](ui-ts-creating-simple-page.md)
- Defining Page Layout and Connection
- [Building a Food Data Model](ui-ts-building-data-model.md)
- [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
- [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
- [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
en/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ 8b2ee890
......@@ -85,11 +85,11 @@ The following is an example:
```css
/* Page style xxx.css */
/\* Set the style for all <div> components. \*/
/* Set the style for all <div> components. */
div {
flex-direction: column;
}
/* Set the style for the component whose class is title. */
/* Set the style for the component whose class is title.*/
.title {
font-size: 30px;
}
......@@ -101,13 +101,13 @@ div {
.title, .content {
padding: 5px;
}
/\* Set the style for all texts of components whose class is container.\*/
/* Set the style for all texts of components whose class is container.*/
.container text {
color: \#007dff;
}
/\* Set the style for direct descendant texts of components whose class is container.\*/
/* Set the style for direct descendant texts of components whose class is container.*/
.container &gt; text {
color: \#fa2a2d;
color: #fa2a2d;
}
```
......@@ -128,7 +128,7 @@ When multiple selectors point to the same element, their priorities are as follo
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:focus:checked** selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
| Pseudo-class | Available Components | Description |
......
en/application-dev/ui/ts-application-states-appstorage.md
浏览文件 @ 8b2ee890
......@@ -21,7 +21,7 @@ By default, the attributes in the AppStorage are changeable. If needed, AppStora
| Set | key: string,<br/>newValue: T | void | Replaces the value of a saved key. |
| Link | key: string | @Link | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the AppStorage, and attribute changes made through the AppStorage will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, undefined is returned. |
| SetAndProp | propName: string,<br/>defaultValue: S | @Prop | Works in a way similar to the Prop API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Prop instance corresponding to the default value is created and returned. |
| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> The attribute value used in the prop method must be of a simple type. |
| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>**NOTE**<br/>The attribute value used in the prop method must be of a simple type. |
| SetOrCreate | key: string,<br/>newValue: T | boolean | If an attribute that has the same name as the specified key exists: replaces the value of the attribute and returns true when the attribute can be modified; retains the original value of the attribute and returns false otherwise.<br/>If an attribute that has the same name as the specified key does not exist: creates an attribute whose key is key and value is newValue. The values null and undefined are not supported. |
| Get | key: string | T or undefined | Obtains the value of the specified key. |
| Has | propName: string | boolean | Checks whether the attribute corresponding to the specified key value exists. |
......@@ -51,9 +51,8 @@ One-way data binding can be established between components and the AppStorage th
## Example
```
let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')
```ts
// xxx.ets
@Entry
@Component
......
en/application-dev/ui/ts-resource-access.md
浏览文件 @ 8b2ee890
......@@ -5,10 +5,13 @@
To reference an application resource in a project, use the `"$r('app.type.name')"` format. **app** indicates the resource defined in the **resources** directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be **color**, **float**, **string**, **plural**, or **media**. **name** indicates the resource name, which you set when defining the resource.
When referencing resources in the **rawfile** sub-directory, use the `"$rawfile('filename')"` format. Currently, **$rawfile** allows only the **\<Image>** component to reference image resources. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` format. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
> **NOTE**
>
> Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined.
>
> `$r` returns a **Resource** object. To obtain the corresponding string, use [getString](../reference/apis/js-apis-resource-manager.md#getstring).
In the **.ets** file, you can use the resources defined in the **resources** directory.
......@@ -47,7 +50,7 @@ Image($rawfile('newDir/newTest.png')) // Reference an image in the rawfile direc
System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style.
To reference a system resource, use the "$r('sys.type.resource_id')" format. Wherein: sys indicates a system resource; type indicates the resource type, which can be color, float, string, or media; resource_id indicates the resource ID, which is determined when the system resource is provided. For details about available system resource IDs.
To reference a system resource, use the ```"$r('sys.type.resource_id')"``` format. Wherein: **sys** indicates a system resource; **type** indicates the resource type, which can be **color**, **float**, **string**, or **media**; **resource_id** indicates the resource ID.
```ts
Text('Hello')
......
en/application-dev/ui/ts-syntactic-sugar.md
浏览文件 @ 8b2ee890
# About Syntactic Sugar
## Decorators
A decorator @Decorator can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
A decorator **@Decorator** can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
```
In the example below, the elements decorated by **@Component** take on the form of a component, and the variables decorated by **@State** can be used to represent states.
```ts
@Component
struct MyComponent {
@State count: number = 0
}
```
Multiple decorators can be defined on a single line, as shown below:
```
```ts
@Entry @Component struct MyComponent {
}
```
However, you are advised to define the decorators on multiple lines, as shown below:
```
```ts
@Entry
@Component
struct MyComponent {
......@@ -36,30 +39,29 @@ struct MyComponent {
### Supported Decorators
| Decorator | Decorates... | Description |
| -------- | -------- | -------- |
| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. |
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. |
| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. |
| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. |
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. |
| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. |
| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. |
| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. |
| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. |
| Decorator | Decorates... | Description |
| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| @Component | struct | The decorated structure has the component-based capability. The **build** method must be implemented to update the UI.|
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
| @Preview | struct | Custom components decorated by **@Preview** can be previewed in DevEco Studio. When the target page is loaded, the custom components decorated by **@Preview** are created and displayed.|
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component.|
| @Extend | Methods | This decorator adds attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component.|
| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the **build** method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated.|
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.|
| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of **@Observed** decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering.|
| @Consume | Primitive data types, classes, and arrays | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.|
| @Provide | Primitive data types, classes, and arrays | As the data provider, **@Provide** can update the data of child nodes and trigger page rendering.|
| @Watch | Variables decorated by **@State**, **@Prop**, **@Link**, **@ObjectLink**, **@Provide**, **@Consume**, **@StorageProp**, or **@StorageLink** | This decorator is used to listen for the changes of the state variables. The application can register a callback method through **@Watch**. |
## Chain Call
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
```
```ts
Column() {
Image('1.jpg')
.alt('error.jpg')
......@@ -71,10 +73,9 @@ Column() {
## struct
Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
Components can be implemented based on **struct**s. Components cannot inherit from each other. The **struct**s implemented components can be created and destroyed more quickly than **class** implemented components.
```
```ts
@Component
struct MyComponent {
@State data: string = ''
......@@ -87,10 +88,9 @@ struct MyComponent {
## Instantiating a struct Without the new Keyword
You can omit the new keyword when instantiating a struct.
You can omit the **new** keyword when instantiating a **struct**.
```
```ts
// Definition
@Component
struct MyComponent {
......@@ -98,7 +98,7 @@ struct MyComponent {
}
}
// Use
// Usage
Column() {
MyComponent()
}
......@@ -114,23 +114,22 @@ new Column() {
TypeScript has the following restrictions on generators:
- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.
- Expressions can be used only in character strings (${expression}), **if** conditions, **ForEach** parameters, and component parameters.
- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
- No expressions should cause any application state variables (**@State**, **@Link**, and **@Prop**) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
- The generator function cannot contain local variables.
None of the above restrictions apply to anonymous function implementations of event-handling functions (such as onClick)
None of the above restrictions apply to anonymous function implementations of event-handling functions (such as **onClick**)
Incorrect:
```
```ts
build() {
let a: number = 1 // invalid: variable declaration not allowed
Column() {
Text('Hello ${this.myName.toUpperCase()}') // ok.
ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place
Text(`Hello ${this.myName.toUpperCase()}`) // ok.
ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place
}
buildSpecial() // invalid: no function calls
Text(this.calcTextValue()) // this function call is ok.
......@@ -139,11 +138,13 @@ build() {
## $$
$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
**$$** supports two-way binding for simple variables and **@State**, **@Link**, and **@Prop** decorated variables.
Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the \<Radio> component.
Currently, **$$** supports only the rendering between the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute and the **@State** decorated variable, and the **checked** attribute of the **\<Radio>** component.
```
```ts
// xxx.ets
@Entry
@Component
struct bindPopup {
......@@ -166,3 +167,29 @@ struct bindPopup {
}
```
## Restrictions on Declaring Multiple Data Types of State Variables
If a **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variable supports multiple data types, they must be all simple data types or references at one time.
Example:
```ts
@Entry
@Component
struct Index {
// Incorrect: @State message: string | Resource = 'Hello World'
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(`${ this.message }`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
```
en/application-dev/ui/ts-types.md 已删除 100644 → 0
浏览文件 @ 1c859342
# Types
## Length Type
| Name| Type| Description|
| -------- | -------- | -------- |
| Length | string \| number | Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, '10px', or specify the length in percentage, for example, '100%'.|
## Angle Type
| Name| Type| Description|
| -------- | -------- | -------- |
| Angle | string \| number | Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:<br>- deg: for example, '100deg'<br>- rad: for example, '3.14rad' |
## Point Type
| Name| Type| Description|
| -------- | -------- | -------- |
| Point | [Length, Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
## Color Type
The Color type used by component attribute methods is described as follows:
| Name| Type| Description|
| -------- | -------- | -------- |
| Color | string \| number \| Color | Color information. If the input is a string, use rgb or rgba to specify the color. If the input is a number, use Hex format to specify the color. If the input is a Color enum, use a color value to specify the color.<br>- 'rgb(255, 255, 255)'<br>- 'rgba(255, 255, 255, 1.0)'<br>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF'<br>- Enum: Color.Black, Color.White |
The supported Color enums are described as follows:
| Color| Value| Illustration|
| -------- | -------- | -------- |
| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
| Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
| Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
## ColorStop Type
ColorStop is used to describe the progressive color stop.
| Name| Type| Description|
| -------- | -------- | -------- |
| ColorStop | [Color, number] | Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.|
## Resource Type
The Resource type is used to reference resources for setting the value of a component attribute.
You can use ` $r ` or ` $rawfile ` to create a Resource object. For details, see [Resource Access](ts-application-resource-access.md).
- ` $r('belonging.type.name') `
` belonging ` : system or application resource. The value can be 'sys' or 'app'.
` type ` : resource type, which can be 'color', 'float', 'string', or 'media'.
` name ` : resource name, which is determined during resource definition.
- ` $rawfile('filename') `
` filename ` : name of the file in resources/rawfile of the project.
| Name| Type| Description|
| -------- | -------- | -------- |
| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | **id**: resource ID.<br>**type**: resource type (enumerated value).<br>**params**: optional parameters.<br>After a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited. |
## ResourceStr Type<sup>8+</sup>
| Name| Type| Description|
| -------- | -------- | -------- |
| ResourceStr | string \| Resource| Resource string.|
## ResourceColor Type<sup>8+</sup>
| Name| Type| Description|
| -------- | -------- | -------- |
| ResourceColor | Color \| number \| string \| Resource | Resource color.|
## Font Type<sup>8+</sup>
| Name| Type| Description|
| -------- | -------- | -------- |
| Font | {<br>size?: Length;<br>weight?: FontWeight \| number \| string;<br>family?: string \| Resource;<br>style?: FontStyle;<br>} | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>weight: 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.<br>**family**: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.<br>**style**: font style. |
## CustomBuilder Type<sup>8+</sup>
You can use CustomBuilder to define custom UI descriptions in component attribute methods.
| Name| Type| Description|
| -------- | -------- | -------- |
| CustomBuilder | () => any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by @Builder. For details, see [@Builder](ts-component-based-builder.md).|
## Example
```
@Entry
@Component
struct dataTypeExample {
build() {
Column({ space: 5 }) {
Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('90%').width('90%').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('320').width(320).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('45deg')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center)
Text('45rad')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 })
Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%')
Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20])
Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%')
Text('0xF9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(0xF9CF93)
Text('#F9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('#F9CF93')
Text('rgb(249, 207, 147)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgb(249, 207, 147)')
Text('rgba(249, 207, 147, 1.0)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)')
Text('Color.Yellow')
.textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(Color.Yellow)
}
.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001219982719](figures/en-us_image_0000001219982719.png)
en/application-dev/ui/ui-js-components-switch.md
浏览文件 @ 8b2ee890
......@@ -9,14 +9,15 @@ The **&lt;switch&gt;** component is used to switch between the on and off states
Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<div class="container">
<switch></switch>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -31,9 +32,9 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
## Adding Attributes and Methods
Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
```
```html
<!-- xxx.hml -->
<div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
......@@ -41,28 +42,26 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
```
```
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
switch{
// Color of the selected text
switch {
texton-color: #002aff;
// Color of the unselected text
textoff-color: silver;
textoff-color: silver;
text-padding: 20px;
font-size: 50px;
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -84,7 +83,8 @@ export default {
![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **NOTE**
>
> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**.
......@@ -94,7 +94,7 @@ Turn on the switch and the default delivery address is used. When the switch is
Implementation method: Create a **&lt;switch&gt;** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="change">
......@@ -113,11 +113,11 @@ Turn on the switch and the default delivery address is used. When the switch is
```
```
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
padding: 50px;
......@@ -168,7 +168,7 @@ switch{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
en/application-dev/website.md
浏览文件 @ 8b2ee890
......@@ -11,7 +11,6 @@
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md)
- [Resource File Categories](quick-start/basic-resource-file-categories.md)
- [SysCap](quick-start/syscap.md)
- Development
- Ability Development
......@@ -43,12 +42,11 @@
- [Rules for Accessing Application Code Files](ui/ts-framework-file-access-rules.md)
- ["js" Tag](ui/ts-framework-js-tag.md)
- Resource Access
- [Accessing Application Resources](ui/ts-application-resource-access.md)
- [Accessing System Resources](ui/ts-system-resource-access.md)
- [Media Resource Types](ui/ts-media-resource-type.md)
- [Resource File Categories](ui/ui-ts-basic-resource-file-categories.md)
- [Accessing Application Resources](ui/ts-resource-access.md)
- [Pixel Units](ui/ts-pixel-units.md)
- [Types](ui/ts-types.md)
- Declarative Syntax
- [Overview](ui/ts-syntax-intro.md)
- General UI Description Specifications
- [Basic Concepts](ui/ts-general-ui-concepts.md)
......@@ -180,11 +178,11 @@
- [Custom Components](ui/ui-js-custom-components.md)
- Common Event and Notification
- [Common Event and Notification Overview](notification/notification-brief.md)
- Common Event
- [Common Event Development](notification/common-event.md)
- Notification
- [Notification Development](notification/notification.md)
- Debugging Tools
- [Common Event Development](notification/common-event.md)
- [Notification Development](notification/notification-guidelines.md)
- Agent-Powered Scheduled Reminder
- [Agent-Powered Scheduled Reminder Overview](notification/background-agent-scheduled-reminder-overview.md)
- [Agent-Powered Scheduled Reminder Development](notification/background-agent-scheduled-reminder-guide.md)
- [Debugging Assistant Usage](notification/assistant-guidelines.md)
- Window Manager
- Window
......@@ -212,6 +210,10 @@
- Image
- [Image Development](media/image.md)
- Security
- Access Control
- [Access Control Overview](security/accesstoken-overview.md)
- [Access Control Development](security/accesstoken-guidelines.md)
- [Permission List](security/permission-list.md)
- User Authentication
- [User Authentication Overview](security/userauth-overview.md)
- [User Authentication Development](security/userauth-guidelines.md)
......@@ -220,9 +222,6 @@
- [HUKS Development](security/huks-guidelines.md)
- hapsigner
- [hapsigner Guide](security/hapsigntool-guidelines.md)
- Access Control
- [Access Control Overview](security/accesstoken-overview.md)
- [Access Control Development](security/accesstoken-guidelines.md)
- Connectivity
- Network Management
- [Network Management Overview](connectivity/net-mgmt-overview.md)
......@@ -250,15 +249,13 @@
- Distributed Data Object
- [Distributed Data Object Overview](database/database-distributedobject-overview.md)
- [Distributed Data Object Development](database/database-distributedobject-guidelines.md)
- Agent-Powered Scheduled Reminders
- [Agent-Powered Scheduled Reminder Overview](background-agent-scheduled-reminder/background-agent-scheduled-reminder-overview.md)
- [Agent-Powered Scheduled Reminder Development](background-agent-scheduled-reminder/background-agent-scheduled-reminder-guide.md)
- Background Task Management
- [Background Task Management Overview](background-task-management/background-task-overview.md)
- [Background Task Management Development](background-task-management/background-task-dev-guide.md)
- Work Scheduler
- [Work Scheduler Overview](work-scheduler/work-scheduler-overview.md)
- [Work Scheduler Development](work-scheduler/work-scheduler-dev-guide.md)
- Task Management
- Background Task Management
- [Background Task Management Overview](background-task-management/background-task-overview.md)
- [Background Task Management Development](background-task-management/background-task-dev-guide.md)
- Work Scheduler
- [Work Scheduler Overview](task-management/work-scheduler-overview.md)
- [Work Scheduler Development](task-management/work-scheduler-dev-guide.md)
- Device
- USB Service
- [USB Service Overview](device/usb-overview.md)
......@@ -292,7 +289,10 @@
- [Internationalization Development (i18n)](internationalization/i18n-guidelines.md)
- Native APIs
- [Using Native APIs in Application Projects](napi/napi-guidelines.md)
- Tools
- [Drawing Development](napi/drawing-guidelines.md)
- [Raw File Development](napi/rawfile-guidelines.md)
- [NativeWindow Development](napi/native-window-guidelines.md)
- Tools
- [DevEco Studio (OpenHarmony) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
- Hands-On Tutorials
- [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
......@@ -562,8 +562,8 @@
- [@ohos.application.formError](reference/apis/js-apis-formerror.md)
- [@ohos.application.formHost](reference/apis/js-apis-formhost.md)
- [@ohos.application.formInfo](reference/apis/js-apis-formInfo.md)
- [@ohos.application.missionManager](reference/apis/js-apis-missionManager.md)
- [@ohos.application.formProvider](reference/apis/js-apis-formprovider.md)
- [@ohos.application.missionManager](reference/apis/js-apis-missionManager.md)
- [@ohos.ability.particleAbility](reference/apis/js-apis-particleAbility.md)
- [@ohos.application.ServiceExtensionAbility](reference/apis/js-apis-service-extension-ability.md)
- [@ohos.application.StartOptions](reference/apis/js-apis-application-StartOptions.md)
......@@ -575,19 +575,23 @@
- [AbilityContext](reference/apis/js-apis-ability-context.md)
- [abilityDelegator](reference/apis/js-apis-application-abilityDelegator.md)
- [abilityDelegatorArgs](reference/apis/js-apis-application-abilityDelegatorArgs.md)
- [AbilityManager](reference/apis/js-apis-abilityManager.md)
- [abilityMonitor](reference/apis/js-apis-application-abilityMonitor.md)
- [AbilityRunningInfo](reference/apis/js-apis-abilityrunninginfo.md)
- [AbilityStageContext](reference/apis/js-apis-abilitystagecontext.md)
- [Context](reference/apis/js-apis-application-context.md)
- [ExtensionAbilityContext](reference/apis/js-apis-extension-ability-context.md)
- [ExtensionAbilityInfo](reference/apis/js-apis-extensionAbilityInfo.md)
- [ExtensionContext](reference/apis/js-apis-extension-context.md)
- [ExtensionRunningInfo](reference/apis/js-apis-extensionrunninginfo.md)
- [FormExtensionContext](reference/apis/js-apis-formextensioncontext.md)
- [MissionInfo](reference/apis/js-apis-application-missionInfo.md)
- [MissionSnapshot](reference/apis/js-apis-application-MissionSnapshot.md)
- [PermissionRequestResult](reference/apis/js-apis-permissionrequestresult.md)
- [ProcessRunningInfo](reference/apis/js-apis-processrunninginfo.md)
- [ServiceExtAbilityContext](reference/apis/js-apis-serviceExtAbilityContext.md)
- [ServiceExtensionContext](reference/apis/js-apis-service-extension-context.md)
- [shellCmdResult](reference/apis/js-apis-application-shellCmdResult.md)
- [AbilityStageContext](reference/apis/js-apis-abilityStageContext.md)
- Common Event and Notification
- [@ohos.commonEvent](reference/apis/js-apis-commonEvent.md)
- [@ohos.events.emitter](reference/apis/js-apis-emitter.md)
......@@ -598,6 +602,14 @@
- [@ohos.bundle](reference/apis/js-apis-Bundle.md)
- [@ohos.bundleState ](reference/apis/js-apis-deviceUsageStatistics.md)
- [@ohos.zlib](reference/apis/js-apis-zlib.md)
- [AbilityInfo](reference/apis/js-apis-bundle-AbilityInfo.md)
- [ApplicationInfo](reference/apis/js-apis-bundle-ApplicationInfo.md)
- [BundleInfo](reference/apis/js-apis-bundle-BundleInfo.md)
- [CustomizeData](reference/apis/js-apis-bundle-CustomizeData.md)
- [ExtensionAbilityInfo](reference/apis/js-apis-bundle-ExtensionAbilityInfo.md)
- [HapModuleInfo](reference/apis/js-apis-bundle-HapModuleInfo.md)
- [Metadata](reference/apis/js-apis-bundle-Metadata.md)
- [ModuleInfo](reference/apis/js-apis-bundle-ModuleInfo.md)
- UI Page
- [@ohos.animator](reference/apis/js-apis-animator.md)
- [@ohos.mediaquery](reference/apis/js-apis-mediaquery.md)
......@@ -611,7 +623,6 @@
- [webgl2](reference/apis/js-apis-webgl2.md)
- Media
- [@ohos.multimedia.audio](reference/apis/js-apis-audio.md)
- [@ohos.multimedia.camera](reference/apis/js-apis-camera.md)
- [@ohos.multimedia.image](reference/apis/js-apis-image.md)
- [@ohos.multimedia.media](reference/apis/js-apis-media.md)
- [@ohos.multimedia.medialibrary](reference/apis/js-apis-medialibrary.md)
......@@ -635,7 +646,6 @@
- [@ohos.data.distributedData](reference/apis/js-apis-distributed-data.md)
- [@ohos.data.distributedDataObject](reference/apis/js-apis-data-distributedobject.md)
- [@ohos.data.rdb](reference/apis/js-apis-data-rdb.md)
- [@ohos.settings](reference/apis/js-apis-settings.md)
- [@ohos.data.storage](reference/apis/js-apis-data-storage.md)
- [resultSet](reference/apis/js-apis-data-resultset.md)
- File Management
......@@ -643,6 +653,7 @@
- [@ohos.environment](reference/apis/js-apis-environment.md)
- [@ohos.fileio](reference/apis/js-apis-fileio.md)
- [@ohos.fileManager](reference/apis/js-apis-filemanager.md)
- [@ohos.securityLabel](reference/apis/js-apis-securityLabel.md)
- [@ohos.statfs](reference/apis/js-apis-statfs.md)
- [@ohos.storageStatistics](reference/apis/js-apis-storage-statistics.md)
- [@ohos.volumeManager](reference/apis/js-apis-volumemanager.md)
......@@ -657,12 +668,15 @@
- Network Management
- [@ohos.net.connection](reference/apis/js-apis-net-connection.md)
- [@ohos.net.http](reference/apis/js-apis-http.md)
- [@ohos.request](reference/apis/js-apis-request.md)
- [@ohos.net.socket](reference/apis/js-apis-socket.md)
- [@ohos.net.webSocket](reference/apis/js-apis-webSocket.md)
- [@ohos.request](reference/apis/js-apis-request.md)
- Connectivity
- [@ohos.bluetooth](reference/apis/js-apis-bluetooth.md)
- [@ohos.connectedTag](reference/apis/js-apis-connectedTag.md)
- [@ohos.nfc.cardEmulation](reference/apis/js-apis-cardEmulation.md)
- [@ohos.nfc.controller](reference/apis/js-apis-nfcController.md)
- [@ohos.nfc.tag](reference/apis/js-apis-nfcTag.md)
- [@ohos.rpc](reference/apis/js-apis-rpc.md)
- [@ohos.wifi](reference/apis/js-apis-wifi.md)
- [@ohos.wifiext](reference/apis/js-apis-wifiext.md)
......@@ -681,6 +695,7 @@
- [@ohos.screenLock](reference/apis/js-apis-screen-lock.md)
- [@ohos.systemTime](reference/apis/js-apis-system-time.md)
- [@ohos.wallpaper](reference/apis/js-apis-wallpaper.md)
- [console](reference/apis/js-apis-logs.md)
- [Timer](reference/apis/js-apis-timer.md)
- Device Management
- [@ohos.batteryInfo ](reference/apis/js-apis-battery-info.md)
......@@ -695,6 +710,7 @@
- [@ohos.power](reference/apis/js-apis-power.md)
- [@ohos.runningLock](reference/apis/js-apis-runninglock.md)
- [@ohos.sensor](reference/apis/js-apis-sensor.md)
- [@ohos.settings](reference/apis/js-apis-settings.md)
- [@ohos.systemParameter](reference/apis/js-apis-system-parameter.md)
- [@ohos.thermal](reference/apis/js-apis-thermal.md)
- [@ohos.update](reference/apis/js-apis-update.md)
......@@ -751,4 +767,3 @@
- [@system.sensor](reference/apis/js-apis-system-sensor.md)
- [@system.storage](reference/apis/js-apis-system-storage.md)
- [@system.vibrator](reference/apis/js-apis-system-vibrate.md)
- [console](reference/apis/js-apis-logs.md)
\ No newline at end of file
en/device-dev/kernel/Readme-EN.md
浏览文件 @ 8b2ee890
......@@ -19,13 +19,13 @@
- [Software Timer](kernel-mini-basic-soft.md)
- Extended Components
- [C++ Support](kernel-mini-extend-support.md)
- [PUP](kernel-mini-extend-cpup.md)
- [CPUP](kernel-mini-extend-cpup.md)
- [Dynamic Loading](kernel-mini-extend-dynamic-loading.md)
- [File System](kernel-mini-extend-file.md)
- File System
- [FAT](kernel-mini-extend-file-fat.md)
- [LittleFS](kernel-mini-extend-file-lit.md)
- Kernel Debugging
- [Memory Debugging](kernel-mini-memory-debug.md)
- Memory Debugging
- [Memory Information Statistics](kernel-mini-memory-debug-mes.md)
- [Memory Leak Check](kernel-mini-memory-debug-det.md)
- [Memory Corruption Check](kernel-mini-memory-debug-cet.md)
......@@ -52,25 +52,25 @@
- Memory Management
- [Heap Memory Management](kernel-small-basic-memory-heap.md)
- [Physical Memory Management](kernel-small-basic-memory-physical.md)
- [Virtual Memory Management](kernel-small-basic-memory-virtual.md)
- [Virtual-to-Physical Mapping](kernel-small-basic-inner-reflect.md)
- [Virtual Memory Management](kernel-small-basic-memory-virtual.md)
- [Virtual-to-Physical Mapping](kernel-small-basic-inner-reflect.md)
- Kernel Communication Mechanisms
- [Event](kernel-small-basic-trans-event.md)
- [Semaphore](kernel-small-basic-trans-semaphore.md)
- [Mutex](kernel-small-basic-trans-mutex.md)
- [Semaphore](kernel-small-basic-trans-semaphore.md)
- [Mutex](kernel-small-basic-trans-mutex.md)
- [Queue](kernel-small-basic-trans-queue.md)
- [RW Lock](kernel-small-basic-trans-rwlock.md)
- [Futex](kernel-small-basic-trans-user-mutex.md)
- [Signal](kernel-small-basic-trans-user-signal.md)
- [Time Management](kernel-small-basic-time.md)
- [Software Timer](kernel-small-basic-softtimer.md)
- [Atomic Operation](kernel-small-basic-atomic.md)
- [Software Timer](kernel-small-basic-softtimer.md)
- [Atomic Operation](kernel-small-basic-atomic.md)
- Extension Components
- [System Call](kernel-small-bundles-system.md)
- [Dynamic Loading and Linking](kernel-small-bundles-linking.md)
- [Virtual Dynamic Shared Object](kernel-small-bundles-share.md)
- [LiteIPC](kernel-small-bundles-ipc.md)
- [File Systems](kernel-small-bundles-fs.md)
- File Systems
- [Virtual File System](kernel-small-bundles-fs-virtual.md)
- Supported File Systems
- [FAT](kernel-small-bundles-fs-support-fat.md)
......@@ -160,7 +160,7 @@
- [Working Principles](kernel-small-debug-user-function.md)
- Usage
- [Available APIs](kernel-small-debug-user-guide-api.md)
- [How to Use](kernel-small-debug-user-guide-use.md)
- How to Use
- [Calling APIs](kernel-small-debug-user-guide-use-api.md)
- [Using the CLI](kernel-small-debug-user-guide-use-cli.md)
- [Typical Memory Problems](kernel-small-debug-user-faqs.md)
......
en/device-dev/quick-start/Readme-EN.md
浏览文件 @ 8b2ee890
......@@ -19,9 +19,8 @@
- [Burning](quickstart-ide-lite-steps-hi3516-burn.md)
- [Running](quickstart-ide-lite-steps-hi3516-running.md)
- Appendix
- Introduction to Development Boards
- [Introduction to the Hi3861 Development Board](quickstart-ide-lite-introduction-hi3861.md)
- [Introduction to the Hi3516 Development Board](quickstart-ide-lite-introduction-hi3516.md)
- [Introduction to the Hi3861 Development Board](quickstart-ide-lite-introduction-hi3861.md)
- [Introduction to the Hi3516 Development Board](quickstart-ide-lite-introduction-hi3516.md)
- Getting Started with Mini and Small Systems (Installation Package Mode)
- [Mini and Small System Overview](quickstart-lite-overview.md)
- [Environment Preparation](quickstart-lite-env-setup.md)
......@@ -67,9 +66,8 @@
- [Burning](quickstart-ide-standard-running-rk3568-burning.md)
- [Running](quickstart-ide-standard-running-rk3568-running.md)
- Appendix
- Introduction to Development Boards
- [Introduction to the Hi3516 Development Board](quickstart-ide-standard-board-introduction-hi3516.md)
- [Introduction to the RK3568 Development Board](quickstart-ide-standard-board-introduction-rk3568.md)
- [Introduction to the Hi3516 Development Board](quickstart-ide-standard-board-introduction-hi3516.md)
- [Introduction to the RK3568 Development Board](quickstart-ide-standard-board-introduction-rk3568.md)
- Getting Started with Standard System (Installation Package Mode)
- [Standard System Overview](quickstart-standard-overview.md)
- [Setting Up Environments for Standard System](quickstart-standard-env-setup.md)
......
zh-cn/application-dev/database/database-mdds-overview.md
浏览文件 @ 8b2ee890
......@@ -9,65 +9,69 @@
## 基本概念
- **KV数据模型**
“KV数据模型”是“Key-Value数据模型”的简称，“Key-Value”即“键-值”；其数据以键值对的形式进行组织、索引和存储。
### KV数据模型
KV数据模型适合不涉及过多数据关系和业务关系的业务数据存储，比SQL数据库存储拥有更好的读写性能，同时因其在分布式场景中降低了解决数据库版本兼容问题的复杂度，和数据同步过程中冲突解决的复杂度而被广泛使用。分布式数据库也是基于KV数据模型，对外提供KV类型的访问接口。
“KV数据模型”是“Key-Value数据模型”的简称，“Key-Value”即“键-值”；其数据以键值对的形式进行组织、索引和存储。
- **分布式数据库事务性**
分布式数据库事务支持本地事务（和传统数据库的事务概念一致）和同步事务。同步事务是指在设备之间同步数据时，以本地事务为单位进行同步，一次本地事务的修改要么都同步成功，要么都同步失败。
KV数据模型适合不涉及过多数据关系和业务关系的业务数据存储，比SQL数据库存储拥有更好的读写性能，同时因其在分布式场景中降低了解决数据库版本兼容问题的复杂度，和数据同步过程中冲突解决的复杂度而被广泛使用。分布式数据库也是基于KV数据模型，对外提供KV类型的访问接口。
- **分布式数据库一致性**
在分布式场景中一般会涉及多个设备，组网内设备之间看到的数据是否一致称为分布式数据库的一致性。分布式数据库一致性可以分为**强一致性**、**弱一致性**和**最终一致性**。
### 分布式数据库事务性
- **强一致性**：是指某一设备成功增、删、改数据后，组网内设备对该数据的读取操作都将得到更新后的值。
- **弱一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取到本次更新数据，也可能读取不到，不能保证在多长时间后每个设备的数据一定是一致的。
- **最终一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取不到本次更新数据，但在某个时间窗口之后组网内设备的数据能够达到一致状态。
分布式数据库事务支持本地事务（和传统数据库的事务概念一致）和同步事务。同步事务是指在设备之间同步数据时，以本地事务为单位进行同步，一次本地事务的修改要么都同步成功，要么都同步失败。
强一致性对分布式数据的管理要求非常高，在服务器的分布式场景可能会遇到。因为移动终端设备的不常在线、以及无中心的特性，分布式数据服务不支持强一致性，只支持最终一致性。
### 分布式数据库一致性
- **分布式数据库同步**
底层通信组件完成设备发现和认证，会通知上层应用程序（包括分布式数据服务）设备上线。收到设备上线的消息后分布式数据服务可以在两个设备之间建立加密的数据传输通道，利用该通道在两个设备之间进行数据同步。
在分布式场景中一般会涉及多个设备，组网内设备之间看到的数据是否一致称为分布式数据库的一致性。分布式数据库一致性可以分为**强一致性**、**弱一致性**和**最终一致性**。
分布式数据服务提供了两种同步方式：**手动同步**和**自动同步**。
- **强一致性**：是指某一设备成功增、删、改数据后，组网内设备对该数据的读取操作都将得到更新后的值。
- **弱一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取到本次更新数据，也可能读取不到，不能保证在多长时间后每个设备的数据一定是一致的。
- **最终一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取不到本次更新数据，但在某个时间窗口之后组网内设备的数据能够达到一致状态。
- **手动同步**：由应用程序调用sync接口来触发，需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY（将远端数据拉到本端）、PUSH_ONLY（将本端数据推送到远端）和PUSH_PULL（将本端数据推送到远端同时也将远端数据拉取到本端）。内部接口支持按条件过滤同步，将符合条件的数据同步到远端。
- **自动同步**：包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端，同时也将远端数据拉取到本端来完成数据同步，同步时机包括设备上线、应用程序更新数据等，应用不需要主动调用sync接口；内部接口支持按条件订阅同步，将远端符合订阅条件的数据自动同步到本端。
强一致性对分布式数据的管理要求非常高，在服务器的分布式场景可能会遇到。因为移动终端设备的不常在线、以及无中心的特性，分布式数据服务不支持强一致性，只支持最终一致性。
- **单版本分布式数据库**
单版本是指数据在本地保存是以单个KV条目为单位的方式保存，对每个Key最多只保存一个条目项，当数据在本地被用户修改时，不管它是否已经被同步出去，均直接在这个条目上进行修改。同步也以此为基础，按照它在本地被写入或更改的顺序将当前最新一次修改逐条同步至远端设备。
### 分布式数据库同步
- **设备协同分布式数据库**
设备协同分布式数据库建立在单版本分布式数据库之上，对应用程序存入的KV数据中的Key前面拼接了本设备的DeviceID标识符，这样能保证每个设备产生的数据严格隔离，底层按照设备的维度管理这些数据，设备协同分布式数据库支持以设备的维度查询分布式数据，但是不支持修改远端设备同步过来的数据。
底层通信组件完成设备发现和认证，会通知上层应用程序（包括分布式数据服务）设备上线。收到设备上线的消息后分布式数据服务可以在两个设备之间建立加密的数据传输通道，利用该通道在两个设备之间进行数据同步。
- **分布式数据库冲突解决策略**
分布式数据库多设备提交冲突场景，在给提交冲突做合并的过程中，如果多个设备同时修改了同一数据，则称这种场景为数据冲突。数据冲突采用默认冲突解决策略（Last-write-wins），基于提交时间戳，取时间戳较大的提交数据，当前不支持定制冲突解决策略。
分布式数据服务提供了两种同步方式：**手动同步**和**自动同步**。
- **数据库Schema化管理与谓词查询**
单版本数据库支持在创建和打开数据库时指定Schema，数据库根据Schema定义感知KV记录的Value格式，以实现对Value值结构的检查，并基于Value中的字段实现索引建立和谓词查询。
- **手动同步**：由应用程序调用sync接口来触发，需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY（将远端数据拉到本端）、PUSH_ONLY（将本端数据推送到远端）和PUSH_PULL（将本端数据推送到远端同时也将远端数据拉取到本端）。内部接口支持按条件过滤同步，将符合条件的数据同步到远端。
- **自动同步**：包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端，同时也将远端数据拉取到本端来完成数据同步，同步时机包括设备上线、应用程序更新数据等，应用不需要主动调用sync接口；内部接口支持按条件订阅同步，将远端符合订阅条件的数据自动同步到本端。
- **分布式数据库备份能力**
提供分布式数据库备份能力，业务通过设置backup属性为true，可以触发分布式数据服务每日备份。当分布式数据库发生损坏，分布式数据服务会删除损坏数据库，并且从备份数据库中恢复上次备份的数据。如果不存在备份数据库，则创建一个新的数据库。同时支持加密数据库的备份能力。
### 单版本分布式数据库
单版本是指数据在本地保存是以单个KV条目为单位的方式保存，对每个Key最多只保存一个条目项，当数据在本地被用户修改时，不管它是否已经被同步出去，均直接在这个条目上进行修改。同步也以此为基础，按照它在本地被写入或更改的顺序将当前最新一次修改逐条同步至远端设备。
### 设备协同分布式数据库
设备协同分布式数据库建立在单版本分布式数据库之上，对应用程序存入的KV数据中的Key前面拼接了本设备的DeviceID标识符，这样能保证每个设备产生的数据严格隔离，底层按照设备的维度管理这些数据，设备协同分布式数据库支持以设备的维度查询分布式数据，但是不支持修改远端设备同步过来的数据。
### 分布式数据库冲突解决策略
分布式数据库多设备提交冲突场景，在给提交冲突做合并的过程中，如果多个设备同时修改了同一数据，则称这种场景为数据冲突。数据冲突采用默认冲突解决策略（Last-write-wins），基于提交时间戳，取时间戳较大的提交数据，当前不支持定制冲突解决策略。
### 数据库Schema化管理与谓词查询
单版本数据库支持在创建和打开数据库时指定Schema，数据库根据Schema定义感知KV记录的Value格式，以实现对Value值结构的检查，并基于Value中的字段实现索引建立和谓词查询。
### 分布式数据库备份能力
提供分布式数据库备份能力，业务通过设置backup属性为true，可以触发分布式数据服务每日备份。当分布式数据库发生损坏，分布式数据服务会删除损坏数据库，并且从备份数据库中恢复上次备份的数据。如果不存在备份数据库，则创建一个新的数据库。同时支持加密数据库的备份能力。
## 运作机制
分布式数据服务支撑OpenHarmony系统上应用程序数据库数据分布式管理，支持数据在相同帐号的多端设备之间相互同步，为用户在多端设备上提供一致的用户体验，分布式数据服务包含五部分：
- **服务接口**
分布式数据服务提供专门的数据库创建、数据访问、数据订阅等接口给应用程序调用，接口支持KV数据模型，支持常用的数据类型，同时确保接口的兼容性、易用性和可发布性。
- **服务接口：** 分布式数据服务提供专门的数据库创建、数据访问、数据订阅等接口给应用程序调用，接口支持KV数据模型，支持常用的数据类型，同时确保接口的兼容性、易用性和可发布性。
- **服务组件**
服务组件负责服务内元数据管理、权限管理、加密管理、备份和恢复管理以及多用户管理等、同时负责初始化底层分布式DB的存储组件、同步组件和通信适配层。
- **服务组件：** 服务组件负责服务内元数据管理、权限管理、加密管理、备份和恢复管理以及多用户管理等、同时负责初始化底层分布式DB的存储组件、同步组件和通信适配层。
- **存储组件**
存储组件负责数据的访问、数据的缩减、事务、快照、数据库加密，以及数据合并和冲突解决等特性。
- **存储组件：** 存储组件负责数据的访问、数据的缩减、事务、快照、数据库加密，以及数据合并和冲突解决等特性。
- **同步组件**
同步组件连结了存储组件与通信组件，其目标是保持在线设备间的数据库数据一致性，包括将本地产生的未同步数据同步给其他设备，接收来自其他设备发送过来的数据，并合并到本地设备中。
- **同步组件：** 同步组件连结了存储组件与通信组件，其目标是保持在线设备间的数据库数据一致性，包括将本地产生的未同步数据同步给其他设备，接收来自其他设备发送过来的数据，并合并到本地设备中。
- **通信适配层**
通信适配层负责调用底层公共通信层的接口完成通信管道的创建、连接，接收设备上下线消息，维护已连接和断开设备列表的元数据，同时将设备上下线信息发送给上层同步组件，同步组件维护连接的设备列表，同步数据时根据该列表，调用通信适配层的接口将数据封装并发送给连接的设备。
- **通信适配层：** 通信适配层负责调用底层公共通信层的接口完成通信管道的创建、连接，接收设备上下线消息，维护已连接和断开设备列表的元数据，同时将设备上下线信息发送给上层同步组件，同步组件维护连接的设备列表，同步数据时根据该列表，调用通信适配层的接口将数据封装并发送给连接的设备。
应用程序通过调用分布式数据服务接口实现分布式数据库创建、访问、订阅功能，服务接口通过操作服务组件提供的能力，将数据存储至存储组件，存储组件调用同步组件实现将数据同步，同步组件使用通信适配层将数据同步至远端设备，远端设备通过同步组件接收数据，并更新至本端存储组件，通过服务接口提供给应用程序使用。
......@@ -83,6 +87,7 @@
- 分布式数据服务的数据模型仅支持KV数据模型，不支持外键、触发器等关系型数据库中的功能。
- 分布式数据服务支持的KV数据模型规格：
- 设备协同数据库，针对每条记录，Key的长度≤896 Byte，Value的长度&lt;4 MB。
- 单版本数据库，针对每条记录，Key的长度≤1 KB，Value的度&lt;4 MB。
- 每个应用程序最多支持同时打开16个分布式数据库。
......
zh-cn/application-dev/device/usb-overview.md
浏览文件 @ 8b2ee890
......@@ -9,7 +9,7 @@ USB服务是应用访问底层的一种设备抽象概念。开发者根据提
USB服务系统包含USB API、USB Service、USB HAL。
**图2** USB服务运作机制
**图1** USB服务运作机制
![zh-cn_image_0000001237821727](figures/zh-cn_image_0000001237821727.png)
......
zh-cn/application-dev/reference/apis/js-apis-distributed-data.md
浏览文件 @ 8b2ee890
......@@ -596,16 +596,15 @@ KVStore数据库类型枚举。
数据库的安全级别枚举。
**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core
| 名称 | 值 | 说明 |
| --- | ---- | ----------------------- |
| NO_LEVEL | 0 | 表示数据库不设置安全级别。 |
| S0 | 1 | 表示数据库的安全级别为公共级别。 |
| S1 | 2 | 表示数据库的安全级别为低级别，当数据泄露时会产生较低影响。例如，包含壁纸等系统数据的数据库。 |
| S2 | 3 | 表示数据库的安全级别为中级别，当数据泄露时会产生较大影响。例如，包含录音、视频等用户生成数据或通话记录等信息的数据库。 |
| S3 | 5 | 表示数据库的安全级别为高级别，当数据泄露时会产生重大影响。例如，包含用户运动、健康、位置等信息的数据库。 |
| S4 | 6 | 表示数据库的安全级别为关键级别，当数据泄露时会产生严重影响。例如，包含认证凭据、财务数据等信息的数据库。 |
| NO_LEVEL | 0 | 表示数据库不设置安全级别。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore |
| S0 | 1 | 表示数据库的安全级别为公共级别。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S1 | 2 | 表示数据库的安全级别为低级别，当数据泄露时会产生较低影响。例如，包含壁纸等系统数据的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S2 | 3 | 表示数据库的安全级别为中级别，当数据泄露时会产生较大影响。例如，包含录音、视频等用户生成数据或通话记录等信息的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S3 | 5 | 表示数据库的安全级别为高级别，当数据泄露时会产生重大影响。例如，包含用户运动、健康、位置等信息的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S4 | 6 | 表示数据库的安全级别为关键级别，当数据泄露时会产生严重影响。例如，包含认证凭据、财务数据等信息的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
## Constants
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 8b2ee890
......@@ -6,25 +6,21 @@
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
## 接口
CheckboxGroup( option?: {group?: string} )
CheckboxGroup( options?: {group?: string} )
创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----- |
| group | string | 否 | - | 群组名称。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------- |
| group | string | 否 | 群组名称。 |
## 属性
......@@ -50,7 +46,7 @@ CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化
| 名称 | 参数类型 | 描述 |
| ------ | ------------------- | -------------- |
| name | Array&lt;string&gt; | checkBox名称。 |
| status | selectStatus | 选中状态。 |
| status | SelectStatus | 选中状态。 |
## SelectStatus枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 8b2ee890
......@@ -6,10 +6,6 @@
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -20,21 +16,21 @@ Gauge(options:{value: number, min?: number, max?: number})
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| value | number | 是 | - | 当前数据值。 |
| min | number | 否 | 0 | 当前数据段最小值。 |
| max | number | 否 | 100 | 当前数据段最大值。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | 是 | 当前数据值。 |
| min | number | 否 | 当前数据段最小值。<br/>默认值：0 |
| max | number | 否 | 当前数据段最大值。<br/>默认值：100 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ---- | --------------------------- |
| value | number | 0 | 设置当前数据图表的值。 |
| startAngle | number | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 |
| endAngle | number | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 |
| colors | Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持分段颜色设置。 |
| strokeWidth | [Length](ts-types.md#length) | - | 设置环形图表的环形厚度。 |
| 名称 | 参数类型 | 描述 |
| ----------- | ---------------------------------------- | --------------------------- |
| value | number | 设置当前数据图表的值。<br/>默认值：0 |
| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：-150 |
| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：150 |
| colors | Array&lt;ColorStop&gt; | 设置图表的颜色，支持分段颜色设置。 |
| strokeWidth | [Length](ts-types.md#length) | 设置环形图表的环形厚度。 |
## ColorStop
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@ Navigation组件一般作为Page页面的根容器，通过属性设置来展示
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
可以包含子组件。
......@@ -26,32 +21,32 @@ Navigation()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | false | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 |
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面标题。 |
| subtitle | string | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | 设置隐藏/显示工具栏：<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false |
## NavigationMenuItem类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | 是 | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## Object类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | 是 | 工具栏单个选项的显示文本。 |
| icon | string | 否 | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## NavigationTitleMode枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -25,12 +20,12 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?:
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------------------- | ------------- | ---- | -------------------- | --------------------------------------------------- |
| value | number | 是 | - | 指定当前进度值。 |
| total | number | 否 | 100 | 指定进度总长。 |
| type<sup>8+</sup> | ProgressType | 否 | ProgressType.Linear | 指定进度条类型。 |
| style<sup>deprecated</sup> | ProgressStyle | 否 | ProgressStyle.Linear | 指定进度条样式。<br/>该参数从API Version8开始废弃。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------------------------- | ------------- | ---- | ------------------------------------------------------------ |
| value | number | 是 | 指定当前进度值。 |
| total | number | 否 | 指定进度总长。<br/>默认值：100 |
| type<sup>8+</sup> | ProgressType | 否 | 指定进度条类型。<br/>默认值：ProgressType.Linear |
| style<sup>deprecated</sup> | ProgressStyle | 否 | 指定进度条类型。<br/>该参数从API Version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear |
## ProgressType枚举说明
......@@ -54,11 +49,11 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?:
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| value | number | - | 设置当前进度值。 |
| color | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](ts-types.md#length)<br/>} | - | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
| 名称 | 参数类型 | 描述 |
| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| value | number | 设置当前进度值。 |
| color | [ResourceColor](ts-types.md#resourcecolor8) | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](ts-types.md#length)<br/>} | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -23,23 +18,23 @@ Radio(options: {value: string, group: string})
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------------------------- |
| value | string | 是 | - | 当前单选框的值。 |
| group | string | 是 | - | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| value | string | 是 | 当前单选框的值。 |
| group | string | 是 | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------- | ------- | ----- | ----------- |
| checked | boolean | false | 设置单选框的选中状态。 |
| 名称 | 参数类型 | 描述 |
| ------- | -------- | ---------------------------------------- |
| checked | boolean | 设置单选框的选中状态。<br/>默认值：false |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> -isChecked为true时，代表选中。<br> -isChecked为false时，代表未选中。 |
| 名称 | 功能描述 |
| ------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> - isChecked为true时，代表选中。<br> - isChecked为false时，代表未选中。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 8b2ee890
......@@ -6,10 +6,6 @@
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -20,21 +16,21 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | 否 | - | 搜索文本值。 |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| icon | string | 否 | - | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
| controller | SearchController | 否 | - | 控制器。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------- | ---------------- | ---- | ------------------------------------------------------------ |
| value | string | 否 | 搜索文本值。 |
| placeholder | string | 否 | 无输入时的提示文本。 |
| icon | string | 否 | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
| controller | SearchController | 否 | 控制器。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------- | ------------------------------------------- | ------ | ------------------------------------------ |
| searchButton | string | 无 | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | - | 设置placeholder文本样式。 |
| textFont | [Font](ts-types.md#font) | - | 设置搜索框内文本样式。 |
| 名称 | 参数类型 | 描述 |
| ---------------- | ------------------------------------------- | ------------------------------------------ |
| searchButton | string | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
| textFont | [Font](ts-types.md#font) | 设置搜索框内文本样式。 |
## 事件
......@@ -62,9 +58,9 @@ caretPosition(value: number): void
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的长度。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | 是 | 从字符串开始到光标所在位置的长度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -19,23 +14,23 @@
## 接口
Span(content: string | Resource)
Span(value: string | Resource)
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ------ | ---------- |
| content | string\|[Resource](ts-types.md#resource) | 是 | - | 文本内容。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ---------------------------------------------------- | ---- | ---------- |
| value | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 文本内容。 |
## 属性
通用属性方法仅支持通用文本样式，不支持触摸热区设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---------------------------------------- | -------------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | {<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 |
| letterSpacing | number \| string | - | 设置文本字符间距。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase枚举说明) | Normal | 设置文本大小写。 |
| 名称 | 参数类型 | 描述 |
| ---------- | ---------------------------------------- | -------------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} |
| letterSpacing | number \| string | 设置文本字符间距。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase枚举说明) | 设置文本大小写。<br/>默认值：Normal |
## 事件
......@@ -43,6 +38,7 @@ Span(content: string | Resource)
通用事件仅支持点击事件。
> **说明：**
>
> 由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
可以包含[Span](ts-basic-components-span.md)子组件。
......@@ -23,24 +18,24 @@ Text(content?: string | Resource)
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| content | string \| [Resource](ts-types.md#resource) | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ------------------------------------------ | ---- | ------------------------------------------------------------ |
| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。<br/>默认值：' ' |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | TextAlign.Start | 设置多行文本的文本对齐方式。 |
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | {overflow:&nbsp;TextOverflow.Clip} | 设置文本超长时的显示方式。<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
| maxLines | number | Infinity | 设置文本的最大行数。 |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | {<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 |
| baselineOffset | number \| string | - | 设置文本基线的偏移量。 |
| letterSpacing | number \| string | - | 设置文本字符间距。 |
| minFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 设置文本最小显示字号。 |
| maxFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 设置文本最大显示字号。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | TextCase.Normal | 设置文本大小写。 |
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。<br/>默认值：TextAlign.Start |
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：{overflow:&nbsp;TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
| maxLines | number | 设置文本的最大行数。<br/>默认值：Infinity |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} |
| baselineOffset | number \| string | 设置文本基线的偏移量。 |
| letterSpacing | number \| string | 设置文本字符间距。 |
| minFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本最小显示字号。 |
| maxFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本最大显示字号。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值：TextCase.Normal |
> **说明：**
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -23,32 +18,32 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | - | 设置TextArea控制器。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | -------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | 设置TextArea控制器。 |
## 属性
除支持通用属性外，还支持以下属性：
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置placeholder文本颜色。 |
| placeholderFont | [Font](ts-types.md#font) | - | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效，例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Start | 设置文本水平对齐方式。 |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置输入框光标颜色。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | - | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
| 名称 | 参数类型 | 描述 |
| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效，例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐方式。<br/>默认值：TextAlign.Start |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入发生变化时，触发回调。 |
| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>value：复制的文本内容。 |
| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>value：剪切的文本内容。 |
| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>value：粘贴的文本内容。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入发生变化时，触发回调。 |
| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>- value：复制的文本内容。 |
| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>- value：剪切的文本内容。 |
| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>- value：粘贴的文本内容。 |
## TextAreaController<sup>8+</sup>
......@@ -69,9 +64,9 @@ caretPosition(value: number): void
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的字符长度。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | -------------------------------------- |
| value | number | 是 | 从字符串开始到光标所在位置的字符长度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 8b2ee890
......@@ -27,9 +27,9 @@ TextClock(options?: {timeZoneOffset?: number, controller?: TextClockController})
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | ------ | -------- | ---------------------------------------- |
| format | string | 'hhmmss' | 设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：<ul><li>yyyy（年份）</li><li>mm（英文月份简写）</li><li>mmm（英文月份简写）</li><li>mmmm（英文月份全称）</li><li>dd（英文星期简写）</li><li>ddd（英文星期简写）</li><li>dddd（英文星期全称）</li><li>HH（24小时制）</li><li>hh（12小时制）</li><li>MM/mm（分钟）</li><li>SS/ss（秒）</li></ul> |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | -------- | ------ | ------------------------------------------------------------ |
| format | string | 'hms' | 设置显示时间格式。<br/>日期间隔符固定为"/"，时间间隔符为":"。<br/>如yyyyMMdd，yyyy-MM-dd显示为yyyy/MM/dd，<br/>hhmmss显示为hh:mm:ss。 <br/>时间格式只用写一位即可，如"hhmmss"等同于"hms"。<br/>支持的时间格式化字符串：<br/>- YYYY/yyyy：完整年份。<br/>- YY/yy：年份后两位。<br/>- M：月份(若想使用01月则使用MM)。<br/>- d：日期(若想使用01日则使用dd)。<br/>- D：年中日(一年中的第几天)。<br/>- H：24小时制。<br/>- h：12小时制。<br/>- m：分钟。<br/>- s：秒。<br/>- SSS：毫秒。 |
## 事件
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -23,25 +18,25 @@ TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?:
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | --------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | - | 设置TextInput控制器。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | --------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 |
## 属性
除支持通用属性外，还支持以下属性：
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------------- | ------------------------------------------------------------ | ----------------- | ------------------------------------------------------------ |
| type | InputType | InputType.Normal | 设置输入框类型。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | - | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| enterKeyType | EnterKeyType | EnterKeyType.Done | 设置输入法回车键类型。 |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置输入框光标颜色。 |
| maxLength | number | - | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | - | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
| 名称 | 参数类型 | 描述 |
| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| type | InputType | 设置输入框类型。<br/>默认值：InputType.Normal |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| enterKeyType | EnterKeyType | 设置输入法回车键类型。<br/>默认值：EnterKeyType.Done |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| maxLength | number | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
## EnterKeyType枚举说明
......@@ -90,9 +85,9 @@ caretPosition(value:&nbsp;number): void
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | number | 是 | - | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| value | number | 是 | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -25,24 +20,24 @@ TextPicker(options?: {range: string[] | [Resource](ts-types.md#resource), select
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | --------------- |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 选择器的数据选择范围。 |
| selected | number | 否 | 0 | 选中项在数组中的index值。 |
| value | string | 否 | 第一个元素值 | 选中项的值，优先级低于selected。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | --------------- |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 选择器的数据选择范围。 |
| selected | number | 否 | 选中项在数组中的index值。<br/>默认值：0 |
| value | string | 否 | 选中项的值，优先级低于selected。<br/>默认值：第一个元素值 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ---------------- | ------ | -------------------------- |
| defaultPickerItemHeight | number \| string | - | 默认Picker内容项元素高度。 |
| 名称 | 参数类型 | 描述 |
| ----------------------- | ---------------- | -------------------------- |
| defaultPickerItemHeight | number \| string | 默认Picker内容项元素高度。 |
## 事件
| 名称 | 描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的下标。 |
| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的索引值。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 8b2ee890
# LongPressGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------- | ---- | ----- | -------------------------------- |
| fingers | number | 否 | 1 | 触发长按的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| repeat | boolean | 否 | false | 是否连续触发事件回调。 |
| duration | number | 否 | 500 | 最小触发长按的时间，单位为毫秒（ms）。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发长按的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
| repeat | boolean | 否 | 是否连续触发事件回调。<br/>默认值：false |
| duration | number | 否 | 最小触发长按的时间，单位为毫秒（ms）。<br/>默认值：500 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------------ |
| onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 |
## GestureEvent对象中与LongPress手势相关的属性
| 名称 | 功能描述 |
| ------------------------------------------------------------ | --------------------------------------------------- |
| onAction(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功回调。 |
| onActionEnd(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 |
| 属性名称 | 属性类型 | 描述 |
| ------ | ------- | ------------ |
| repeat | boolean | 事件是否为重复触发事件。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 8b2ee890
# PanGesture
用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------------ | ---- | ------ | ------------------------------------------------------------ |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| direction | PanDirection | 否 | All | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。 |
| distance | number | 否 | 5.0 | 最小滑动识别距离，单位为vp。<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| --------- | ------------ | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发拖动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
| direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：PanDirection.All |
| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
## PanDirection枚举说明
| 名称 | 描述 |
| ---------- | ---------- |
| All | 所有方向可滑动。 |
| Horizontal | 水平方向可滑动。 |
| Vertical | 竖直方向可滑动。 |
| Left | 向左滑动。 |
| Right | 向右滑动。 |
| Up | 向上滑动。 |
| Down | 向下滑动。 |
| None | 任何方向都不可滑动。 |
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| Left | 向左拖动。 |
| Right | 向右拖动。 |
| Up | 向上拖动。 |
| Down | 向下拖动。 |
| None | 任何方向都不可触发拖动手势事件。 |
## PanGestureOptions
......@@ -43,31 +40,26 @@ PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distan
**参数：**
同PanGesture参数说明。
同PanGesture参数说明。
**接口：**
| 名称 | 功能描述 |
| -------------------------------------- | -------------- |
| setDirection(value:&nbsp;PanDirection) | 设置direction属性。 |
| setDistance(value:&nbsp;number) | 设置distance属性。 |
| setFingers(value:&nbsp;number) | 设置fingers属性。 |
| 名称 | 功能描述 |
| -------- | -------- |
| setDirection(value:&nbsp;PanDirection) | 设置direction属性。 |
| setDistance(value:&nbsp;number) | 设置distance属性。 |
| setFingers(value:&nbsp;number) | 设置fingers属性。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------ |
| onActionStart(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功回调。 |
| onActionUpdate(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势移动过程中回调。 |
| onActionEnd(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，手指抬起后触发回调。 |
| onActionCancel(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，接收到触摸取消事件触发回调。 |
## 事件
## GestureEvent对象中与Pan手势相关的属性
| 名称 | 功能描述 |
| -------- | -------- |
| onActionStart(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pan手势识别成功回调。 |
| onActionUpdate(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pan手势移动过程中回调。 |
| onActionEnd(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，接收到触摸取消事件触发回调。 |
| 属性名称 | 属性类型 | 描述 |
| ------- | ------ | -------------- |
| offsetX | number | 手势事件偏移量，单位为vp。 |
| offsetY | number | 手势事件偏移量，单位为vp。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 8b2ee890
# PinchGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
PinchGesture(options?: { fingers?: number, distance?: number })
PinchGesture(value?: { fingers?: number, distance?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | ---- | ---- | ----------------------------- |
| fingers | number | 否 | 2 | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。 |
| distance | number | 否 | 3.0 | 最小识别距离，单位为vp。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。<br/>默认值：2 |
| distance | number | 否 | 最小识别距离，单位为vp。<br/>默认值：3.0 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | -------------------------- |
| onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功回调。 |
| onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
## GestureEvent对象中与Pinch手势相关的属性
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ----------------------------------------------- |
| onActionStart(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功回调。 |
| onActionUpdate(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。 |
| onActionEnd(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
| 属性名称 | 属性类型 | 描述 |
| ------------ | ------ | -------------------------- |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 |
| pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 8b2ee890
# RotationGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
RotationGesture(options?: { fingers?: number, angle?: number })
RotationGesture(value?: { fingers?: number, angle?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ----------------------------- |
| fingers | number | 否 | 2 | 触发旋转的最少手指数,&nbsp;最小为2指，最大为5指。 |
| angle | number | 否 | 1.0 | 触发旋转手势的最小改变度数，单位为度数。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发旋转的最少手指数,&nbsp;最小为2指，最大为5指。<br/>默认值：2 |
| angle | number | 否 | 触发旋转手势的最小改变度数，单位为度数。<br/>默认值：1.0 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ----------------------------- |
| onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功回调。 |
| onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势移动过程中回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 |
## GestureEvent对象中与Rotation手势相关的属性
| 名称 | 功能描述 |
| ------------------------------------------------------------ | -------------------------------------------------- |
| onActionStart(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功回调。 |
| onActionUpdate(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Rotation手势移动过程中回调。 |
| onActionEnd(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 |
| 属性名称 | 属性类型 | 描述 |
| ----- | ------ | ----- |
| angle | number | 旋转角度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 8b2ee890
# SwipeGesture
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | -------------- | ---- | ------------------ | ----------------------------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 触发滑动手势的滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（默认为100vp/秒）。 |
## SwipeDirection枚举说明
| 名称 | 描述 |
| ---------- | ----- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| None | 任何方向均不可触发。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ----------- |
| onAction(callback:(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 |
## 事件
## GestureEvent对象中与Swipe手势相关的属性
| 名称 | 功能描述 |
| -------- | -------- |
| onAction(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 |
| 参数名 | 类型 | 说明 |
| ----- | ------ | ---------------------------------------- |
| angle | number | 滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| speed | number | 滑动手势的速度，是所有手指滑动的平均速度，单位为VP/秒。 |
![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
## 示例
......@@ -64,7 +54,7 @@ struct SwipeGestureExample {
.width(260).height(260)
.rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle})
.gesture(
SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical})
SwipeGesture({fingers: 1, direction: SwipeDirection.Vertical})
.onAction((event: GestureEvent) => {
this.speed = event.speed
this.rotateAngle = event.angle
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ 8b2ee890
# TapGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
TapGesture(options?: { count?: number, fingers?: number })
TapGesture(value?: { count?: number, fingers?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ---------------------------------------- |
| count | number | 否 | 1 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
| fingers | number | 否 | 1 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| count | number | 否 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
| fingers | number | 否 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ------------ |
| onAction((event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | --------------------- |
| onAction(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 8b2ee890
# Canvas
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件，用于自定义绘制图形。
......@@ -16,13 +14,13 @@
## 接口
Canvas(context: CanvasRenderingContext2D)
Canvas(context?: CanvasRenderingContext2D)
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | - | 见CanvasRenderingContext2D对象。 |
## 属性
......@@ -34,7 +32,7 @@ Canvas(context: CanvasRenderingContext2D)
| 名称 | 参数 | 描述 |
| ----------------------------- | ---- | -------------------- |
| onReady(callback: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 |
| onReady(event: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 8b2ee890
# ImageBitmap对象
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
CanvasImageData对象可以存储canvas渲染的像素数据。
ImageBitmap对象可以存储canvas渲染的像素数据。
## 属性
| 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | ImageBitmap的像素宽度。 |
| height | number | ImageBitmap的像素高度。 |
## 方法
### close
close()
释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 8b2ee890
# ImageData对象
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ImageData对象可以存储canvas渲染的像素数据。
......@@ -10,8 +9,9 @@ ImageData对象可以存储canvas渲染的像素数据。
## 属性
| 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
支持单个子组件。
......@@ -28,7 +23,7 @@ TabContent()
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| tabBar | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>text?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>}<br/>\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
| tabBar | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>text?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>}<br/>\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>**说明：**<br/>如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
> **说明：**
> - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 8b2ee890
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
包含子组件[TabContent](ts-container-tabcontent.md)。
......@@ -19,7 +14,7 @@
## 接口说明
Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
**参数：**
......
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 8b2ee890
......@@ -43,7 +43,7 @@
## 响应手势事件
组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。如通过TapGesture对象的onAction事件响应点击事件。具体事件定义见各个手势对象章节。
组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。例如通过TapGesture对象的onAction事件响应点击事件。其余手势的事件定义见各个手势对象章节。
- TapGesture事件说明
| 名称 | 功能描述 |
......@@ -51,10 +51,36 @@
| onAction((event?:GestureEvent)&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
- GestureEvent对象说明
| 属性名称 | 属性类型 | 描述 |
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| timestamp | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | SourceType | 事件输入设备。 |
| repeat | boolean | 是否为重复触发事件，用于LongPressGesture手势触发场景。 |
| fingerList<sup>8+</sup> | FingerInfo[] | 触发事件的所有手指信息，用于LongPressGesture与TapGesture手势触发场景。 |
| offsetX | number | 手势事件x轴偏移量，单位为vp，用于PanGesture手势触发场景。 |
| offsetY | number | 手势事件y轴偏移量，单位为vp，用于PanGesture手势触发场景。 |
| angle | number | 用于RotationGesture手势触发场景时，表示旋转角度；用于SwipeGesture手势触发场景时，表示滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| speed<sup>8+</sup> | number | 滑动手势速度，即所有手指滑动的平均速度，单位为vp/秒，用于SwipeGesture手势触发场景。 |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点x轴坐标，单位为vp，用于PinchGesture手势触发场景。 |
| pinchCenterY | number | 捏合手势中心点y轴坐标，单位为vp，用于PinchGesture手势触发场景。 |
- SourceType
| 名称 | 描述 |
| -------- | -------- |
| Unknown | 未知设备。 |
| Mouse | 鼠标。 |
| TouchScreen | 触摸屏。 |
- FingerInfo对象说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| id | number | 手指的索引编号。 |
| globalX | number | 相对于设备屏幕左上角的x轴坐标。 |
| globalY | number | 相对于设备屏幕左上角的y轴坐标。 |
| localX | number | 相对于当前组件元素左上角的x轴坐标。 |
| localY | number | 相对于当前组件元素左上角的y轴坐标。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 8b2ee890
# Video
视频播放组件。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
视频播放组件。
## 需要权限
使用网络视频时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。
......@@ -16,7 +17,7 @@
## 接口
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
**参数：**
......@@ -51,16 +52,16 @@
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onStart(event:()&nbsp;=&gt;&nbsp;void) | 播放时触发该事件。 |
| onPause(event:()&nbsp;=&gt;&nbsp;void) | 暂停时触发该事件。 |
| onFinish(event:()&nbsp;=&gt;&nbsp;void) | 播放结束时触发该事件。 |
| onError(event:()&nbsp;=&gt;&nbsp;void) | 播放失败时触发该事件。 |
| onPrepared(callBack:(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。<br/>- duration: 视频的时长。 |
| onSeeking(callBack:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息，单位为s。 |
| onSeeked(callBack:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后，上报播放时间信息，单位为s。 |
| onUpdate(callBack:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onStart(event:()&nbsp;=&gt;&nbsp;void) | 播放时触发该事件。 |
| onPause(event:()&nbsp;=&gt;&nbsp;void) | 暂停时触发该事件。 |
| onFinish(event:()&nbsp;=&gt;&nbsp;void) | 播放结束时触发该事件。 |
| onError(event:()&nbsp;=&gt;&nbsp;void) | 播放失败时触发该事件。 |
| onPrepared(callback:(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。<br/>- duration: 视频的时长。 |
| onSeeking(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息，单位为s。 |
| onSeeked(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后，上报播放时间信息，单位为s。 |
| onUpdate(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 |
## VideoController
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 8b2ee890
......@@ -21,7 +21,7 @@ show(options: TextPickerDialogOptions)
| range | string[] | 是 | - | 选择器的数据选择范围。 |
| selected | number | 否 | 0 | 选中项在数组中的index值。 |
| value | string | 否 | 第一个元素值 | 选中项的值，优先级低于selected。 |
| defaultPickerItemHeight | number | 否 | - | 默认Picker内容项元素高度。 |
| defaultPickerItemHeight | number \| string | 否 | - | 默认Picker内容项元素高度。 |
| onAccept | (value: TextPickerResult) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
| onChange | (value: TextPickerResult) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ 8b2ee890
# 背景设置
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
设置组件的背景色。
## 权限列表
无
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| backgroundColor | Color | - | 设置组件的背景色。 |
| backgroundImage | src:&nbsp;string,<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | - | src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat参数：设置背景图片的重复样式，默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | Auto | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 |
| backgroundImagePosition | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置背景图在组件中显示位置。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。 |
| backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat：设置背景图片的重复样式，默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>默认值：ImageSize.Auto |
| backgroundImagePosition | {<br/>x?:&nbsp;[Length](ts-types.md#length),<br/>y?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 8b2ee890
# 边框设置
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
设置组件边框样式。
## 权限列表
无
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| border | {<br/>width?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>radius?:&nbsp;Length,<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)<br/>} | - | 统一边框样式设置接口。 |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | &nbsp;BorderStyle.Solid | 设置元素的边框样式。 |
| borderWidth | Length | 0 | 设置元素的边框宽度。 |
| borderColor | Color | - | 设置元素的边框颜色。 |
| borderRadius | Length | 0 | 设置元素的边框圆角半径。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| border | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>radius?:&nbsp;[Length](ts-types.md#length),<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)<br/>} | 统一边框样式设置接口。 |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid |
| borderWidth | [Length](ts-types.md#length) | 设置元素的边框宽度。 |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置元素的边框颜色。 |
| borderRadius | [Length](ts-types.md#length) | 设置元素的边框圆角半径。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 8b2ee890
......@@ -5,24 +5,19 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | - | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
| 名称 | 参数类型 | 描述 |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
## MenuItem
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 |
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ---------------------- |
| value | string | 菜单项文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
......
zh-cn/readme/Misc软件服务子系统.md
浏览文件 @ 8b2ee890
......@@ -22,5 +22,5 @@
**Misc软件服务子系统**
miscservices\_time
[time_time_service](https://gitee.com/openharmony/time_time_service)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或