diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_foreground_blur_style.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_foreground_blur_style.png new file mode 100644 index 0000000000000000000000000000000000000000..ea0a08e6503508d78d1ebe01a5b7e8bce57bb3a0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_foreground_blur_style.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/expandSafeArea1.png b/en/application-dev/reference/arkui-ts/figures/expandSafeArea1.png new file mode 100644 index 0000000000000000000000000000000000000000..40e41092c7283edb6882b81142ded877cf4941e0 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/expandSafeArea1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/expandSafeArea2.png b/en/application-dev/reference/arkui-ts/figures/expandSafeArea2.png new file mode 100644 index 0000000000000000000000000000000000000000..e8d017cafe092c9dd85f7c74ad4d85c3e501214d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/expandSafeArea2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/formLink.jpeg b/en/application-dev/reference/arkui-ts/figures/formLink.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..b3726499b1e4b26b49b30b49572ada3fd0ce77b8 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/formLink.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/figures/richeditor.gif b/en/application-dev/reference/arkui-ts/figures/richeditor.gif new file mode 100644 index 0000000000000000000000000000000000000000..90f6cd0caa2d2e7445e3a1b262afcdaad4b442ba Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/richeditor.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md b/en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md new file mode 100644 index 0000000000000000000000000000000000000000..d69ec2a9e833bec992c52ccd759519d131145487 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md @@ -0,0 +1,486 @@ +# RichEditor + +The \ is a component that supports interactive text editing and mixture of text and imagery. + +> **NOTE** +> +> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. + + +## Child Components + +This component can contain the [\](ts-basic-components-span.md) and [\](ts-basic-components-imagespan.md) child components. + + +## APIs + +RichEditor(value: RichEditorOptions) + +**Parameters** + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| value | [RichEditorOptions](#richeditoroptions) | Yes| Options for initializing the component.| + + +## Attributes + +The [universal attributes](ts-universal-attributes-size.md) are supported. + +## Events + +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. + +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onReady(callback: () => void) | Triggered when initialization of the component is completed.| +| onSelect(callback: (value: [RichEditorSelection](#richeditorselection)) => void) | Triggered when selection (by clicking the left mouse button, highlighting the text to select, and releasing the left mouse button) is performed.
- **value**: information about all selected spans.| +| aboutToIMEInput(callback: (value: [RichEditorInsertValue](#richeditorinsertvalue)) => boolean) | Triggered when content is about to be entered in the input method.
- **value**: content to be entered in the input method.| +| onIMEInputComplete(callback: (value: [RichEditorTextSpanResult](#richeditortextspanresult)) => void) | Triggered when text input is completed.
- **value**: text span information after text input is completed.| +| aboutToDelete(callback: (value: [RichEditorDeleteValue](#richeditordeletevalue)) => boolean) | Triggered when content is about to be deleted in the input method.
- **value**: information about the text span where the content to be deleted is located.| +| onDeleteComplete(callback: () => void) | Triggered when deletion in the input method is completed.| + +## RichEditorInsertValue + +Describes the text to be inserted. + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| insertOffset | number | Yes| Offset of the text to be inserted.| +| insertValue | string | Yes| Content of the text to be inserted.| + + +## RichEditorDeleteValue + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| offset | number | Yes| Offset of the text to be deleted.| +| direction | [RichEditorDeleteDirection](#richeditordeletedirection) | Yes| Direction of the delete operation.| +| length | number | Yes| Length of the content to be deleted.| +| richEditorDeleteSpans | Array<[RichEditorTextSpanResult](#richeditortextspanresult) \| [RichEditorImageSpanResult](#richeditorimagespanresult)> | Yes| Information about the text or image spans to be deleted.| + + +## RichEditorDeleteDirection + +Enumerates the directions of the delete operation. + +| Name | Description | +| -------- | ------------------------------ | +| BACKWARD | Backward. | +| FORWARD | Forward. | + + +## RichEditorTextSpanResult + +Provides the text span information. + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| spanPosition | [RichEditorSpanPosition](#richeditorspanposition) | Yes| Span position.| +| value | string | Yes| Text span content.| +| textStyle | [RichEditorTextStyleResult](#richeditortextstyleresult) | Yes| Text span style.| +| offsetInSpan | [number, number] | Yes| Start and end positions of the valid content in the text span.| + + +## RichEditorSpanPosition + +Provides the span position information. + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| spanIndex | number | Yes| Span index.| +| spanRange | [number, number] | Yes| Start and end positions of the span content in the **\** component.| + + +## RichEditorTextStyleResult + +Provides the text span style information returned by the backend. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Yes| Font color.| +| fontSize | number | Yes| Font size.| +| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes| Font style.| +| fontWeight | number | Yes| Font weight.| +| fontFamily | string | Yes| Font family.| +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Yes| Style and color of the text decorative line.| + + +## RichEditorImageSpanResult + +Provides the image span style information returned by the backend. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| size | [number, number] | Yes| Width and height of the image.| +| verticalAlign | [ImageSpanAlignment](ts-basic-components-imagespan.md#imagespanalignment) | Yes | Vertical alignment mode of the image.| +| objectFit | [ImageFit]((ts-basic-components-imagespan.md#imagefit)) | Yes| Scale mode of the image.| + + +## RichEditorOptions + +Defines the options for initializing the **\** component. + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| controller | [RichEditorController](#richeditorcontroller) | Yes| Controller for the **\** component.| + + +## RichEditorController + +Implements the controller for the **\** component. + +### Objects to Import + +``` +controller: RichEditorController = new RichEditorController() +``` + +### getCaretOffset + +getCaretOffset(): number + +Obtains the current cursor position. + +**Return value** + +| Type | Description | +| ----------------------- | ---------------- | +| number | Cursor position.| + +### setCaretOffset + +setCaretOffset(offset: number): boolean + +Sets the cursor position. + +**Parameters** + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| offset | number | Yes| Offset of the cursor.| + +**Return value** + +| Type | Description | +| ----------------------- | ---------------- | +| boolean | Whether the cursor position is set successfully.| + +### addTextSpan + +addTextSpan(value: string, options?: RichEditorTextSpanOptions): number + +Adds a text span. + +**Parameters** + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| value | string | Yes | Text content.| +| options | [RichEditorTextSpanOptions](#richeditortextspanoptions) | No | Text options.| + +**Return value** + +| Type | Description | +| ----------------------- | ---------------- | +| number | Position of the added text span.| + +### addImageSpan + +addImageSpan(value: PixelMap | ResourceStr, options?: RichEditorImageSpanOptions): number + +Adds an image span. + +**Parameters** + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| value | [PixelMap](../apis/js-apis-image.md#pixelmap7)\|[ResourceStr](ts-types.md#ResourceStr) | Yes | Image content.| +| options | [RichEditorImageSpanOptions](#richeditorimagespanoptions) | No | Image options.| + +**Return value** + +| Type | Description | +| ----------------------- | ---------------- | +| number | Position of the added image span.| + + +### updateSpanStyle + +updateSpanStyle(value: RichEditorUpdateTextSpanStyleOptions | RichEditorUpdateImageSpanStyleOptions): void + +Updates the text or image span style. + +**Parameters** + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| value | [RichEditorUpdateTextSpanStyleOptions](#richeditorupdatetextspanstyleoptions) \| [RichEditorUpdateImageSpanStyleOptions](#richeditorupdatetextspanstyleoptions) | Yes| Text or image span style options.| + + +### getSpans + +getSpans(value?: RichEditorRange): Array + +Obtains span information. + +**Parameters** + +| Name| Type | Mandatory| Description | +| ------ | ----------------------------------- | ---- | ---------------- | +| value | [RichEditorRange](#richeditorrange) | No | Range of the target span.| + +**Return value** + +| Type | Description | +| ----------------------- | ---------------- | +| Array<[RichEditorTextSpanResult](#richeditortextspanresult) \| [RichEditorImageSpanResult](#richeditorimagespanresult)> | Text and image span information.| + +### deleteSpans + +deleteSpans(value?: RichEditorRange): void + +Deletes the text and image spans in a specified range. + +**Parameters** + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| value | [RichEditorRange](#richeditorrange) | No| Range of the target spans. If this parameter is omitted, all text and image spans will be deleted.| + + +## RichEditorSelection + +Provides information about the selected content. + +| Name | Type | Mandatory| Description | +| --------- | ------------------------------------------------------------ | ---- | ---------- | +| selection | [number, number] | Yes | Range of the selected.| +| spans | Array<[RichEditorTextSpanResult](#richeditortextspanresult)\| [RichEditorImageSpanResult](#richeditorimagespanresult)> | Yes | Span information. | + + +## RichEditorUpdateTextSpanStyleOptions + +Defines the text span style options. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| start | number | No| Start position of the text span whose style needs to be updated. If this parameter is omitted, the value **0** will be used.| +| end | number | No| End position of the text span whose style needs to be updated. If this parameter is omitted, it indicates the end of the text span.| +| textStyle | [RichEditorTextStyle](#richeditortextstyle) | Yes| Text style.| + + +## RichEditorUpdateImageSpanStyleOptions + +Defines the image span style options. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| start | number | No| Start position of the image span whose style needs to be updated. If this parameter is omitted, the value **0** will be used.| +| end | number | No| End position of the image span whose style needs to be updated. If this parameter is omitted, it indicates the end of the image span.| +| imageStyle | [RichEditorImageSpanStyle](#richeditorimagespanstyle) | Yes| Image style.| + + +## RichEditorTextSpanOptions + +Describes the options for adding a text span. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| offset | number | No | Position of the text span to be added. If this parameter is omitted, the text span will be added to the end of all text strings.| +| style | [RichEditorTextStyle](#richeditortextstyle) | No | Style of the text span to be added. If this parameter is omitted, the default text style will be used.| + +## RichEditorTextStyle + +Provides the text style information. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.| +| fontSize | [Length](ts-types.md#length) \| number | No| Font size.| +| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style.| +| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No| Font weight.| +| fontFamily | [ResourceStr](ts-types.md#resourcestr) \| number \| string | No| Font family. Default value: **'HarmonyOS Sans'**.
Currently, only the default font is supported.| +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} \| number \| string | No| Style and color of the text decorative line.| + + +## RichEditorImageSpanOptions + +Defines the options for adding an image span. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| offset | number | No | Position of the image span to be added. If this parameter is omitted, the image span will be added to the end of all text strings.| +| imageStyle | [RichEditorImageSpanStyle](#richeditorimagespanstyle) | No | Image style. If this parameter is omitted, the default image style will be used.| + +## RichEditorImageSpanStyle + +Provides the image span style information. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| size | [Dimension, Dimension] | No| Width and height of the image.| +| verticalAlign | [ImageSpanAlignment](ts-basic-components-imagespan.md#imagespanalignment) | No | Vertical alignment mode of the image.| +| objectFit | [ImageFit]((ts-basic-components-imagespan.md#imagefit)) | No| Scale mode of the image.| + +## RichEditorRange + +Provides the span range information. + +| Name| Type| Mandatory| Description | +| ------ | -------- | ---- | -------------------------------------- | +| start | number | No| Start position. If this parameter is omitted, the value **0** will be used.| +| end | number | No| End position. If this parameter is omitted, it indicates the very end.| + + +## Example + +```ts +// xxx.ets +@Entry +@Component +struct Index { + controller: RichEditorController = new RichEditorController(); + options: RichEditorOptions = { controller: this.controller }; + private start: number = -1; + private end: number = -1; + @State message: string = "[-1, -1]" + @State content: string = "" + + build() { + Column() { + Column() { + Text("selection range:").width("100%") + Text() { + Span(this.message) + }.width("100%") + Text("selection content:").width("100%") + Text() { + Span(this.content) + }.width("100%") + } + .borderWidth(1) + .borderColor(Color.Red) + .width("100%") + .height("20%") + + Row() { + Button ("Update Style: Bold").onClick(() => { + this.controller.updateSpanStyle({ + start: this.start, + end: this.end, + textStyle: + { + fontWeight: FontWeight.Bolder + } + }) + }) + Button("Obtain Selection").onClick(() => { + this.content = ""; + this.controller.getSpans({ + start: this.start, + end: this.end + }).forEach(item => { + if ("imageStyle" in item) { + this.content += item.valueResourceStr; + this.content += "\n" + } else { + this.content += item.value; + this.content += "\n" + } + }) + }) + Button("Delete Selection").onClick(() => { + this.controller.deleteSpans({ + start: this.start, + end: this.end + }) + this.start = -1; + this.end = -1; + this.message = "[" + this.start + ", " + this.end + "]" + }) + } + .borderWidth(1) + .borderColor(Color.Red) + .width("100%") + .height("10%") + + Column() { + RichEditor(this.options) + .onReady(() => { + this.controller.addTextSpan("0123456789", + { + style: + { + fontColor: Color.Orange, + fontSize: 30 + } + }) + this.controller.addImageSpan($r("app.media.icon"), + { + imageStyle: + { + size: ["57px", "57px"] + } + }) + this.controller.addTextSpan("0123456789", + { + style: + { + fontColor: Color.Black, + fontSize: 30 + } + }) + }) + .onSelect((value: RichEditorSelection) => { + [this.start, this.end] = value.selection; + this.message = "[" + this.start + ", " + this.end + "]" + }) + .aboutToIMEInput((value: RichEditorInsertValue) => { + console.log("---------------------- aboutToIMEInput ----------------------") + console.log("insertOffset:" + value.insertOffset) + console.log("insertValue:" + value.insertValue) + return true; + }) + .onIMEInputComplete((value: RichEditorTextSpanResult) => { + console.log("---------------------- onIMEInputComplete ---------------------") + console.log("spanIndex:" + value.spanPosition.spanIndex) + console.log("spanRange:[" + value.spanPosition.spanRange[0] + "," + value.spanPosition.spanRange[1] + "]") + console.log("offsetInSpan:[" + value.offsetInSpan[0] + "," + value.offsetInSpan[1] + "]") + console.log("value:" + value.value) + }) + .aboutToDelete((value: RichEditorDeleteValue) => { + console.log("---------------------- aboutToDelete --------------------------") + console.log("offset:" + value.offset) + console.log("direction:" + value.direction) + console.log("length:" + value.length) + value.richEditorDeleteSpans.forEach(item => { + console.log("---------------------- item --------------------------") + console.log("spanIndex:" + item.spanPosition.spanIndex) + console.log("spanRange:[" + item.spanPosition.spanRange[0] + "," + item.spanPosition.spanRange[1] + "]") + console.log("offsetInSpan:[" + item.offsetInSpan[0] + "," + item.offsetInSpan[1] + "]") + if ("imageStyle" in item) { + console.log("image:" + item.valueResourceStr) + } else { + console.log("text:" + item.value) + } + }) + return true; + }) + .onDeleteComplete(() => { + console.log("---------------------- onDeleteComplete ------------------------") + }) + .borderWidth(1) + .borderColor(Color.Green) + .width("100%") + .height("30%") + } + .borderWidth(1) + .borderColor(Color.Red) + .width("100%") + .height("70%") + } + } +} +``` +![richeditor](figures/richeditor.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-components-summary.md b/en/application-dev/reference/arkui-ts/ts-components-summary.md index d6195e588c8874f362faf3c1c88d4943bced4ad4..c9af135050662477b4fb47c042d7f4fe0c151a20 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-summary.md +++ b/en/application-dev/reference/arkui-ts/ts-components-summary.md @@ -168,7 +168,9 @@ - [RichText](ts-basic-components-richtext.md) A component that parses and displays HTML text. +- [RichEditor](ts-basic-components-richeditor.md) + A component that supports interactive text editing and mixture of text and imagery. ## Image, Video, and Media @@ -288,9 +290,12 @@ - [RemoteWindow](ts-basic-components-remotewindow.md) A component that is used to control the application window, providing the component animator and application window linkage animator during application startup and exit. -- [Formcomponent](ts-basic-components-formcomponent.md) +- [FormComponent](ts-basic-components-formcomponent.md) A component that is used to display widgets. +- [FormLink](ts-container-formlink.md) + + A component that provides interactions with static widgets. - [Menu](ts-basic-components-menu.md) A component that is used to present a vertical list of items to the user. diff --git a/en/application-dev/reference/arkui-ts/ts-container-formlink.md b/en/application-dev/reference/arkui-ts/ts-container-formlink.md new file mode 100644 index 0000000000000000000000000000000000000000..96843821acb0acd0b97d2cfd1eeba17651c5950f --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-container-formlink.md @@ -0,0 +1,100 @@ +# FormLink + +The **\** component is provided for interactions between static widgets and widget providers. It supports three types of events: router, message, and call. + +> **NOTE** +> +> - This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. +> +> - This component can be used only in static widgets. +> + +## Required Permissions + +None + +## Child Components + +This component supports only one child component. + +## APIs + +FormLink(value: { + action: string; + moduleName?: string; + bundleName?: string; + abilityName: string; + params: Object; +}) + +**Parameters** + +| Name | Type| Mandatory| Description | +| ----------- | -------- | ---- | ------------------------------------------------------------ | +| action | string | Yes | Action type.
- **"router"**: redirection to the specified UIAbility of the widget provider.
- **"message"**: custom message. If this type of action is triggered, the [onFormEvent()](../apis/js-apis-app-form-formExtensionAbility.md#onformevent) lifecycle callback of the provider FormExtensionAbility is called.
- **"call"**: launch of the widget provider in the background. If this type of action is triggered, the specified UIAbility (whose [launch type](../../application-models/uiability-launch-type.md) must be singleton) of the widget provider is started in the background, but not displayed in the foreground. This action type requires that the widget provider should have the [ohos.permission.KEEP_BACKGROUND_RUNNING](../../security/permission-list.md#ohospermissionkeep_background_running) permission.| +| moduleName | string | No | Name of the target module when **action** is **"router"** or **"call"**. This parameter is optional. | +| bundleName | string | No | Name of the target bundle when **action** is **"router"** or **"call"**. This parameter is optional. | +| abilityName | string | Yes | Name of the target UIAbility when **action** is **"router"** or **"call"**. This parameter is mandatory.| +| params | Object | Yes | Additional parameters carried in the current action. The value is a key-value pair in JSON format. For the **"call"** action type, the **method** parameter (mandatory) must be set and its value type must be string.| + +## Attributes + +The [universal attributes](ts-universal-attributes-size.md) are supported. + +## Events + +The [universal events](ts-universal-events-click.md) are not supported. + +## Example + +```ts +@Entry +@Component +struct FormLinkDemo { + build() { + Column() { + Text("This is a static widget").fontSize(20).margin(10) + + // The router event is used to redirect to the specified UIAbility from the static widget. + FormLink({ + action: "router", + abilityName: "EntryAbility", + params: { + 'message': 'testForRouter' // Customize the message to send. + } + }) { + Button("router event").width(120) + }.margin(10) + + + // The message event triggers the onFormEvent callback of FormExtensionAbility. + FormLink({ + action: "message", + abilityName: "EntryAbility", + params: { + 'message': 'messageEvent' // Customize the message to send. + } + }) { + Button("message event").width(120) + }.margin(10) + + + // The call event is used to call the specified method in the UIAbility. + FormLink({ + action: "call", + abilityName: "EntryAbility", + params: { + 'method': 'funA', // Set the name of the method to call in the EntryAbility. + 'num': 1 // Set other parameters to be passed in. + } + }) { + Button("call event").width(120) + }.margin(10) + } + .justifyContent(FlexAlign.Center) + .width('100%').height('100%') + } +} +``` + +![FormLink](figures/formLink.jpeg) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-expand-safe-area.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-expand-safe-area.md new file mode 100644 index 0000000000000000000000000000000000000000..197ae478f74ef12549d9aa34e6482af93020c4aa --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-expand-safe-area.md @@ -0,0 +1,73 @@ +# Safe Area + +With the **expandSafeArea** attribute, you can expand a component's safe area. + +> **NOTE** +> +> This attribute is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. + +## Attributes + +| Name | Parameter | Description | +| -------------- | ----------------------------- | --------------------------------------- | +| expandSafeArea | type?: Array <[SafeAreaType](ts-types.md#safeareatype10)>,
edges?: Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | Safe area to be expanded to.
Default value:
type: [SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD],
edges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]
The default value expands the safe area to all available areas.
**type**: indicates the type of the extended security zone. This parameter is optional.
**edges**: edge for expanding the safe area. This parameter is optional.| + +## Example + +### Example 1 + +``` +// xxx.ets +@Entry +@Component +struct SafeAreaExample1 { + @State text: string = '' + controller: TextInputController = new TextInputController() + + build() { + Row() { + Column() + .height('100%').width('100%') + .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover) + .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) + }.height('100%') + } +} +``` + +![expandSafeArea1](figures/expandSafeArea1.png) + +### Example 2 + +``` +@Entry +@Component +struct SafeAreaExample { + @State text: string = '' + controller: TextInputController = new TextInputController() + + build() { + Row() { + Stack() { + Column() + .height('100%').width('100%') + .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover) + .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM]) + Column() { + Button('Set caretPosition 1') + .onClick(() => { + this.controller.caretPosition(1) + }) + TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) + .placeholderFont({ size: 14, weight: 400 }) + .width(320).height(40).offset({y: 120}) + .fontSize(14).fontColor(Color.Black) + .backgroundColor(Color.White) + }.width('100%').alignItems(HorizontalAlign.Center) + } + }.height('100%') + } +} +``` + +![expandSafeArea2](figures/expandSafeArea2.png) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-blur-style.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-blur-style.md new file mode 100644 index 0000000000000000000000000000000000000000..6113c50f2a480cb554084c4ec94e86ec6bbe06c1 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-blur-style.md @@ -0,0 +1,45 @@ +# Foreground Blur + +You can apply foreground blur effects 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. + +## Attributes +| Name| Type| Description| +| -------- | -------- | -------- | +| foregroundBlurStyle | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),
options?:[ForegroundBlurStyleOptions](#foregroundblurstyleoptions10) | Foreground blur style applied to the component.
**value**: settings of the foreground blur style, including the blur radius, mask color, mask opacity, saturation, and brightness.
**options**: foreground blur options. This parameter is optional.| + +## ForegroundBlurStyleOptions + +| Name | Type | Mandatory| Description | +| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | +| colorMode | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No | Color mode used for the foreground blur.
Default value: **ThemeColorMode.System**| +| adaptiveColor | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No | Adaptive color mode.
Default value: **AdaptiveColor.Default**| +| scale | number | No | Foreground blur scale. This API is a system API.
Default value: **1.0**
Value range: [0.0, 1.0]
| + +## Example + +### Example 1 + +```ts +// xxx.ets +@Entry +@Component +struct ForegroundBlurStyleDemo { + build() { + Column() { + Text('Thin Material').fontSize(30).fontColor(0xCCCCCC) + Image($r('app.media.bg')) + .width(300) + .height(350) + .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) + } + .height('100%') + .width('100%') + } +} +``` + +![en-us_image_background_blur_style](figures/en-us_image_foreground_blur_style.png)