From c24c322d948e149c295c17ada1699152eb915fd6 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Tue, 4 Jul 2023 19:28:42 +0800 Subject: [PATCH] Update docs (19938) Signed-off-by: ester.zhou --- en/application-dev/quick-start/Readme-EN.md | 22 +++---- .../quick-start/arkts-builder.md | 6 +- .../quick-start/arkts-builderparam.md | 2 +- .../quick-start/arkts-extend.md | 2 +- en/application-dev/quick-start/arkts-link.md | 3 +- .../arkts-observed-and-objectlink.md | 2 +- en/application-dev/quick-start/arkts-prop.md | 5 +- .../quick-start/arkts-provide-and-consume.md | 2 +- en/application-dev/quick-start/arkts-state.md | 2 +- .../quick-start/arkts-statestyles.md | 2 +- en/application-dev/quick-start/arkts-style.md | 2 +- .../quick-start/deviceconfig-structure.md | 2 +- en/application-dev/ui/Readme-EN.md | 42 +++++++------- .../ui/arkts-common-components-button.md | 58 +++++++++++-------- .../arkts-common-components-custom-dialog.md | 2 +- ...ts-common-components-progress-indicator.md | 2 +- .../arkts-common-components-radio-button.md | 2 +- .../arkts-common-components-text-display.md | 2 +- .../ui/arkts-common-components-text-input.md | 2 +- .../arkts-drawing-customization-on-canvas.md | 2 +- .../ui/arkts-geometric-shape-drawing.md | 2 +- .../ui/arkts-graphics-display.md | 2 +- .../arkts-layout-development-create-grid.md | 2 +- .../arkts-layout-development-create-list.md | 2 +- ...arkts-layout-development-create-looping.md | 2 +- .../arkts-layout-development-flex-layout.md | 2 +- .../arkts-layout-development-grid-layout.md | 2 +- .../ui/arkts-layout-development-linear.md | 2 +- .../arkts-layout-development-media-query.md | 2 +- ...rkts-layout-development-relative-layout.md | 2 +- .../arkts-layout-development-stack-layout.md | 2 +- en/application-dev/ui/arkts-routing.md | 2 +- .../ui/arkts-spring-animation.md | 2 +- .../ui/js-framework-multiple-languages.md | 2 +- .../ui/ui-js-components-canvas.md | 2 + 35 files changed, 104 insertions(+), 90 deletions(-) diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index b7d98534c9..7dbde5071d 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -34,7 +34,7 @@ - Application Configuration Files in FA Model - [Application Configuration File Overview (FA Model)](application-configuration-file-overview-fa.md) - [Internal Structure of the app Tag](app-structure.md) - - [Internal Structure of deviceConfig Tag](deviceconfig-structure.md) + - [Internal Structure of the deviceConfig Tag](deviceconfig-structure.md) - [Internal Structure of the module Tag](module-structure.md) - [Resource Categories and Access](resource-categories-and-access.md) - Learning ArkTS @@ -45,19 +45,19 @@ - Custom Component - [Creating a Custom Component](arkts-create-custom-components.md) - [Page and Custom Component Lifecycle](arkts-page-custom-components-lifecycle.md) - - [\@Builder: Custom Builder Function](arkts-builder.md) - - [\@BuilderParam: @Builder Function Reference](arkts-builderparam.md) - - [\@Styles: Definition of Resusable Styles](arkts-style.md) - - [\@Extend: Extension of Built-in Components](arkts-extend.md) - - [stateStyles: Polymorphic Style](arkts-statestyles.md) + - [\@Builder Decorator: Custom Builder Function](arkts-builder.md) + - [\@BuilderParam Decorator: @Builder Function Reference](arkts-builderparam.md) + - [\@Styles Decorator: Definition of Resusable Styles](arkts-style.md) + - [\@Extend Decorator: Extension of Built-in Components](arkts-extend.md) + - [stateStyles Decorator: Polymorphic Style](arkts-statestyles.md) - State Management - [State Management Overview](arkts-state-management-overview.md) - Component State Management - - [\@State: State Owned by Component](arkts-state.md) - - [\@Prop: One-Way Synchronization from Parent to Child Components](arkts-prop.md) - - [\@Link: Two-Way Synchronization Between Parent and Child Components](arkts-link.md) - - [\@Provide and \@Consume: Two-Way Synchronization with Descendant Components](arkts-provide-and-consume.md) - - [\@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects](arkts-observed-and-objectlink.md) + - [\@State Decorator: State Owned by Component](arkts-state.md) + - [\@Prop Decorator: One-Way Synchronization from Parent to Child Components](arkts-prop.md) + - [\@Link Decorator: Two-Way Synchronization Between Parent and Child Components](arkts-link.md) + - [\@Provide and \@Consume Decorators: Two-Way Synchronization with Descendant Components](arkts-provide-and-consume.md) + - [\@Observed and \@ObjectLink Decorators: Observing Attribute Changes in Nested Class Objects](arkts-observed-and-objectlink.md) - Application State Management - [Application State Management Overview](arkts-application-state-management-overview.md) - [LocalStorage: UI State Storage](arkts-localstorage.md) diff --git a/en/application-dev/quick-start/arkts-builder.md b/en/application-dev/quick-start/arkts-builder.md index 0155cbe0cc..80a262fcd9 100644 --- a/en/application-dev/quick-start/arkts-builder.md +++ b/en/application-dev/quick-start/arkts-builder.md @@ -1,7 +1,7 @@ -# \@Builder: Custom Builder Function +# \@Builder Decorator: Custom Builder Function -After a custom component is created, its internal UI structure is fixed and allows only data passing with its caller. ArkUI also provides a more lightweight mechanism for reusing UI elements: \@Builder. An \@Builder decorated function is a special function that serves similar purpose as the build function. The \@Builder function body follows the same syntax rules as the **build** function. You can abstract reusable UI elements into a method and call the method in **build**. +As previously described, you can reuse UI elements by creating a custom component, which comes with a fixed internal UI structure and allows for data transfer only with its caller. ArkUI also provides a more lightweight mechanism for reusing UI elements: \@Builder. An \@Builder decorated function is a special function that serves similar purpose as the build function. The \@Builder function body follows the same syntax rules as the **build** function. You can abstract reusable UI elements into a method and call the method in **build**. To simplify language, here we refer to an \@Builder decorated function also as a custom builder function. @@ -33,7 +33,7 @@ this.myBuilderFunction({ ... }) - Defining one or more custom builder (\@Builder decorated) functions inside a custom component is allowed. Such a custom builder function can be considered as a private, special type of member functions of that component. -- The custom builder function can be called from the owning component's** build** or another custom builder (within that custom component) function only. +- The custom builder function can be called from the owning component's **build** or another custom builder (within that custom component) function only. - Inside the custom builder function body, **this** refers to the owning component. Component state variables are accessible from within the custom builder function implementation. Using the custom components' state variables is recommended over parameter passing. diff --git a/en/application-dev/quick-start/arkts-builderparam.md b/en/application-dev/quick-start/arkts-builderparam.md index 26f25044c2..66647f094b 100644 --- a/en/application-dev/quick-start/arkts-builderparam.md +++ b/en/application-dev/quick-start/arkts-builderparam.md @@ -1,4 +1,4 @@ -# \@BuilderParam: @Builder Function Reference +# \@BuilderParam Decorator: @Builder Function Reference In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component will add the function to all places where the component is imported. This is where the \@BuilderParam decorator comes into the picture. \@BuilderParam is used to decorate a custom component member variable of type reference to an \@Builder method. When initializing a custom component, you can assign a value to the variable, thereby adding the specific function to the custom component. This decorator can be used to declare an element of any UI description, similar to a slot placeholder. diff --git a/en/application-dev/quick-start/arkts-extend.md b/en/application-dev/quick-start/arkts-extend.md index b6fd53b321..b626097758 100644 --- a/en/application-dev/quick-start/arkts-extend.md +++ b/en/application-dev/quick-start/arkts-extend.md @@ -1,4 +1,4 @@ -# \@Extend: Extension of Built-in Components +# \@Extend Decorator: Extension of Built-in Components Apart from\@Styles used to extend styles, AkrUI also provides \@Extend, which allows you to add a new attribute feature to a built-in component. diff --git a/en/application-dev/quick-start/arkts-link.md b/en/application-dev/quick-start/arkts-link.md index 28f91403ec..81db9ef3e2 100644 --- a/en/application-dev/quick-start/arkts-link.md +++ b/en/application-dev/quick-start/arkts-link.md @@ -1,4 +1,4 @@ -# \@Link: Two-Way Synchronization Between Parent and Child Components +# \@Link Decorator: Two-Way Synchronization Between Parent and Child Components An \@Link decorated variable can create two-way synchronization with a variable of its parent component. @@ -184,3 +184,4 @@ struct Parent { As described above, the ArkUI framework can observe the addition, deletion, and replacement of array items. It should be noted that, in the preceding example, the type of the \@Link and \@State decorated variables is the same: number[]. It is not allowed to define the \@Link decorated variable in the child component as type number (**\@Link item: number**), and create child components for each array item in the \@State decorated array in the parent component. [\@Prop](arkts-prop.md) or \@Observed should be used depending on application semantics. + diff --git a/en/application-dev/quick-start/arkts-observed-and-objectlink.md b/en/application-dev/quick-start/arkts-observed-and-objectlink.md index 1282545cc1..808e522540 100644 --- a/en/application-dev/quick-start/arkts-observed-and-objectlink.md +++ b/en/application-dev/quick-start/arkts-observed-and-objectlink.md @@ -1,4 +1,4 @@ -# \@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects +# \@Observed and \@ObjectLink Decorators: Observing Attribute Changes in Nested Class Objects The decorators described above can observe only the changes of the first layer. However, in real-world application development, the application may encapsulate its own data model based on development requirements. In the case of multi-layer nesting, for example, a two-dimensional array, an array item class, or a class insider another class as an attribute, the attribute changes at the second layer cannot be observed. This is where the \@Observed and \@ObjectLink decorators come in handy. diff --git a/en/application-dev/quick-start/arkts-prop.md b/en/application-dev/quick-start/arkts-prop.md index da918f767a..55efe21574 100644 --- a/en/application-dev/quick-start/arkts-prop.md +++ b/en/application-dev/quick-start/arkts-prop.md @@ -1,4 +1,4 @@ -# \@Prop: One-Way Synchronization from Parent to Child Components +# \@Prop Decorator: One-Way Synchronization from Parent to Child Components An \@Prop decorated variable can create one-way synchronization with a variable of its parent component. \@Prop decorated variables are mutable, but changes are not synchronized to the parent component. @@ -302,7 +302,7 @@ To enable an \@Component decorated component to be reusable, \@Prop allows for o The following example includes two @Prop decorated variables in child component. -- The @Prop decorated variable **customCounter** has no local initialization, and therefore it requires a synchronization source in its parent component. When the source value changes, the @Prop decorated variable is udpated. +- The @Prop decorated variable **customCounter** has no local initialization, and therefore it requires a synchronization source in its parent component. When the source value changes, the @Prop decorated variable is updated. - The @Prop decorated variable **customCounter2** has local initialization. In this case, specifying a synchronization source in the parent component is allowed but not mandatory. @@ -360,3 +360,4 @@ struct MainProgram { } } ``` + diff --git a/en/application-dev/quick-start/arkts-provide-and-consume.md b/en/application-dev/quick-start/arkts-provide-and-consume.md index d8dc8f5b41..427e2f79d0 100644 --- a/en/application-dev/quick-start/arkts-provide-and-consume.md +++ b/en/application-dev/quick-start/arkts-provide-and-consume.md @@ -1,4 +1,4 @@ -# \@Provide and \@Consume: Two-Way Synchronization with Descendant Components +# \@Provide and \@Consume Decorators: Two-Way Synchronization with Descendant Components \@Provide and \@Consume are used for two-way data synchronization with descendant components in scenarios where state data needs to be transferred between multiple levels. They do not involve passing a variable from component to component multiple times. diff --git a/en/application-dev/quick-start/arkts-state.md b/en/application-dev/quick-start/arkts-state.md index 6ac35e388d..be3260d685 100644 --- a/en/application-dev/quick-start/arkts-state.md +++ b/en/application-dev/quick-start/arkts-state.md @@ -1,4 +1,4 @@ -# \@State: State Owned by Component +# \@State Decorator: State Owned by Component An \@State decorated variable, also called a state variable, is a variable that holds the state property and is used to render the owning custom component. When it changes, the UI is re-rendered accordingly. diff --git a/en/application-dev/quick-start/arkts-statestyles.md b/en/application-dev/quick-start/arkts-statestyles.md index fd0ac67bdb..c712d74e8b 100644 --- a/en/application-dev/quick-start/arkts-statestyles.md +++ b/en/application-dev/quick-start/arkts-statestyles.md @@ -1,4 +1,4 @@ -# stateStyles: Polymorphic Style +# stateStyles Decorator: Polymorphic Style Unlike \@Styles and \@Extend, which are used to reuse styles only on static pages, stateStyles enables you to set state-specific styles. diff --git a/en/application-dev/quick-start/arkts-style.md b/en/application-dev/quick-start/arkts-style.md index 64f03c11e3..a380964f58 100644 --- a/en/application-dev/quick-start/arkts-style.md +++ b/en/application-dev/quick-start/arkts-style.md @@ -1,4 +1,4 @@ -# \@Styles: Definition of Resusable Styles +# \@Styles Decorator: Definition of Resusable Styles If the style of each component needs to be set separately, this will result in a large amount of repeated code during development. Though copy and paste is available, it is inefficient and error-prone. To maximize code efficiency and maintainability, the \@Styles decorator is introduced. diff --git a/en/application-dev/quick-start/deviceconfig-structure.md b/en/application-dev/quick-start/deviceconfig-structure.md index a6bb6fa680..bc15571c43 100644 --- a/en/application-dev/quick-start/deviceconfig-structure.md +++ b/en/application-dev/quick-start/deviceconfig-structure.md @@ -1,4 +1,4 @@ -# Internal structure of deviceConfig Tag +# Internal Structure of the deviceConfig Tag The **deviceConfig** tag contains device-specific configuration of the application, including attributes such as **default**, **tv**, **car**, and **wearable**. The **default** configuration applies to all types of devices. You need to declare the peculiar configuration of a specific device type in the associated sub-tag of this type. diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md index 2828cf8846..56e49bb816 100644 --- a/en/application-dev/ui/Readme-EN.md +++ b/en/application-dev/ui/Readme-EN.md @@ -6,39 +6,39 @@ - Layout Development - [Layout Overview](arkts-layout-development-overview.md) - Building a Layout - - [Linear Layout](arkts-layout-development-linear.md) - - [Stack Layout](arkts-layout-development-stack-layout.md) - - [Flex Layout](arkts-layout-development-flex-layout.md) - - [Relative Layout](arkts-layout-development-relative-layout.md) - - [Responsive Grid Layout](arkts-layout-development-grid-layout.md) - - [Media Query](arkts-layout-development-media-query.md) - - [Creating a List](arkts-layout-development-create-list.md) - - [Creating a Grid](arkts-layout-development-create-grid.md) - - [Creating a Swiper](arkts-layout-development-create-looping.md) + - [Linear Layout (Row/Column)](arkts-layout-development-linear.md) + - [Stack Layout (Stack)](arkts-layout-development-stack-layout.md) + - [Flex Layout (Flex)](arkts-layout-development-flex-layout.md) + - [Relative Layout (RelativeContainer)](arkts-layout-development-relative-layout.md) + - [Responsive Grid Layout (GridRow/GridCol)](arkts-layout-development-grid-layout.md) + - [Media Query (mediaquery)](arkts-layout-development-media-query.md) + - [Creating a List (List)](arkts-layout-development-create-list.md) + - [Creating a Grid (Grid/GridItem)](arkts-layout-development-create-grid.md) + - [Creating a Swiper (Swiper)](arkts-layout-development-create-looping.md) - [Improving Layout Performance](arkts-layout-development-performance-boost.md) - Adding a Component - Adding a Common Component - [Button](arkts-common-components-button.md) - - [Radio Button](arkts-common-components-radio-button.md) + - [Radio Button (Radio)](arkts-common-components-radio-button.md) - [Toggle](arkts-common-components-switch.md) - - [Progress Indicator](arkts-common-components-progress-indicator.md) - - [Text Display](arkts-common-components-text-display.md) - - [Text Input](arkts-common-components-text-input.md) - - [Custom Dialog Box](arkts-common-components-custom-dialog.md) - - [Video Playback](arkts-common-components-video-player.md) + - [Progress Indicator (Progress)](arkts-common-components-progress-indicator.md) + - [Text Display (Text/Span)](arkts-common-components-text-display.md) + - [Text Input (TextInput/TextArea)](arkts-common-components-text-input.md) + - [Custom Dialog Box (CustomDialog)](arkts-common-components-custom-dialog.md) + - [Video Playback (Video](arkts-common-components-video-player.md) - [XComponent](arkts-common-components-xcomponent.md) - - Adding a Bubble and Menu - - [Bubble](arkts-popup-and-menu-components-popup.md) + - Adding a Popup and Menu + - [Popup](arkts-popup-and-menu-components-popup.md) - [Menu](arkts-popup-and-menu-components-menu.md) - Setting Page Routing and Component Navigation - - [Page Routing](arkts-routing.md) + - [Page Routing (router)](arkts-routing.md) - Component Navigation - [Navigation](arkts-navigation-navigation.md) - [Tabs](arkts-navigation-tabs.md) - Using Graphics - - [Displaying Images](arkts-graphics-display.md) - - [Drawing Geometric Shapes](arkts-geometric-shape-drawing.md) - - [Drawing Custom Graphics on the Canvas](arkts-drawing-customization-on-canvas.md) + - [Displaying Images (Image)](arkts-graphics-display.md) + - [Drawing Geometric Shapes (Shape)](arkts-geometric-shape-drawing.md) + - [Drawing Custom Graphics on the Canvas (Canvas)](arkts-drawing-customization-on-canvas.md) - Using Animation - [Animation Overview](arkts-animation-overview.md) - Animation Within a Page diff --git a/en/application-dev/ui/arkts-common-components-button.md b/en/application-dev/ui/arkts-common-components-button.md index 82c893d33a..14099df135 100644 --- a/en/application-dev/ui/arkts-common-components-button.md +++ b/en/application-dev/ui/arkts-common-components-button.md @@ -54,33 +54,36 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or - Capsule button (default type) + Buttons of this type have rounded corners whose radius is automatically set to half of the button height. The rounded corners cannot be reset through the **borderRadius** attribute. - + ```ts Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(40) ``` - + ![en-us_image_0000001511421208](figures/en-us_image_0000001511421208.png) - Circle button + Buttons of this type are round. The rounded corners cannot be reset through the **borderRadius** attribute. - + ```ts Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(90) ``` - + ![en-us_image_0000001511740428](figures/en-us_image_0000001511740428.png) - + - Normal button + Buttons of this type have rounded corners set to 0. The rounded corners can be reset through the **borderRadius** attribute. - + ```ts Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) @@ -88,40 +91,43 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or .width(90) .height(40) ``` - + ![en-us_image_0000001563060641](figures/en-us_image_0000001563060641.png) ## Setting Styles -- Set the border radius: +- Set the border radius. + In general cases, you can use universal attributes to define the button styles. For example, you can use the **borderRadius** attribute to set the border radius. - + ```ts Button('circle border', { type: ButtonType.Normal }) .borderRadius(20) .height(40) ``` - + ![en-us_image_0000001511900392](figures/en-us_image_0000001511900392.png) -- The **Font** type is used to set the text style. - Add a font style for text displayed on the button. - +- Set the text style. + + Add text style attributes for the button. + ```ts Button('font style', { type: ButtonType.Normal }) .fontSize(20) .fontColor(Color.Pink) .fontWeight(800) ``` - + ![en-us_image_0000001511580828](figures/en-us_image_0000001511580828.png) -- Set the background color: - You can do so by adding the **backgroundColor** attribute. - +- Set the background color. + + Add the **backgroundColor** attribute for the button. + ```ts Button('background color').backgroundColor(0xF55A42) ``` @@ -129,15 +135,16 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or ![en-us_image_0000001562940477](figures/en-us_image_0000001562940477.png) -- Assign a function to the button: +- Assign a function to the button. + In this example, the delete function is assigned to the button. - + ```ts Button({ type: ButtonType.Circle, stateEffect: true }) { Image($r('app.media.ic_public_delete_filled')).width(30).height(30) }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) ``` - + ![en-us_image_0000001511740436](figures/en-us_image_0000001511740436.png) @@ -153,9 +160,10 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ``` -## Example Scenario +## Example + +- Using the button for startup -- Using the Button for Startup You can use the button for any UI element that involves the startup operation. The button triggers the predefined event based on the user's operation. For example, you can use a button in the **\** container to redirect the user to another page. ```ts @@ -194,7 +202,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ![en-us_image_0000001562700393](figures/en-us_image_0000001562700393.png) -- Use the button for submitting forms: +- Using the button for submitting forms + On the user login/registration page, you can use a button to submit a login or registration request. ```ts @@ -217,7 +226,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ![en-us_image_0000001562940473](figures/en-us_image_0000001562940473.png) -- Configure the button to float: +- Configuring the button to float + The button can remain floating when the user swipes on the screen. ```ts diff --git a/en/application-dev/ui/arkts-common-components-custom-dialog.md b/en/application-dev/ui/arkts-common-components-custom-dialog.md index bf36a7bdee..36235d9d84 100644 --- a/en/application-dev/ui/arkts-common-components-custom-dialog.md +++ b/en/application-dev/ui/arkts-common-components-custom-dialog.md @@ -1,4 +1,4 @@ -# Custom Dialog Box +# Custom Dialog Box (CustomDialog) A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class. It can be used for user interactions, showing an ad, prize, alert, software update message, and more. For details, see [Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md). diff --git a/en/application-dev/ui/arkts-common-components-progress-indicator.md b/en/application-dev/ui/arkts-common-components-progress-indicator.md index 6be5721def..c122108cd2 100644 --- a/en/application-dev/ui/arkts-common-components-progress-indicator.md +++ b/en/application-dev/ui/arkts-common-components-progress-indicator.md @@ -1,4 +1,4 @@ -# Progress Indicator +# Progress Indicator (Progress) The **\** component is used to provide a progress indicator that displays the progress of an operation. For details, see [Progress](../reference/arkui-ts/ts-basic-components-progress.md). diff --git a/en/application-dev/ui/arkts-common-components-radio-button.md b/en/application-dev/ui/arkts-common-components-radio-button.md index 92f5105642..9cf2298a71 100644 --- a/en/application-dev/ui/arkts-common-components-radio-button.md +++ b/en/application-dev/ui/arkts-common-components-radio-button.md @@ -1,4 +1,4 @@ -# Radio Button +# Radio Button (Radio) The **\** component allows users to select from a set of mutually exclusive options. Only one radio button in a given group can be selected at the same time. For details, see [Radio](../reference/arkui-ts/ts-basic-components-radio.md). diff --git a/en/application-dev/ui/arkts-common-components-text-display.md b/en/application-dev/ui/arkts-common-components-text-display.md index f630b0caf6..86f92f5148 100644 --- a/en/application-dev/ui/arkts-common-components-text-display.md +++ b/en/application-dev/ui/arkts-common-components-text-display.md @@ -1,4 +1,4 @@ -# Text Display +# Text Display (Text/Span) The **\** component is used to display a piece of textual information. For details, see [Text](../reference/arkui-ts/ts-basic-components-text.md). diff --git a/en/application-dev/ui/arkts-common-components-text-input.md b/en/application-dev/ui/arkts-common-components-text-input.md index 0d7f8ec2f4..e76dad1901 100644 --- a/en/application-dev/ui/arkts-common-components-text-input.md +++ b/en/application-dev/ui/arkts-common-components-text-input.md @@ -1,4 +1,4 @@ -# Text Input +# Text Input (TextInput/TextArea) The **\** and **\