** component parses and displays HTML text.
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-## Required Permissions
-
-None
-
## Child Components
Not supported
@@ -20,64 +16,67 @@ RichText(content:string)
**Parameters**
-| Name| Type | Mandatory | Default Value | Description |
-| -------- | -------- | -------- | -------- | -------- |
-| content | string | Yes| - | Text string in HTML format. |
+| Name| Type| Mandatory | Description|
+| ------- | -------- | ------------- | -------- |
+| content | string | Yes | String in HTML format.|
## Events
-| Name | Description|
+| Name| Description|
| -------- | -------- |
-| onStart(callback: () => void) => void | Triggered when web page loading starts. |
-| onComplete(callback: () => void) => void | Triggered when web page loading is completed. |
+| onStart(callback: () => void) | Triggered when web page loading starts. |
+| onComplete(callback: () => void) | Triggered when web page loading is completed.|
## Supported Tags
-| Name | Description | Example |
+| Name| Description| Example|
| -------- | -------- | -------- |
-| \--\ | Defines six levels of headings in the HTML document. \ defines the most important heading, and \ defines the least important heading. | \This is an H1 heading\
\This is an H2 heading\
|
-| \
\
| Defines a paragraph. | \This is a paragraph\
|
-| \
| Inserts a newline character. | \This is a paragraph\
This is a new paragraph\
|
-| \
| Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line. | \This is a paragraph\
\
\This is a paragraph\
|
-| \\
| Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time. | \\
This is the heading in a div element\
\ |
-| \\ | Displays text in italic style. | \This is in italic style\ |
-| \\ | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \ tag where it could be confused with a hyperlink. | \\This is an underlined paragraph\\
|
-| \ | Used to embed CSS within an HTML document. | \ |
-| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**. | \
This is a heading\
\This is a paragraph\
|
-| \ | Used to embed or reference a client-side script, such as JavaScript. | \ |
+| \--\ | Defines six levels of headings in the HTML document. \ defines the most important heading, and \ defines the least important heading.| \This is an H1 heading\
\This is an H2 heading\
|
+| \
\
| Defines a paragraph.| \This is a paragraph\
|
+| \
| Inserts a newline character.| \This is a paragraph\
This is a new paragraph\
|
+| \
| Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \This is a paragraph\
\
\This is a paragraph\
|
+| \\
| Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.| \\
This is the heading in a div element\
\ |
+| \\ | Displays text in italic style.| \This is in italic style\|
+| \\ | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \ tag where it could be confused with a hyperlink.| \\This is an underlined paragraph\\
|
+| \ | Used to embed CSS within an HTML document.| \ |
+| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \This is a heading\
\This is a paragraph\
|
+| \ | Used to embed or reference a client-side script, such as JavaScript.| \ |
## Example
You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
+
```ts
// xxx.ets
@Entry
@Component
struct RichTextExample {
- @State data: string = "h1 heading
" +
- "h1 italic
" +
- "h1 underlined
" +
- "h2 heading
" +
- "h3 heading
" +
- "Regular paragraph
" +
- "" +
- "
Font size: 35px; line height: 45px
" +
- "
" +
- "
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
"
+ @State data: string = '
h1 heading
' +
+ '
h1 italic
' +
+ '
h1 underlined
' +
+ '
h2 heading
' +
+ '
h3 heading
' +
+ '
Regular paragraph
' +
+ '
' +
+ '
Font size: 35px; line height: 45px
' +
+ '
' +
+ '
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
';
build() {
- Flex({direction: FlexDirection.Column,alignItems: ItemAlign.Center,
- justifyContent: FlexAlign.Center }){
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
+ justifyContent: FlexAlign.Center }) {
RichText(this.data)
- .onStart(()=>{
- console.info("RichText onStart")
- })
- .onComplete(()=>{
- console.info("RichText onComplete")
- })
+ .onStart(() => {
+ console.info('RichText onStart');
+ })
+ .onComplete(() => {
+ console.info('RichText onComplete');
+ })
}
}
}
```
+
+ 
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
index d10e25435cdea46e882f125c7da59d2497dda4e4..592b3127032690451b96dd5211f8fc2a1971cddf 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
@@ -6,10 +6,6 @@ The **\
** is used together with scrollable components, such as **\
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-## Required Permissions
-
-None
-
## Child Components
@@ -22,20 +18,20 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
**Parameters**
-| Name| Type| Mandatory| Default Value| Description|
+| Name| Type| Mandatory| Default Value | Description|
| -------- | -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| - | Scroller, which can be bound to scrollable components.|
-| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll.|
-| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state.|
+| direction | ScrollBarDirection | No| ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
+| state | [BarState](ts-appendix-enums.md#barstate) | No| BarState.Auto | Scrollbar state. |
> **NOTE**
>
-> The **<\ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
+> The **\** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
>
-
> This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **\** component can be bound to only one scrollable component, and vice versa.
## ScrollBarDirection
+
| Name| Description|
| -------- | -------- |
| Vertical | Vertical scrollbar.|
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md
index 8330e5fafe2a3a13b11dd764418362b9eb9dfb72..0927b8a3af7b5a72ea02203815c7b8dcb53104a7 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md
@@ -6,10 +6,6 @@ The **\** component provides an input area for users to search.
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-## Required Permissions
-
-None
-
## Child Components
Not supported
@@ -20,32 +16,31 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
**Parameters**
-| Name | Type | Mandatory | Description |
-| ----------- | ---------------- | ---- | ---------------------------------------- |
-| value | string | No | Text input in the search text box. |
-| placeholder | string | No | Text displayed when there is no input. |
-| icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
-| controller | SearchController | No | Controller. |
-
+| Name | Type | Mandatory| Description |
+| ----------- | ---------------- | ---- | ------------------------------------------------------------ |
+| value | string | No | Text input in the search text box. |
+| placeholder | string | No | Text displayed when there is no input. |
+| icon | string | No | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
+| controller | SearchController | No | Controller. |
## Attributes
-| Name | Type | Description |
-| ----------------------- | ---------------------------------------- | --------------------- |
-| searchButton | string | Text on the search button located next to the search text box. By default, there is no search button.|
-| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. |
-| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. |
-| textFont | [Font](ts-types.md#font) | Text font for the search text box. |
+| Name | Type | Description |
+| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
+| searchButton | string | Text on the search button located next to the search text box. By default, there is no search button. |
+| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | Placeholder text color. |
+| placeholderFont | [Font](ts-types.md#font) | Placeholder text style. |
+| textFont | [Font](ts-types.md#font) | Text font for the search text box. |
## Events
-| Name | Description |
-| ------------------------------------------- | ------------------------------------------------------------ |
-| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.
- **value**: current text input. |
-| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
- **value**: current text input. |
-| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
- **value**: text copied. |
-| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
- **value**: text cut. |
-| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
- **value**: text pasted. |
+| Name | Description |
+| ---------------------------------------- | ---------------------------------------- |
+| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.
-**value**: current text input.|
+| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
-**value**: current text input. |
+| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
-**value**: text copied. |
+| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
-**value**: text cut. |
+| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
-**value**: text pasted. |
## SearchController
@@ -63,11 +58,9 @@ Sets the position of the caret.
**Parameters**
-| Name | Type | Mandatory | Description |
-| ----- | ------ | ---- | ----------------- |
-| value | number | Yes | Length from the start of the character string to the position where the caret is located.|
-
-
+| Name| Type| Mandatory| Description |
+| ------ | -------- | ---- | ---------------------------------- |
+| value | number | Yes | Length from the start of the character string to the position where the caret is located.|
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
index 415a1bd3d96af1ff879af2b779c3a5481ffe3d85..b89aef6a1d8c9301531f744205d75b635b4eea52 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
@@ -1,52 +1,51 @@
# Select
->  **NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
The **** component provides a drop-down list box that allows users to select among multiple options.
-## Required Permissions
-
-None
+> **NOTE**
+>
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
-None
+Not supported
## APIs
-Select(options: Array\\)
+Select(options: Array\)
-- SelectOption parameters
+**SelectOption**
- | Name| Type| Mandatory| Default Value| Description|
- | ------ | ----------------------------------------------- | ---- | ------ | -------------- |
- | value | [ResourceStr](../../ui/ts-types.md) | Yes| - | Value of an option in the drop-down list box.|
- | icon | [ResourceStr](../../ui/ts-types.md) | No| - | Icon of an option in the drop-down list box.|
+| Name| Type | Mandatory| Description |
+| ------ | ----------------------------------- | ---- | -------------- |
+| value | [ResourceStr](ts-types.md#resourcestr8) | Yes | Value of an option in the drop-down list box.|
+| icon | [ResourceStr](ts-types.md#resourcestr8) | No | Icon of an option in the drop-down list box.|
## Attributes
-| Name| Type| Default Value| Description|
-| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- |
-| selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
-| value | string | - | Text of the drop-down button.|
-| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.|
-| fontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the drop-down button.|
-| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of the selected option in the drop-down list box.|
-| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.|
-| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of the selected option in the drop-down list box.|
-| optionBgColor | [ResourceColor](../../ui/ts-types.md) | - | Background color of an option in the drop-down list box.|
-| optionFont | [Font](../../ui/ts-types.md) | - | Text font of an option in the drop-down list box.|
-| optionFontColor | [ResourceColor](../../ui/ts-types.md) | - | Text color of an option in the drop-down list box.|
+| Name | Type | Description |
+| ----------------------- | ------------------------------------- | --------------------------------------------- |
+| selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
+| value | string | Text of the drop-down button. |
+| font | [Font](ts-types.md#font) | Text font of the drop-down button. |
+| fontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the drop-down button. |
+| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected option in the drop-down list box. |
+| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. |
+| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of the selected option in the drop-down list box. |
+| optionBgColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of an option in the drop-down list box. |
+| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box. |
+| optionFontColor | [ResourceColor](ts-types.md#resourcecolor8) | Text color of an option in the drop-down list box. |
## Events
-| Name| Description|
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.|
+| Name | Description |
+| ---------------------------------------------------------- | ------------------------------------------------------------ |
+| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected.
**index**: index of the selected option.
**value**: value of the selected option. |
## Example
-```
+```ts
+// xxx.ets
@Entry
@Component
struct SelectExample {
@@ -61,7 +60,7 @@ struct SelectExample {
.font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal })
.selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
.optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
- .onSelecte((index:number)=>{
+ .onSelect((index:number)=>{
console.info("Select:" + index)
})
}
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
index 93131f59b3a1b1f0a723edf9b152d2975b8d9f0d..faa086718761c2bd909cd3b4162747686185bb7c 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
@@ -1,17 +1,10 @@
# Slider
+The **\** component is used to quickly adjust settings, such as the volume and brightness.
-> **NOTE**
+> **NOTE**
>
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The *\** component is used to quickly adjust settings, such as the volume and brightness.
-
-
-## Required Permissions
-
-None
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
@@ -21,59 +14,64 @@ Not supported
## APIs
-Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})
+Slider(options?:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})
+
+**Parameters**
-- Parameters
- | Name | Type | Mandatory | Default Value | Description |
- | ---------------------- | --------------------------------------- | --------- | ------------------ | ---------------------------------------- |
- | value | number | No | 0 | Current progress. |
- | min | number | No | 0 | Minimum value. |
- | max | number | No | 100 | Maximum value. |
- | step | number | No | 1 | Step of the slider. When the corresponding step is set, the slider slides intermittently. |
- | style | SliderStyle | No | SliderStyle.OutSet | Style of the slider. |
- | direction8+ | [Axis](ts-appendix-enums.md#axis-enums) | No | Axis.Horizontal | Whether the slider moves horizontally or vertically. |
- | reverse8+ | boolean | No | false | Whether the slider values are reversed. |
+| Name | Type | Mandatory| Description |
+| ---------------------- | --------------------------------- | ---- | ------------------------------------------------------------ |
+| value | number | No | Current progress.
Default value: **0** |
+| min | number | No | Minimum value.
Default value: **0** |
+| max | number | No | Maximum value.
Default value: **100** |
+| step | number | No | Step of the slider.
Default value: **1** |
+| style | SliderStyle | No | Style of the slider.
Default value: **SliderStyle.OutSet** |
+| direction8+ | [Axis](ts-appendix-enums.md#axis) | No | Whether the slider moves horizontally or vertically.
Default value: **Axis.Horizontal**|
+| reverse8+ | boolean | No | Whether the slider values are reversed.
**NOTE**
The value **false** indicates that the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider. The value **true** indicates that the values increase from right to left for a horizontal slider and from bottom to top for a vertical slider.
Default value: **false**|
-- SliderStyle enums
- | Name | Description |
- | ------ | --------------------------------- |
- | OutSet | The slider is on the slider rail. |
- | InSet | The slider is in the slider rail. |
+## SliderStyle
+| Name | Description |
+| ------ | ------- |
+| OutSet | The slider is on the slider rail.|
+| InSet | The slider is in the slider rail.|
## Attributes
Touch target configuration is not supported.
-| Name | Type | Default Value | Description |
-| ------------- | ------- | ------------- | ---------------------------------------- |
-| blockColor | Color | - | Color of the slider. |
-| trackColor | Color | - | Background color of the slider. |
-| selectedColor | Color | - | Color of the slider rail that has been slid. |
-| showSteps | boolean | false | Whether to display the current step. |
-| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. |
+| Name | Type | Description |
+| ------------- | ------- | ----------------- |
+| blockColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider. |
+| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the slider. |
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Color of the slider rail that has been slid. |
+| showSteps | boolean | Whether to display the current step.
Default value: **false**|
+| showTips | boolean | Whether to display a bubble to indicate the percentage when sliding.
Default value: **false**|
+| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.|
+| maxLabel | string | Maximum label.|
+| minLabel | string | Minimum label.|
## Events
-Among all the universal events, only **OnAppear** and **OnDisAppear** are supported.
+In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported.
-| Name | Description |
-| ---------------------------------------- | ---------------------------------------- |
-| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Callback invoked when the slider slides.
**value**: current progress.
**mode**: dragging state. |
+| Name | Description |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider slides.
**value**: current progress. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the required precision.
**mode**: dragging state.|
-- SliderChangeMode enums
- | Name | Value | Description |
- | ------ | ----- | ----------------------------------- |
- | Begin | 0 | The user starts to drag the slider. |
- | Moving | 1 | The user is dragging the slider. |
- | End | 2 | The user stops dragging the slider. |
+## SliderChangeMode
+| Name | Value | Description |
+| ------ | ---- | --------- |
+| Begin | 0 | The user starts to drag the slider.|
+| Moving | 1 | The user is dragging the slider. |
+| End | 2 | The user stops dragging the slider.|
+| Click | 3 | The user moves the slider by touching the slider rail.|
## Example
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct SliderExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
index 4303717b6c8c2fa62761c6e3a41ead8a191f0eb5..0c157992c0e310acc7d6366689acde4b356e1389 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-span.md
@@ -1,55 +1,53 @@
# Span
+The **\** component is used to display inline text in the **\** component.
->  **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The **<Span>** component is used to display a paragraph of textual information. It can be used only as a child component in the **<Text>** component.
-
-
-## Required Permissions
-
-None
+> **NOTE**
+>
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
-None
+Not supported
## APIs
-Span(content: string)
+Span(value: string | Resource)
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | string \| [Resource](ts-types.md#resource) | Yes| Plain text.|
-- Parameters
- | Name | Type | Mandatory | Default Value | Description |
- | -------- | -------- | -------- | -------- | -------- |
- | content | string | Yes | - | Text content. |
## Attributes
-In addition to the text style attributes, the attributes below are supported.
+In addition to the [universal text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported.
-| Name | Type | Default Value | Description |
-| -------- | -------- | -------- | -------- |
-| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype-enums),
color?: Color
} | {
type: TextDecorationType.None
} | Style and color of the text decorative line. |
-| textCase | [TextCase](ts-appendix-enums.md#textcase-enums) | Normal | Text case. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None
color: Color.Black
} |
+| letterSpacing | number \| string | Letter spacing. |
+| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **Normal** |
## Events
-Among all the universal events, only the click event is supported.
+Among all the [universal events](ts-universal-attributes-click.md), only the click event is supported.
->  **NOTE**
-> As the **<Span>** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
+> **NOTE**
+>
+> As the **\** component does not include size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
## Example
-
-```
+```ts
+// xxx.ets
@Entry
@Component
struct SpanExample {
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
index 3d1fe4f26d33d749f2004b23e7df010ea475556d..354cd00042b8ba46a1cf9a68effc32f792c9f48a 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
@@ -2,16 +2,11 @@
The **\** component is used to display a piece of textual information.
-> **NOTE**
+> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Required Permissions
-
-None
-
-
## Child Components
This component can contain the [\](ts-basic-components-span.md) child component.
@@ -22,34 +17,38 @@ This component can contain the [\](ts-basic-components-span.md) child comp
Text(content?: string | Resource)
**Parameters**
+
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
-| content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\** component do not take effect when it contains the **\** child component.
Default value: ' ' |
-
+| content | string \| [Resource](ts-types.md#resource) | No| Text content. The content and style set for the **\** component do not take effect when it contains the **\** child component.
Default value: **' '**|
## Attributes
-
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode of multiple lines of text.
Default value: **TextAlign.Start** |
-| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
Default value: **{overflow: TextOverflow.Clip}**
**NOTE**
Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. |
-| maxLines | number | Maximum number of lines in the text.
Default value: **Infinity** |
-| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used. |
-| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor8)
} | Style and color of the text decorative line.
Default value: **{
type: TextDecorationType.None,
color: Color.Black
}** |
-| baselineOffset | number \| string | Offset of the text baseline. |
-| letterSpacing | number \| string | Letter spacing. |
-| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size. |
-| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size. |
-| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal** |
-
-> **NOTE**
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name | Type | Description |
+| ----------------------- | ----------------------------------- | ------------------------------------------- |
+| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the text.
Default value: **TextAlign.Start**|
+| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
Default value: **{overflow: TextOverflow.Clip}**
**NOTE**
Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.
This attribute must be used with `maxLines` to take effect.|
+| maxLines | number | Maximum number of lines in the text.
Default value: **Infinity**
**NOTE**
By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.|
+| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
+| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: **{
type: TextDecorationType.None,
color: Color.Black
}** |
+| baselineOffset | number \| string | Baseline offset of the text. The default value is **0**. |
+| letterSpacing | number \| string | Letter spacing. |
+| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size. |
+| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size. |
+| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal**|
+| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
Default value: **CopyOptions.None**|
+
+> **NOTE**
>
> The **\** component cannot contain both the text and the child component **\**. If both of them exist, only the content in **\** is displayed.
## Example
+### Example 1
+Examples of using **textAlign**, **textOverflow**, **maxLines**, and **lineHeight**
```ts
// xxx.ets
@Entry
@@ -57,77 +56,184 @@ Text(content?: string | Resource)
struct TextExample1 {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
- Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
- Text('This is the text with the line height set This is the text with the line height set This is the text with the line height set.')
- .lineHeight(25).fontSize(12).border({ width: 1 }).padding(10)
+ // Set the horizontal alignment mode for the text.
+ // Single-line text
+ Text('textAlign').fontSize(9).fontColor(0xCCCCCC)
+ Text('TextAlign set to Center.')
+ .textAlign(TextAlign.Center)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('TextAlign set to Start.')
+ .textAlign(TextAlign.Start)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('TextAlign set to End.')
+ .textAlign(TextAlign.End)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+
+ // Multi-line text
+ Text('This is the text content with textAlign set to Center.')
+ .textAlign(TextAlign.Center)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('This is the text content with textAlign set to Start.')
+ .textAlign(TextAlign.Start)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('This is the text content with textAlign set to End.')
+ .textAlign(TextAlign.End)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
- Text('TextOverflow').fontSize(9).fontColor(0xCCCCCC)
- Text('This is the setting of textOverflow to none text content This is the setting of textOverflow to none text content.')
+
+ // Set the display mode when the text is too long.
+ Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
+ // Clip the text when the value of maxLines is exceeded.
+ Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
.textOverflow({ overflow: TextOverflow.None })
- .fontSize(12).border({ width: 1 }).padding(10)
- Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.')
- .textOverflow({ overflow: TextOverflow.Clip })
- .maxLines(1).fontSize(12).border({ width: 1 }).padding(10)
- Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('').join('\u200B'))
+ .maxLines(1)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+
+ // Show an ellipsis (...) when the value of maxLines is exceeded.
+ Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')
+ .join('\u200B'))
.textOverflow({ overflow: TextOverflow.Ellipsis })
- .maxLines(1).fontSize(12).border({ width: 1 }).padding(10)
+ .maxLines(1)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
- Text('decoration').fontSize(9).fontColor(0xCCCCCC)
- Text('This is the text content with the decoration set to Underline and the color set to Red.')
- .decoration({ type: TextDecorationType.Underline, color: Color.Red })
- .fontSize(12).border({ width: 1 }).padding(10)
- Text('This is the text content with the decoration set to LineThrough and the color set to Red.')
- .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
+ Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
+ Text('This is the text with the line height set. This is the text with the line height set.')
.fontSize(12).border({ width: 1 }).padding(10)
- Text('This is the text content with the decoration set to Overline and the color set to Red.')
- .decoration({ type: TextDecorationType.Overline, color: Color.Red })
+ Text('This is the text with the line height set. This is the text with the line height set.')
.fontSize(12).border({ width: 1 }).padding(10)
+ .lineHeight(20)
}.height(600).width(350).padding({ left: 35, right: 35, top: 35 })
}
}
```
+
-
-
+### Example 2
+Example of using **decoration**, **baselineOffset**, **letterSpacing**, and **textCase**:
```ts
-// xxx.ets
@Entry
@Component
struct TextExample2 {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
+ Text('decoration').fontSize(9).fontColor(0xCCCCCC)
+ Text('This is the text content with the decoration set to LineThrough and the color set to Red.')
+ .decoration({
+ type: TextDecorationType.LineThrough,
+ color: Color.Red
+ })
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+
+
+ Text('This is the text content with the decoration set to Overline and the color set to Red.')
+ .decoration({
+ type: TextDecorationType.Overline,
+ color: Color.Red
+ })
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+
+
+ Text('This is the text content with the decoration set to Underline and the color set to Red.')
+ .decoration({
+ type: TextDecorationType.Underline,
+ color: Color.Red
+ })
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+
+ // Set the text baseline offset.
+ Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)
+ Text('This is the text content with baselineOffset 0.')
+ .baselineOffset(0)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('This is the text content with baselineOffset 30.')
+ .baselineOffset(30)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('This is the text content with baselineOffset -20.')
+ .baselineOffset(-20)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+
+ // Set the letter spacing.
+ Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
+ Text('This is the text content with letterSpacing 0.')
+ .letterSpacing(0)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('This is the text content with letterSpacing 3.')
+ .letterSpacing(3)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ Text('This is the text content with letterSpacing -1.')
+ .letterSpacing(-1)
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+
Text('textCase').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with textCase set to Normal.')
.textCase(TextCase.Normal)
- .fontSize(12).border({ width: 1 }).padding(10).width('100%')
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ // Display the text in lowercase.
Text('This is the text content with textCase set to LowerCase.')
.textCase(TextCase.LowerCase)
- .fontSize(12).border({ width: 1 }).padding(10).width('100%')
+ .fontSize(12)
+ .border({ width: 1 })
+ .padding(10)
+ .width('100%')
+ // Display the text in uppercase.
Text('This is the text content with textCase set to UpperCase.')
.textCase(TextCase.UpperCase)
.fontSize(12).border({ width: 1 }).padding(10)
- Text('textAlign').fontSize(9).fontColor(0xCCCCCC)
- Text('This is the text content with textAlign set to Center.')
- .textAlign(TextAlign.Center)
- .fontSize(12).border({ width: 1 }).padding(10).width('100%')
- Text('This is the text content with textAlign set to Start.')
- .textAlign(TextAlign.Start)
- .fontSize(12).border({ width: 1 }).padding(10).width('100%')
- Text('This is the text content with textAlign set to End.')
- .textAlign(TextAlign.End)
- .fontSize(12).border({ width: 1 }).padding(10).width('100%')
-
- Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)
- Text('This is the text content with baselineOffset set to 10.')
- .baselineOffset(10).fontSize(12).border({ width: 1 }).padding(10).width('100%')
- Text('This is the text content with baselineOffset set to 30.')
- .baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width('100%')
- Text('This is the text content with baselineOffset set to -10.')
- .baselineOffset(-10).fontSize(12).border({ width: 1 }).padding(10).width('100%')
}.height(700).width(350).padding({ left: 35, right: 35, top: 35 })
}
}
```
-
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
index d8d736c178dac82c82ce3021f1131fd827478884..4fb29a66fa03d646552e2461c22defe5d9587ec0 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
@@ -1,15 +1,10 @@
# TextArea
-The **\