diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md index b91476d6a6e485f6521f52335259233fdcbea967..20429e0b1b1bfec2da8c3d6063a4328f52c58bf3 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md @@ -1,10 +1,11 @@ # XComponent - > **NOTE**
+The **\** can accept and display the EGL/OpenGL ES and media data input. - > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - The **\** can accept and display the EGL/OpenGL ES and media data input. ## Required Permissions @@ -12,11 +13,11 @@ ## Child Components - Not supported + Not supported ## APIs - XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) +XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) **Parameters** diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index e90b0a729c4ae239724536c3ed67753f9ee59e1b..34df53141d1f57b55eb46f86da325b0bd5732beb 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -1,55 +1,53 @@ # CanvasGradient +**CanvasGradient** provides a canvas gradient object. > **NOTE** > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -**CanvasGradient** provides a canvas gradient object. - - ## addColorStop addColorStop(offset: number, color: string): void Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | offset | number | Yes | 0 | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. | - | color | string | Yes | '#ffffff'| Gradient color to set. | - -- Example - - ```ts - // xxx.ets - @Entry - @Component - struct Page45 { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - var grad = this.context.createLinearGradient(50,0, 300,100) - grad.addColorStop(0.0, 'red') - grad.addColorStop(0.5, 'white') - grad.addColorStop(1.0, 'green') - this.context.fillStyle = grad - this.context.fillRect(0, 0, 500, 500) - }) - } - .width('100%') - .height('100%') +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1. | +| color | string | Yes | '#ffffff'| Gradient color to set. | + +**Example** + +```ts +// xxx.ets +@Entry +@Component +struct Page45 { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createLinearGradient(50,0, 300,100) + grad.addColorStop(0.0, 'red') + grad.addColorStop(0.5, 'white') + grad.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) } - } - ``` + .width('100%') + .height('100%') + }} +``` - ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png) +![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png) \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md index 161e30cef3b73797b6e14be707306f38eb80b175..7493fddc24799d4741cad5b61cb4ee71a7700c96 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -46,10 +46,10 @@ Swiper(value:{controller?: SwiperController}) | displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.
Default value: **SwiperDisplayMode.Stretch**| | cachedCount8+ | number | Number of child components to be cached.
Default value: **1** | | disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | -| curve8+ | [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.
Default value: **Curve.Ease**| -| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | Style of the navigation dots indicator.
- **left**: distance between the navigation dots indicator and the left edge of the **\** component.
- **top**: distance between the navigation dots indicator and the top edge of the **\** component.
- **right**: distance between the navigation dots indicator and the right edge of the **\** component.
- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\** component.
- **size**: diameter of the navigation dots indicator.
- **color**: color of the navigation dots indicator.
- **selectedColor**: color of the selected navigation dot.| +| curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | 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.
Default value: **Curve.Ease** | +| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
mask?: boolean,
color?: [ResourceColor](../../ui/ts-types.md),
selectedColor?: [ResourceColor](../../ui/ts-types.md)
} | Style of the navigation dots indicator.
- **left**: distance between the navigation dots indicator and the left edge of the **\** component.
- **top**: distance between the navigation dots indicator and the top edge of the **\** component.
- **right**: distance between the navigation dots indicator and the right edge of the **\** component.
- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\** component.
- **size**: diameter of the navigation dots indicator.
- **color**: color of the navigation dots indicator.
- **selectedColor**: color of the selected navigation dot.| | displayCount8+ | number\|string | Number of elements to display.
Default value: **1** | -| effectMode8+ | EdgeEffect | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**| +| effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**| ## SwiperDisplayMode @@ -98,7 +98,7 @@ Stops this animation. ### onChange -onChange( index: number) => void +onChange(event: (index: number) => void) Triggered when the index of the currently displayed component changes. diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 608cb0244ae7d303c8272ce8fa0af16f446a3fa3..c405017254d709c348ac88395732900c8d1b60e5 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -25,7 +25,7 @@ None | 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 8+ | Color \| string \| [Resource](../../ui/ts-types.md) | - | Adds the color blend effect to the current component. The input parameter is the blended color. | +| colorBlend8+ | Color \| string \| [Resource](../../ui/ts-types.md#resource-type) | - | 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**.| @@ -40,7 +40,7 @@ You can preview how this component looks on a real device. The preview is not ye @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) diff --git a/en/application-dev/ui/js-framework-syntax-css.md b/en/application-dev/ui/js-framework-syntax-css.md index 120e6d727b6b267bcec3d53ccabcc47732c26ad5..46fcc170df8f4688da555b6874a6842c1c6806e8 100644 --- a/en/application-dev/ui/js-framework-syntax-css.md +++ b/en/application-dev/ui/js-framework-syntax-css.md @@ -85,11 +85,11 @@ The following is an example: ```css /* Page style xxx.css */ -/\* Set the style for all
components. \*/ +/* Set the style for all
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,11 +101,11 @@ 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 > text { color: #fa2a2d; }