diff --git a/en/application-dev/application-models/accessibilityextensionability.md b/en/application-dev/application-models/accessibilityextensionability.md index 5e88bb69d8fec4fc1abd5488a5998930a6a894ad..62f0bd981504d1249e04dcf62c0041e8091496bf 100644 --- a/en/application-dev/application-models/accessibilityextensionability.md +++ b/en/application-dev/application-models/accessibilityextensionability.md @@ -1,4 +1,4 @@ -# AccessibilityExtensionAbility Development +# AccessibilityExtensionAbility The **AccessibilityExtensionAbility** module provides accessibility extension capabilities based on the **ExtensionAbility** framework. You can develop your accessibility applications by applying the **AccessibilityExtensionAbility** template to enhance usability. diff --git a/en/application-dev/quick-start/start-with-ets-stage.md b/en/application-dev/quick-start/start-with-ets-stage.md index 978ffd47a206abc5f5b3e047a8d7f3dcc0e599e9..fb8593d555aec31c44e7a6658f6a68f2ab99dccb 100644 --- a/en/application-dev/quick-start/start-with-ets-stage.md +++ b/en/application-dev/quick-start/start-with-ets-stage.md @@ -37,14 +37,14 @@ - **AppScope** > **app.json5**: global configuration of your application. - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). -- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212). - **src > main > ets**: a collection of ArkTS source code. - **src > main > ets > entryability**: entry to your application/service. - **src > main > ets > pages**: pages included in your application/service. - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories). - **src > main > module.json5**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details, see [module.json5 Configuration File](module-configuration-file.md). - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application. -- **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation. + - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation. +- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212). - **build-profile.json5**: application-level configuration information, including the signature and product configuration. - **hvigorfile.ts**: application-level build script. diff --git a/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md b/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md index d147c049b2a9aa006b83bef9ed28b266340347db..002ea7b6728a93e26429934f95b04d74c8ab332c 100644 --- a/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md +++ b/en/application-dev/reference/apis/js-apis-inner-application-accessibilityExtensionContext.md @@ -610,7 +610,7 @@ Defines the accessibilityelement. Before calling APIs of **AccessibilityElement* **System capability**: SystemCapability.BarrierFree.Accessibility.Core -## attributeNames +### attributeNames attributeNames\(): Promise\>; @@ -636,7 +636,7 @@ rootElement.attributeNames().then((data) => { console.log('failed to get attribute names, because ' + JSON.stringify(err)); }); ``` -## attributeNames +### attributeNames attributeNames\(callback: AsyncCallback\>): void; @@ -664,7 +664,7 @@ rootElement.attributeNames((err, data) => { console.info('get attribute names success'); }); ``` -## AccessibilityElement.attributeValue +### attributeValue attributeValue\(attributeName: T): Promise\; @@ -709,7 +709,7 @@ try { console.log('failed to get attribute value, because ' + JSON.stringify(exception)); } ``` -## AccessibilityElement.attributeValue +### attributeValue attributeValue\(attributeName: T, callback: AsyncCallback\): void; @@ -752,7 +752,7 @@ try { console.log('failed to get attribute value, because ' + JSON.stringify(exception)); } ``` -## actionNames +### actionNames actionNames(): Promise\>; @@ -778,7 +778,7 @@ rootElement.actionNames().then((data) => { console.log('failed to get action names because ' + JSON.stringify(err)); }); ``` -## actionNames +### actionNames actionNames(callback: AsyncCallback\>): void; @@ -806,7 +806,7 @@ rootElement.actionNames((err, data) => { console.info('get action names success'); }); ``` -## performAction +### performAction performAction(actionName: string, parameters?: object): Promise\; @@ -849,7 +849,7 @@ try { console.log('failed to perform action, because ' + JSON.stringify(exception)); } ``` -## performAction +### performAction performAction(actionName: string, callback: AsyncCallback\): void; @@ -888,7 +888,7 @@ try { console.log('failed to perform action, because ' + JSON.stringify(exception)); } ``` -## performAction +### performAction performAction(actionName: string, parameters: object, callback: AsyncCallback\): void; @@ -932,7 +932,7 @@ try { console.log('failed to perform action, because ' + JSON.stringify(exception)); } ``` -## findElement('content') +### findElement('content') findElement(type: 'content', condition: string): Promise\>; @@ -971,7 +971,7 @@ try { console.log('failed to find element, because ' + JSON.stringify(exception)); } ``` -## findElement('content') +### findElement('content') findElement(type: 'content', condition: string, callback: AsyncCallback\>): void; @@ -1007,7 +1007,7 @@ try { console.log('failed to find element, because ' + JSON.stringify(exception)); } ``` -## findElement('focusType') +### findElement('focusType') findElement(type: 'focusType', condition: FocusType): Promise\; @@ -1046,7 +1046,7 @@ try { console.log('failed to find element, because ' + JSON.stringify(exception)); } ``` -## findElement('focusType') +### findElement('focusType') findElement(type: 'focusType', condition: FocusType, callback: AsyncCallback\): void; @@ -1082,7 +1082,7 @@ try { console.log('failed to find element, because ' + JSON.stringify(exception)); } ``` -## findElement('focusDirection') +### findElement('focusDirection') findElement(type: 'focusDirection', condition: FocusDirection): Promise\; @@ -1121,7 +1121,7 @@ try { console.log('failed to find element, because ' + JSON.stringify(exception)); } ``` -## findElement('focusDirection') +### findElement('focusDirection') findElement(type: 'focusDirection', condition: FocusDirection, callback: AsyncCallback\): void; diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png new file mode 100644 index 0000000000000000000000000000000000000000..589059ee8bf53b736cdadfc79ee44bbfd9d3db02 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_height.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png new file mode 100644 index 0000000000000000000000000000000000000000..c9d63dc6b6ff97b2b0ff3ae4599b787db8dd096f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_canvas_width.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md index 2fe773177813164169dc35eddeba176a95fa4f89..6cf611c47dfd4d3d08b3124ec50e38b0ca1a4da7 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -23,9 +23,9 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.| +| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.
**NOTE**
If the value is not within the range defined by the **min** and **max** parameters, the value of **min** is used.| | min | number | No| Minimum value of the current data segment.
Default value: **0**| -| max | number | No| Maximum value of the current data segment.
Default value: **100**| +| max | number | No| Maximum value of the current data segment.
Default value: **100**
**NOTE**
If the value of **max** is less than that of **min**, the default values **0** and **100** are used.
The values of **max** and **min** can be negative numbers.| ## Attributes @@ -36,8 +36,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | value | number | Value of the chart. It can be dynamically changed.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| | startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.| | endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.
Default value: **360**
Since API version 9, this API is supported in ArkTS widgets.| -| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.
Since API version 9, this API is supported in ArkTS widgets.| -| strokeWidth | Length | Stroke width of the chart.
Since API version 9, this API is supported in ArkTS widgets.| +| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.
Default value: **Color.Black**
Since API version 9, this API is supported in ArkTS widgets.| +| strokeWidth | Length | Stroke width of the chart.
Default value: **4**
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the default value.
The value cannot be in percentage.| ## ColorStop @@ -47,7 +47,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Description | | --------- | -------------------- | ------------------------------------------------------------ | -| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.| +| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 575b24c6ae39a82fdc9793301ffd581da96d1c59..d23a8649fc8a002b051036012570632cab47c6ad 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -10,7 +10,7 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects on ## APIs -CanvasRenderingContext2D(setting: RenderingContextSetting) +CanvasRenderingContext2D(settings?: RenderingContextSettings) Since API version 9, this API is supported in ArkTS widgets. @@ -18,7 +18,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Description | | ------- | ---------------------------------------- | ---- | ---------------------------------------- | -| setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | See [RenderingContextSettings](#renderingcontextsettings).| +| settings | [RenderingContextSettings](#renderingcontextsettings) | No | See [RenderingContextSettings](#renderingcontextsettings).| ### RenderingContextSettings @@ -57,6 +57,8 @@ Since API version 9, this API is supported in ArkTS widgets. | [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object.
Since API version 9, this API is supported in ArkTS widgets. | | [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object.
Since API version 9, this API is supported in ArkTS widgets. | | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets. | +| [height](#height) | number | Component height.
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.| +| [width](#width) | number | Component width.
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.| > **NOTE** > @@ -652,6 +654,68 @@ struct ImageSmoothingEnabled { ![en-us_image_0000001211898472](figures/en-us_image_0000001211898472.png) +### height + +```ts +// xxx.ets +@Entry +@Component +struct HeightExample { + 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(300) + .height(300) + .backgroundColor('#ffff00') + .onReady(() => { + let h = this.context.height + let w = this.context.width + this.context.fillRect(0, 0, 300, h/2) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![en-us_image_canvas_height](figures/en-us_image_canvas_height.png) + + +### width + +```ts +// xxx.ets +@Entry +@Component +struct WidthExample { + 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(300) + .height(300) + .backgroundColor('#ffff00') + .onReady(() => { + let h = this.context.height + let w = this.context.width + this.context.fillRect(0, 0, w/2, 300) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![en-us_image_canvas_width](figures/en-us_image_canvas_width.png) + + ## Methods diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index 3a1ef0bfa62a2081886367baef187b963490d8bb..b01457d9d6e564b7998492d88cd18bf5d8bcd293 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -44,7 +44,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | showSideBar | boolean | Whether to display the sidebar.
Default value: **true** | | controlButton | [ButtonStyle](#buttonstyle) | Attributes of the sidebar control button.| | showControlButton | boolean | Whether to display the sidebar control button.
Default value: **true**| -| sideBarWidth | number \| Length9+ | Width of the sidebar.
Default value: **200**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.
When set, the width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the width of the sidebar child component takes precedence.| +| sideBarWidth | number \| Length9+ | Width of the sidebar.
Default value: **200**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.
The width of the sidebar, whether it is specified or kept at the default, takes precedence over that of the sidebar child components.| | minSideBarWidth | number \| Length9+ | Minimum width of the sidebar.
Default value: **200**, in vp
**NOTE**
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
When set, the minimum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the minimum width of the sidebar child component takes precedence.| | maxSideBarWidth | number \| Length9+ | Maximum width of the sidebar.
Default value: **280**, in vp
**NOTE**
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
When set, the maximum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the maximum width of the sidebar child component takes precedence.| | autoHide9+ | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.
Default value: **true**
**NOTE**
The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.
Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).| 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 6819991d4c66ba1a96ca51dc4d56e7d900d24c0f..d5df61c6316ba122bb8d4bcb05032828310b0e7a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -45,7 +45,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | cachedCount8+ | number | Number of child components to be cached.
Default value: **1**
**NOTE**
**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| | disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | | 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) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.
Default value: **Curve.Linear**| -| indicatorStyle8+ | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator.
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.| +| indicatorStyle8+ | {
left?: [Length](ts-types.md#length),
top?: [Length](ts-types.md#length),
right?: [Length](ts-types.md#length),
bottom?: [Length](ts-types.md#length),
size?: [Length](ts-types.md#length),
mask?: boolean,
color?: [ResourceColor](ts-types.md),
selectedColor?: [ResourceColor](ts-types.md)
} | Style of the navigation point indicator.
\- **left**: distance between the navigation point indicator and the left edge of the **\** component.
\- **top**: distance between the navigation point indicator and the top edge of the **\** component.
\- **right**: distance between the navigation point indicator and the right edge of the **\** component.
\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\** component.
\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**
\- **mask**: whether to enable the mask for the navigation point indicator.
\- **color**: color of the navigation point indicator.
\- **selectedColor**: color of the selected navigation dot.| | displayCount8+ | number \| string | Number of elements to display per page.
Default value: **1**
**NOTE**
If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.
If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount - 1)] is evenly distributed among them on the main axis.| | effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**
**NOTE**
The spring effect does not take effect when the controller API is called.| diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 4c164070999d363b634dc618fa6660b33fbfe1ba..6b28fef85c3e3ea991aa9c99881513cd3d88061a 100644 --- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -10,7 +10,7 @@ Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text o ## APIs -OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings) +OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: RenderingContextSettings) Since API version 9, this API is supported in ArkTS widgets. @@ -20,7 +20,7 @@ Since API version 9, this API is supported in ArkTS widgets. | ------- | ------------------------------------------------------------ | ---- | ------------------------------------ | | width | number | Yes | Width of the offscreen canvas. | | height | number | Yes | Height of the offscreen canvas. | -| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes | See RenderingContextSettings.| +| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No | See RenderingContextSettings.| ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index 614faeb3055349f54006933512feb2c4bd54f520..208a439b20a26388f719f00fc0690cd292071098 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -30,7 +30,7 @@ You can bind a popup to a component, specifying its content, interaction logic, | Name | Type | Mandatory | Description | | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- | -| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder. | +| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder.
**NOTE**
The **popup** attribute is a universal attribute. A custom popup does not support display of another popup. The **position** attribute cannot be used for the first-layer container under the builder. If the **position** attribute is used, the popup will not be displayed. | | placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.
Default value: **Placement.Bottom**| | popupColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the popup. | | enableArrow | boolean | No | Whether to display an arrow.
Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.
Default value: **true**| @@ -100,7 +100,7 @@ struct PopupExample { .bindPopup(this.customPopup, { builder: this.popupBuilder, placement: Placement.Top, - maskColor: '0x33000000', + mask: {color:'0x33000000'}, popupColor: Color.Yellow, enableArrow: true, showInSubWindow: false,