diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textExp1.png b/zh-cn/application-dev/reference/arkui-ts/figures/textExp1.png
new file mode 100644
index 0000000000000000000000000000000000000000..15d8410388040337f52a039f946d20f3cc0504fc
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textExp1.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textExp2.png b/zh-cn/application-dev/reference/arkui-ts/figures/textExp2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6d1aa365e071f3064e25fe45afa4ce4efcddb65
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textExp2.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif
deleted file mode 100644
index 8b359a2d036a69fd442145d55e23031755c925c1..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif
deleted file mode 100644
index 627fff6c85420f981d9ae844d0e53a77d254ac7c..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
index 5432089561abf1cef59dd5dd5166efa0e8be596e..79498c8d67311ba7ff356a9c90e8358c80dd6c1d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
@@ -28,16 +28,17 @@ Text(content?: string | Resource)
| 名称 | 参数类型 | 描述 |
| ----------------------- | ----------------------------------- | ------------------------------------------- |
-| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。
默认值：TextAlign.Start |
+| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本在水平方向的对齐方式。
默认值：TextAlign.Start |
| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。
默认值：{overflow: TextOverflow.Clip}
**说明：**
文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。
需配合`maxLines`使用，单独设置不生效。 |
| maxLines | number | 设置文本的最大行数。
默认值：Infinity
**说明：**
默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 `textOverflow`来指定截断方式。 |
| lineHeight | string \| number \| [Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None,
color：Color.Black
} |
-| baselineOffset | number \| string | 设置文本基线的偏移量。 |
+| baselineOffset | number \| string | 设置文本基线的偏移量，默认值0。 |
| letterSpacing | number \| string | 设置文本字符间距。 |
| minFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最小显示字号。 |
| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最大显示字号。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。
默认值：TextCase.Normal |
+| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 组件支持设置文本是否可复制粘贴。
默认值：CopyOptions.None |
> **说明：**
>
@@ -46,6 +47,8 @@ Text(content?: string | Resource)
## 示例
+### 示例1
+textAlign，textOverflow，maxLines，lineHeight使用示例。
```ts
// xxx.ets
@Entry
@@ -53,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)
+ // 文本水平方向对齐方式设置
+ // 单行文本
+ 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%')
- 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.')
+ // 多行文本
+ 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+maxLines').fontSize(9).fontColor(0xCCCCCC)
+ // 超出maxLines截断内容展示
+ 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)
+
+ // 超出maxLines展示省略号
+ 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 })
+ 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 LineThrough and the color set to Red.')
- .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
- .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 })
}
}
```
+
-
-
+### 示例2
+decoration，baselineOffset，letterSpacing，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%')
+
+ // 文本基线偏移
+ 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%')
+
+ // 文本字符间距
+ 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%')
+ // 文本全小写展示
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%')
+ // 文本全大写展示
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/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index d214438503d0373fa0a3077ade6b5e486a2dcb11..307d03d2a20fae1ead2d33e88f9089e2f569e74b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -20,7 +20,6 @@
| -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
| message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 |
-| arrowOffset9+ | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 |
| primaryButton | {
value: string,
action: () => void
} | 否 | 第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。 |
| secondaryButton | {
value: string,
action: () => void
} | 否 | 第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。 |
| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 |
@@ -31,7 +30,6 @@
| -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。
默认值：Placement.Bottom |
-| arrowOffset9+ | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 |
| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | 是否显示箭头。
从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。
默认值：true |
@@ -45,8 +43,8 @@
@Entry
@Component
struct PopupExample {
- @State handlePopup: boolean = false;
- @State customPopup: boolean = false;
+ @State handlePopup: boolean = false
+ @State customPopup: boolean = false
// popup构造器定义弹框内容
@Builder popupBuilder() {
@@ -61,25 +59,24 @@ struct PopupExample {
// PopupOptions 类型设置弹框内容
Button('PopupOptions')
.onClick(() => {
- this.handlePopup = !this.handlePopup //点击展示弹框
+ this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
- placementOnTop: false,
- // 第一个按钮
+ placementOnTop: true,
primaryButton: {
value: 'confirm',
action: () => {
this.handlePopup = !this.handlePopup
- console.info('ok Button click')
+ console.info('confirm Button click')
}
},
// 第二个按钮
secondaryButton: {
- value: 'cancle',
+ value: 'cancel',
action: () => {
- this.handlePopup = !this.handlePopup
- console.info('cancle Button click')
+ this.handlePopup = !this.handlePopup;
+ console.info('cancel Button click')
}
},
onStateChange: (e) => {
@@ -103,7 +100,6 @@ struct PopupExample {
maskColor: 0x33000000,
popupColor: Color.Yellow,
enableArrow: true,
- autoCancel: true,
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
index ff65b1cabc38986ba0d85f33746935b90ddc089b..33f2d964f4432eecd591abb1d4d0992328f2b0ff 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
@@ -1,5 +1,7 @@
# 点击事件
+组件被点击时触发的事件。
+
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -7,26 +9,29 @@
## 事件
-| 名称 | 支持冒泡 | 功能描述 |
-| ------------------------------------------------------------ | -------- | --------------------------------------------------- |
-| onClick(event: (event?: ClickEvent) => void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 |
+| 名称 | 支持冒泡 | 功能描述 |
+| ---------------------------------------- | ---- | --------------------------------- |
+| onClick(event: (event?: ClickEvent) => void) | 否 | 点击动作触发该回调，event返回值见ClickEvent对象说明。 |
## ClickEvent对象说明
-| 属性名称 | 类型 | 描述 |
-| ---------------------- | ------------------------------------ | -------------------------------------------------------- |
-| screenX | number | 点击点相对于应用窗口左上角的X坐标。 |
-| screenY | number | 点击点相对于应用窗口左上角的Y坐标。 |
-| x | number | 点击点相对于被点击元素左边沿的X坐标。 |
-| y | number | 点击点相对于被点击元素上边沿的Y坐标。 |
-| target8+ | [EventTarget](#eventtarget8对象说明) | 被点击元素对象。 |
-| timestamp8+ | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
-| source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
+| 名称 | 类型 | 描述 |
+| ------------------- | ------------------------------------ | -------------------------------------------------------- |
+| screenX | number | 点击位置相对于应用窗口左上角的X坐标。 |
+| screenY | number | 点击位置相对于应用窗口左上角的Y坐标。 |
+| x | number | 点击位置相对于被点击元素左上角的X坐标。 |
+| y | number | 点击位置相对于被点击元素左上角的Y坐标。 |
+| timestamp8+ | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
+| target8+ | [EventTarget](#eventtarget8对象说明) | 触发事件的元素对象显示区域。 |
+| source8+ | [SourceType](ts-gesture-settings.md#sourcetype枚举说明) | 事件输入设备。 |
## EventTarget8+对象说明
-| 名称 | 参数类型 | 描述 |
-| ---- | ------------------ | ---------- |
+
+| 名称 | 参数类型 | 描述 |
+| ---- | ------------------------- | ---------- |
| area | [Area](ts-types.md#area8) | 目标元素的区域信息。 |
+
+
## 示例
```ts
@@ -38,15 +43,25 @@ struct ClickExample {
build() {
Column() {
- Button('Click').backgroundColor(0x2788D9).width(100).height(40)
- .onClick((event: ClickEvent) => {
- console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
- + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
- + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
- + event.target.area.width + '\n height:' + event.target.area.height)
- })
- Text(this.text).padding(15)
- }.height(350).width('100%').padding(10)
+ Row({ space: 20 }) {
+ Button('Click').width(100).height(40)
+ .onClick((event: ClickEvent) => {
+ this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
+ + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
+ + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
+ })
+ Button('Click').width(200).height(50)
+ .onClick((event: ClickEvent) => {
+ this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
+ + '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
+ + event.target.area.width + '\n height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
+ })
+ }.margin(20)
+
+ Text(this.text).margin(15)
+ }.width('100%')
}
}
```