Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 2b654e2b 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (19261) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 aea97393
显示空白变更内容
内联 并排
Showing with 675 addition and 348 deletion
en/application-dev/quick-start/multi-hap-release-deployment.md
浏览文件 @ 2b654e2b
......@@ -9,7 +9,9 @@ Below is the process of developing, debugging, releasing, and deploying multiple
You can use [DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio) to create multiple modules as needed and develop services in respective modules.
## Debugging
After building code into one or more HAP files and installing or updating these HAP files, you can debug them by using the methods:
After building code into one or more HAP files and installing or updating these HAP files, you can debug them. You can leverage a single set of code and files to build multiple target editions for different audiences, deployment environments, operating environments, and more. For details, see [Customizing Multi-Target and Multi-Product Builds](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/customized-multi-targets-and-products-0000001430013853-V3?catalogVersion=V3).
You can debug HAP files using the methods:
* Using DevEco Studio for debugging
Follow the instructions in [Debugging Configuration](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section10491183521520).
......@@ -49,7 +51,7 @@ After building code into one or more HAP files and installing or updating these
// The execution result is as follows:
uninstall bundle successfully.
```
After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](https://docs.openharmony.cn/pages/v3.2Beta/en/application-dev/tools/aa-tool.md/).
After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](../tools/aa-tool.md).
## Release
When your application package meets the release requirements, you can package and build it into an App Pack and release it to the application market on the cloud. The application market verifies the signature of the App Pack. If the signature verification is successful, the application market obtains the HAP files from the App Pack, signs them, and distributes the signed HAP files.
......
en/application-dev/reference/apis/js-apis-curve.md
浏览文件 @ 2b654e2b
......@@ -153,14 +153,14 @@ Creates a spring animation curve. If multiple spring animations are applied to t
| --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
**Example**
......@@ -187,13 +187,13 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
| --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. In addition, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the **interpolate** function of the curve.|
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
**Example**
......@@ -220,14 +220,12 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Interpolation curve.|
**Example**
```ts
......@@ -235,6 +233,37 @@ import Curves from '@ohos.curves'
Curves.interpolatingSpring(100, 1, 228, 30) // Create an interpolating spring curve whose duration is subject to spring parameters.
```
## Curves.customCurve<sup>10+</sup>
customCurve(interpolate: (fraction: number) => number): ICurve
Creates a custom curve.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ----------- | ---------------------------- | ---- | ------------------------------------------------------------ |
| interpolate | (fraction: number) => number | Yes | Custom interpolation callback.<br>**fraction**: input x value for interpolation when the animation starts. Value range: [0, 1]<br>The return value is the y value of the curve. Value range: [0, 1]<br>**NOTE**<br>If **fraction** is **0**, the return value **0** corresponds to the animation start point; any other return value means that the animation jumps at the start point.<br>If **fraction** is **1**, the return value **1** corresponds to the animation end point; any other return value means that the end value of the animation is not the value of the state variable, which will result in an effect of transition from that end value to the value of the state variable.|
**Return value**
| Type | Description |
| ----------------- | ---------------- |
| [ICurve](#icurve) | Interpolation curve.|
**Example**
```ts
import Curves from '@ohos.curves'
interpolate(fraction) {
return Math.sqrt(fraction);
}
Curves.customCurve(this.interpolate) // Create a custom curve.
```
## ICurve
......
en/application-dev/reference/arkui-ts/ts-types.md
浏览文件 @ 2b654e2b
# Types
>**NOTE**
>
>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Resource
The **Resource** type is used to reference resources for setting component attributes.
......@@ -10,7 +14,7 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
**belonging**: group to which the resource belongs, which can be **'sys'** or **'app'**.
**type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
**type**: resource type, which can be '**boolean'**, **'color'**, **'float'**, **'intarray'**, **'integer'**, **'pattern'**, '**plural'**, **'strarray'**, **'string'**, or **'media'**.
**name**: resource name, which is determined during resource definition.
......@@ -27,7 +31,7 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
The **Length** type is used to represent a size unit.
| Type | Description |
| -------- | -------------------------------------- |
| --------------------- | -------------------------------------- |
| string | String type. Specify the length unit explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.|
| number | Number type. The default unit is vp. |
| [Resource](#resource) | Size referenced from system or application resources. |
......@@ -37,7 +41,7 @@ The **Length** type is used to represent a size unit.
The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type.
| Type | Description |
| -------- | ---------------------------- |
| --------------------- | ------------------------- |
| string | String type. |
| [Resource](#resource) | String referenced from system or application resources.|
......@@ -46,7 +50,7 @@ The **ResourceStr** type is used to represent the types that can be used by inpu
The **Padding** type is used to describe the paddings in different directions of a component.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | --------------- |
| ------ | ----------------- | ---- | -------------------- |
| top | [Length](#length) | No | Height of the padding on the top of the component. |
| right | [Length](#length) | No | Width of the padding on the right of the component.|
| bottom | [Length](#length) | No | Height of the padding at the bottom of the component. |
......@@ -57,7 +61,7 @@ The **Padding** type is used to describe the paddings in different directions of
The **Margin** type is used to describe the margins in different directions of a component.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | --------------- |
| ------ | ----------------- | ---- | -------------------- |
| top | [Length](#length) | No | Height of the margin above the component. |
| right | [Length](#length) | No | Width of the margin on the right of the component.|
| bottom | [Length](#length) | No | Height of the margin below the component. |
......@@ -68,7 +72,7 @@ The **Margin** type is used to describe the margins in different directions of a
The **EdgeWidths** type is used to describe the edge widths in different directions of a component.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | -------- |
| ------ | ----------------- | ---- | -------- |
| top | [Length](#length) | No | Width of the top edge of the component.|
| right | [Length](#length) | No | Width of the right edge of the component.|
| bottom | [Length](#length) | No | Width of the bottom edge of the component.|
......@@ -79,7 +83,7 @@ The **EdgeWidths** type is used to describe the edge widths in different directi
The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component.
| Name | Type | Mandatory | Description |
| ----------- | ------ | ---- | ---------- |
| ----------- | ----------------- | ---- | ---------- |
| topLeft | [Length](#length) | No | Radius of the top left rounded corner of the component.|
| topRight | [Length](#length) | No | Radius of the top right rounded corner of the component.|
| bottomLeft | [Length](#length) | No | Radius of the bottom left rounded corner of the component.|
......@@ -90,7 +94,7 @@ The **BorderRadiuses** type is used to describe the radius of the rounded corner
The **EdgeColors** type is used to describe the edge colors of a component.
| Name | Type | Mandatory | Description |
| ------ | ------------- | ---- | -------- |
| ------ | ------------------------------- | ---- | -------- |
| top | [ResourceColor](#resourcecolor) | No | Color of the top edge of the component.|
| right | [ResourceColor](#resourcecolor) | No | Color of the right edge of the component.|
| bottom | [ResourceColor](#resourcecolor) | No | Color of the bottom edge of the component.|
......@@ -101,7 +105,7 @@ The **EdgeColors** type is used to describe the edge colors of a component.
The **EdgeStyles** type is used to describe the edge styles of a component.
| Name | Type | Mandatory | Description |
| ------ | ----------- | ---- | -------- |
| ------ | ---------------------------------------- | ---- | -------- |
| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top edge of the component.|
| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the right edge of the component.|
| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the bottom edge of the component.|
......@@ -113,7 +117,7 @@ The **EdgeStyles** type is used to describe the edge styles of a component.
The **Offset** type is used to describe the offset coordinates of a component in the layout.
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------- |
| ---- | ----------------- | ---- | -------- |
| dx | [Length](#length) | Yes | X coordinate of the offset.|
| dy | [Length](#length) | Yes | Y coordinate of the offset.|
......@@ -122,18 +126,18 @@ The **Offset** type is used to describe the offset coordinates of a component in
The **ResourceColor** type is used to describe the color types of resources.
| Type | Description |
| ---------------------------------------- | ------------------------------------------------- |
| ----------------------------------- | ---------------------------------------- |
| [Color](ts-appendix-enums.md#color) | Color enums. |
| number | Color in hexadecimal notation. RGB is supported. Example: **0xffffff** |
| string | Color in RGB or ARGB notation. Example: **'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'** |
| [Resource](#resource) | Color referenced from system or application resources.|
| string | Color in RGB or ARGB notation. Example: **'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'**|
| [Resource](#resource) | Color referenced from system or application resources. |
## ColoringStrategy
The **ColoringStrategy** type is used to describe the foreground colors.
| Name | Description |
| --------- | ------- |
| ------ | --------------- |
| INVERT | Inverse of the component background color.|
## LengthConstrain
......@@ -141,7 +145,7 @@ The **ColoringStrategy** type is used to describe the foreground colors.
The **LengthConstrain** type is used to describe the maximum and minimum lengths of a component.
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ------- |
| --------- | ----------------- | ---- | ------- |
| minLength | [Length](#length) | Yes | Minimum length of the component.|
| maxLength | [Length](#length) | Yes | Maximum length of the component.|
......@@ -150,8 +154,8 @@ The **LengthConstrain** type is used to describe the maximum and minimum lengths
The **Font** type is used to set the text style.
| Name | Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| Name | Type | Mandatory | Description |
| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.|
| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | 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.|
| family | string \| [Resource](#resource) | No | Font family of the text. 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'**. Currently, only the **'sans-serif'** font is supported.|
......@@ -173,7 +177,7 @@ The **Area** type is used to describe the area information of a component.
The **Position** type is used to represent coordinates of a point.
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------------------- |
| ---- | ----------------- | ---- | --------------------------- |
| x | [Length](#length) | No | X coordinate. The value is of the number type in vp when used as the return value.|
| y | [Length](#length) | No | Y coordinate. The value is of the number type in vp when used as the return value.|
......@@ -182,7 +186,7 @@ The **Position** type is used to represent coordinates of a point.
The **ConstraintSizeOptions** type is used to set the size constraints of a component during component layout.
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ------- |
| --------- | ----------------- | ---- | ------- |
| minWidth | [Length](#length) | No | Minimum width of the component.|
| maxWidth | [Length](#length) | No | Maximum width of the component.|
| minHeight | [Length](#length) | No | Minimum height of the component.|
......@@ -193,7 +197,7 @@ The **ConstraintSizeOptions** type is used to set the size constraints of a comp
The **SizeOptions** type is used to set the width and height.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ----- |
| ------ | ----------------- | ---- | ----- |
| width | [Length](#length) | No | Width of the component.|
| height | [Length](#length) | No | Height of the component.|
......@@ -228,11 +232,82 @@ The **CustomBuilder** type is used to define custom UI descriptions in component
## PixelStretchEffectOptions<sup>10+</sup>
Describes the pixel stretch effect options.
The **PixelStretchEffectOptions** type is used to describe the pixel stretch effect options.
| Name | Type | Mandatory | Description |
| ----------- | ------ | ---- | ---------- |
| left | [Length](#length) | No | Length by which a pixel is stretched towards the left edge of the image.|
| ------ | ----------------- | ---- | -------------- |
| left | [Length](#length) | No | Length by which a pixel is stretched towards the left edge of the image. |
| right | [Length](#length) | No | Length by which a pixel is stretched towards the right edge of the image.|
| top | [Length](#length) | No | Length by which a pixel is stretched towards the top edge of the image.|
| bottom | [Length](#length) | No | Length by which a pixel is stretched towards the bottom edge of the image.|
## ModalTransition<sup>10+</sup>
The **ModalTransition** type is used to set the transition type for a full-screen modal.
| Name | Description |
| ------- | ------------ |
| NONE | No transition animation for the modal. |
| DEFAULT | Slide-up and slide-down animation for the modal. |
| ALPHA | Opacity gradient animation for the modal. |
## Dimension<sup>10+</sup>
The **Length** type is used to represent a size unit.
| Type | Description |
| --------------------- | -------------------------------------- |
| [PX](#px10) | Physical pixel unit type. The unit px must be included, for example, **'10px'**.|
| [VP](#vp10) | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.|
| [FP](#fp10) | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.|
| [LPX](#lpx10) | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.|
| [Percentage](#percentage10) | Percentage type. The unit % must be included, for example, **'10%'**.|
| [Resource](#resource) | Size referenced from system or application resources.|
## PX<sup>10+</sup>
The **PX** type is used to represent a length in px.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}px | Physical pixel unit type. The unit px must be included, for example, **'10px'**.|
## VP<sup>10+</sup>
The **VP** type is used to represent a length in vp.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}vp | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.|
## FP<sup>10+</sup>
The **FP** type is used to represent a length in fp.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}fp | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.|
## LPX<sup>10+</sup>
The **LPX** type is used to represent a length in lpx.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}lpx | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.|
## Percentage<sup>10+</sup>
The **Percentage** type is used to represent a length in percentage.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}% | Percentage type. The unit % must be included, for example, **'10%'**.|
## Degree<sup>10+</sup>
The **Degree** type is used to represent a length in deg.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}deg | Degree type. The unit deg must be included, for example, **'10deg'**.|
en/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ 2b654e2b
# Background
You can set the background of a component.
You can set the background for a component.
> **NOTE**
>
......@@ -11,12 +11,22 @@ You can set the background of a component.
| Name| Type| Description|
| -------- | -------- | -------- |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>The value range of **width** and **height** is [0, +∞).<br>Default value: **ImageSize.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. If **height** is set but **width** is not, the image width is adjusted based on the original aspect ratio of the image.|
| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundBlurStyle<sup>9+</sup> | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.<br>**options**: background blur options. Optional.<br>This API is supported in ArkTS widgets.|
## BackgroundBlurStyleOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No | Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No | Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
## Example
### Example 1
```ts
// xxx.ets
@Entry
......@@ -84,3 +94,30 @@ struct BackgroundExample {
```
![en-us_image_0000001211898502](figures/en-us_image_0000001211898502.png)
### Example 2
```ts
// xxx.ets
@Entry
@Component
struct BackgroundBlurStyleDemo {
build() {
Column() {
Row() {
Text("Thin Material")
}
.width('50%')
.height('50%')
.backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT })
.position({ x: '15%', y: '30%' })
}
.height('100%')
.width('100%')
.backgroundImage($r('app.media.bg'))
.backgroundImageSize(ImageSize.Cover)
}
}
```
![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)
en/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md 已删除 100644 → 0
浏览文件 @ aea97393
# Background Blur
You can apply background blur effects to a component.
> **NOTE**
>
> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs provided by this module are system APIs.
## Attributes
| Name | Parameter | Description |
| -------------------- | ----------------------- | ------------------------ |
| backgroundBlurStyle | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.<br>**options**: background blur options. This parameter is optional.<br>This API is supported in ArkTS widgets.|
## BackgroundBlurStyleOptions<sup>10+</sup>
| Name| Type| Mandatory| Description|
| ----------- | ------| ------ | ------ |
| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No| Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No| Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
## Example
```ts
// xxx.ets
@Entry
@Component
struct BackgroundBlurStyleDemo {
build() {
Column() {
Row() {
Text("Thin Material")
}
.width('50%')
.height('50%')
.backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.Light, adaptiveColor: AdaptiveColor.Default })
.position({ x: '15%', y: '30%' })
}
.height('100%')
.width('100%')
.backgroundImage($r('app.media.bg'))
.backgroundImageSize(ImageSize.Cover)
}
}
```
![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)
en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 2b654e2b
......@@ -14,6 +14,7 @@
| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container (**\<Flex>**, **\<Column>**, **\<Row>**, or **\<GridRow>**).<br>**\<GridCol>** can have the **alignsSelf** attribute bound to change its own layout along the cross axis.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.|
| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
## Example
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 2b654e2b
# Image Effects
Image effects include blur, shadow, and much more.
Image effects include blur, shadow, spherical effect, and much more.
> **NOTE**
>
......@@ -11,18 +11,21 @@ Image effects include blur, shadow, and much more.
| Name | Type | Default Value| Description |
| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | Applies 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.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
| backdropBlur | number | - | Applies 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.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
| shadow | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10) | - | Applies a shadow effect to the current component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>When the value type is **ShadowStyle**, the shadow style can be specified.<br>Since API version 9, this API is supported in ArkTS widgets, except that the [ShadowStyle](#shadowstyle10) type is not supported.|
| 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.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| brightness | number | 1.0 | Applies 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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| saturate | number | 1.0 | Applies 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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| contrast | number | 1.0 | Applies 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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion, and **0** indicates that the image does not change. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image conversion ratio. The value **1** indicates the image is completely sepia, and **0** indicates that the image does not change. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
| hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then –180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Applies the color blend effect to the current component. The input parameter is the blended color.<br>Since API version 9, this API is supported in ArkTS widgets.|
| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | Content blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
| backdropBlur | number | - | Background blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the background is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
| shadow | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10)<sup>10+</sup> | - | Shadow of the component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>When the value type is **ShadowStyle**, the shadow style can be specified.<br>Since API version 9, this API is supported in ArkTS widgets, except that the [ShadowStyle](#shadowstyle10) type is not supported.|
| grayscale | number | 0.0 | Grayscale conversion ratio of the component. If the value is **1.0**, the component is completely converted to grayscale. If the value is **0.0**, the component remains unchanged. Between 0 and 1, the value applies a linear multiplier on the grayscale effect. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| brightness | number | 1.0 | Brightness of the component. 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 greater value indicates a higher brightness.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| saturate | number | 1.0 | Saturation of the component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. If the value is **1**, the source image is displayed. If the value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. If the value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| contrast | number | 1.0 | Contrast of the 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.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| invert | number | 0 | Inversion ratio of the component. If the value is **1**, the component is completely inverted. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sepia | number | 0 | Sepia conversion ratio of the component. If the value is **1**, the image is completely sepia. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
| hueRotate | number \| string | '0deg' | Hue rotation angle of the component.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sphericalEffect<sup>10+</sup> | [number] | - | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.|
| lightUpEffect<sup>10+</sup> | [number] | - | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image. |
## ShadowOptions
......@@ -41,12 +44,12 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| ------ | -------------------------------------- |
| OuterDefaultXS | Mini shadow.|
| OuterDefaultSM | Small shadow.|
| OuterDefaultMD | Medium shadow.|
| OuterDefaultLG | Large shadow.|
| OuterFloatingSM | Floating small shadow.|
| OuterFloatingMD | Floating medium shadow.|
| OUTER_DEFAULT_XS | Mini shadow.|
| OUTER_DEFAULT_SM | Small shadow.|
| OUTER_DEFAULT_MD | Medium shadow.|
| OUTER_DEFAULT_LG | Large shadow.|
| OUTER_FLOATING_SM | Floating small shadow.|
| OUTER_FLOATING_MD | Floating medium shadow.|
## Example
......@@ -147,3 +150,177 @@ struct ImageEffectsExample {
```
![imageeffect](figures/imageeffect.png)
### Example 3
You can apply a spherical effect to a component to make it appear spherized.
```ts
// xxx.ets
@Entry
@Component
struct SphericalEffectExample {
build() {
Stack() {
TextInput({placeholder: "Enter a percentage."})
.width('50%')
.height(35)
.type(InputType.Number)
.enterKeyType(EnterKeyType.Done)
.caretColor(Color.Red)
.placeholderColor(Color.Blue)
.placeholderFont({
size: 20,
style: FontStyle.Italic,
weight: FontWeight.Bold
})
.sphericalEffect(0.5)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with the spherical effect applied:
![textInputSpherical1](figures/textInputSpherical1.png)
Below is how the component looks without the spherical effect applied:
![textInputSpherical2](figures/textInputSpherical2.png)
### Example 4
You can apply a light up effect to a component.
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with **lightUpEffect** set to **0.6**:
![textLightUp3](figures/textLightUp3.png)
Below is how the component looks with **lightUpEffect** set to **0.2**:
![textLightUp2](figures/textLightUp2.png)
Below is how the component looks without the light up effect applied:
![textLightUp1](figures/textLightUp1.png)
### Example 5
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
@State isLunar: boolean = false
private selectedDate: Date = new Date('2028-08-08')
build() {
Stack() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate
})
.lunar(this.isLunar)
.onChange((value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info('select current date is: ' + JSON.stringify(value))
})
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
![datePickerLightUp2](figures/datePickerLightUp2.png)
Below is how the component looks without the light up effect applied:
![datePickerLightUp1](figures/datePickerLightUp1.png)
### Example 6
You can apply a pixel stretch effect to a component.
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:10,left:10,right:10,bottom:10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with **lightUpEffect** set to **0.6**:
![textPixelStretch1](figures/textPixelStretch1.png)
Below is how the component looks without the pixel stretch effect applied:
![textPixelStretch2](figures/textPixelStretch2.png)
### Example 7
Based on Example 6, change the length values of the pixel stretch effect to negative:
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks:
![textPixelStretch3](figures/textPixelStretch3.png)
Compared with the original image, the effect drawing is implemented in two steps:
1. The image size is reduced. The resultant size is the original image size minus
the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
**right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md 已删除 100644 → 0
浏览文件 @ aea97393
# Light Up Effect
You can apply a light up effect to a component.
> **NOTE**
>
> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| lightUpEffect | [number] | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is 0, the component is dark. If the value is 1, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with **lightUpEffect** set to **0.6**:
![textLightUp3](figures/textLightUp3.png)
Below is how the component looks with **lightUpEffect** set to **0.2**:
![textLightUp2](figures/textLightUp2.png)
Below is how the component looks without the light up effect applied:
![textLightUp1](figures/textLightUp1.png)
### Example 2
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
@State isLunar: boolean = false
private selectedDate: Date = new Date('2028-08-08')
build() {
Stack() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate
})
.lunar(this.isLunar)
.onChange((value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info('select current date is: ' + JSON.stringify(value))
})
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
![datePickerLightUp2](figures/datePickerLightUp2.png)
Below is how the component looks without the light up effect applied:
![datePickerLightUp1](figures/datePickerLightUp1.png)
en/application-dev/reference/arkui-ts/ts-universal-attributes-modal-transition.md 0 → 100644
浏览文件 @ 2b654e2b
# Modal Transition
You can bind a full-screen modal to a component through the **bindContentCover** attribute. Better yet, with the **ModalTransition** parameter, you can apply a transition effect for when the component is inserted or deleted.
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
> Switching between landscape and portrait modes is not supported.
## Attributes
| Name | Parameter | Description |
| ---------------- | ---------------------------------------- | ---------------------------------------- |
| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>type?: [ModalTransition](ts-types.md#modaltransition10) | Binds a modal to the component, which can be displayed when the component is touched. The content of the modal is customizable. The transition type can be set to none, slide-up and slide-down animation, and opacity gradient animation.<br>**isShow**: whether to display the modal. Mandatory.<br>**builder**: content of the modal. Mandatory.<br>**type**: transition type of the modal. This parameter is optional. |
## Example
### Example 1
This example applies a custom animation to two modals whose transition type is none.
```ts
// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
@State isShow:boolean = false
@State isShow2:boolean = false
@Builder myBuilder2() {
Column() {
Button("close modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)
}
@Builder myBuilder() {
Column() {
Button("transition modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
}
.justifyContent(FlexAlign.Center)
.backgroundColor("#ff49c8ab")
.width('100%')
.height('100%')
}
}
```
![en-us_full_screen_modal_none_1](figures/en-us_full_screen_modal_none_1.gif)
### Example 2
This example applies a custom animation to two modals whose transition type is none.
```ts
// xxx.ets
import curves from '@ohos.curves';
@Entry
@Component
struct ModalTransitionExample {
@State @Watch("isShow1Change") isShow:boolean = false
@State @Watch("isShow2Change") isShow2:boolean = false
@State isScale1:number = 1;
@State isScale2:number = 1;
@State flag: boolean = true
@State show: string = 'show'
isShow1Change() {
this.isShow ? this.isScale1 = 0.95 : this.isScale1 = 1
}
isShow2Change() {
this.isShow2 ? this.isScale2 = 0.95 : this.isScale2 = 1
}
@Builder myBuilder2() {
Column() {
Button("close modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)
}
@Builder myBuilder() {
Column() {
Button("transition modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
.scale({x: this.isScale2, y: this.isScale2})
.animation({curve:curves.springMotion()})
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
}
.justifyContent(FlexAlign.Center)
.backgroundColor("#ff49c8ab")
.width('100%')
.height('100%')
.scale({ x: this.isScale1, y: this.isScale1 })
.animation({ curve: curves.springMotion() })
}
}
```
![en-us_full_screen_modal_none_2](figures/en-us_full_screen_modal_none_2.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md 已删除 100644 → 0
浏览文件 @ aea97393
# Pixel Stretch Effect
You can apply a pixel stretch effect to a component.
> **NOTE**
>
> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| pixelStretchEffect | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br> (1) The image shrinks from the four edges by the absolute value of length set through **options**. (2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all postive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction. 2. The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed. 3. If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:10,left:10,right:10,bottom:10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with the pixel stretch effect applied:
![textPixelStretch1](figures/textPixelStretch1.png)
Below is how the component looks without the pixel stretch effect applied:
![textPixelStretch2](figures/textPixelStretch2.png)
A comparison of the preceding two figures shows that, if the length values are positive, the original image is stretched.
### Example 2
Based on Example 1, change the length values of the pixel stretch effect to negative:
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks:
![textPixelStretch3](figures/textPixelStretch3.png)
Compared with the original image, the effect drawing is implemented in two steps:
1. The image size is reduced. The resultant size is the originial image size minus the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md 0 → 100644
浏览文件 @ 2b654e2b
# Sheet Transition
You can bind a sheet to a component through the **bindSheet** attribute. You can also set the sheet to the preset or custom height for when the component is inserted.
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
> Switching between landscape and portrait modes is not supported.
## Attributes
| Name| Parameter | Description|
| -------- | -------- | -------- |
| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>sheetStyle?: [SheetStyle](#sheetstyle10) | Binds a sheet to the component, which can be displayed when the component is touched. **isShow**: whether to display the sheet. Mandatory.<br>**builder**: content of the sheet. Mandatory.<br> **sheetStyle**: height and control bar visibility of the sheet. Optional. By default, the default height is **Large** and the control bar is visible.|
## SheetStyle<sup>10+</sup>
| Name | Type | Mandatory| Description |
| ------------------ | -------------------------------------- | ---- | ---------------------- |
| height | [SheetSize](#sheetsize10) \| [Length](ts-types.md#length) | No| Height of the sheet. |
| showDragBar | boolean | No | Whether the control bar is visible. |
## SheetSize<sup>10+</sup>
| Name| Description|
| -------- | -------- |
| MEDIUM | The sheet height is half of the screen height.|
| LARGE | The sheet height is almost the screen height.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
@State isShow:boolean = false
@State isShow2:boolean = false
@State sheetHeight:number = 300;
@State showDragBar:boolean = true;
@Builder myBuilder() {
Column() {
Button("change height")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.sheetHeight = 500;
})
Button("Set Illegal height")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.sheetHeight = null;
})
Button("close dragBar")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.showDragBar = false;
})
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
```
![en-us_sheet](figures/en-us_sheet.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md 已删除 100644 → 0
浏览文件 @ aea97393
# Spherical Effect
You can apply a spherical effect to a component to make it appear spherized.
> **NOTE**
>
> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| sphericalEffect | [number] | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is 0, the component remains unchanged. If the value is 1, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct SphericalEffectExample {
build() {
Stack() {
TextInput({placeholder: "Enter a percentage."})
.width('50%')
.height(35)
.type(InputType.Number)
.enterKeyType(EnterKeyType.Done)
.caretColor(Color.Red)
.placeholderColor(Color.Blue)
.placeholderFont({
size: 20,
style: FontStyle.Italic,
weight: FontWeight.Bold
})
.sphericalEffect(0.5)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with the spherical effect applied:
![textInputSpherical1](figures/textInputSpherical1.png)
Below is how the component looks without the spherical effect applied:
![textInputSpherical2](figures/textInputSpherical2.png)
en/readme/arkui.md
浏览文件 @ 2b654e2b
......@@ -6,7 +6,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
**Framework Structure**
![en-us_image_0000001267647869](../application-dev/ui/figures/en-us_image_0000001267647869.png)
![en-us_image_0000001183709904](../application-dev/ui/figures/arkui-framework.png)
As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of ArkUI. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs.
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或