!10497 update docs

Merge pull request !10497 from sienna1128/docs/code1011

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md

@@ -28,12 +28,12 @@ Text(content?: string | Resource)
 
 | 名称                       | 参数类型                            | 描述                                               |
 | ----------------------- | ----------------------------------- | ------------------------------------------- |
-| textAlign               | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。<br/>默认值：TextAlign.Start |
+| textAlign               | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本在水平方向的对齐方式。<br/>默认值：TextAlign.Start |
 | textOverflow            | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：{overflow:&nbsp;TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。<br />需配合`maxLines`使用，单独设置不生效。 |
 | maxLines                | number | 设置文本的最大行数。<br />默认值：Infinity<br/>**说明：**<br />默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过        `textOverflow`来指定截断方式。 |
 | lineHeight              | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource)  | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
 | decoration              | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值：{<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} |
-| baselineOffset          | number&nbsp;\|&nbsp;string | 设置文本基线的偏移量。                              |
+| baselineOffset          | number&nbsp;\|&nbsp;string | 设置文本基线的偏移量，默认值0。                              |
 | letterSpacing           | number&nbsp;\|&nbsp;string | 设置文本字符间距。                                 |
 | minFontSize             | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)      | 设置文本最小显示字号。                                 |
 | maxFontSize             | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)      | 设置文本最大显示字号。                                 |
@@ -47,6 +47,8 @@ Text(content?: string | Resource)
 
 ## 示例
 
+### 示例1
+textAlign，textOverflow，maxLines，lineHeight使用示例。
 ```ts
 // xxx.ets
 @Entry
@@ -54,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 })
   }
 }
 ```
+![textExp1](figures/textExp1.png)
 
-![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif)
-
+### 示例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 })
   }
 }
 ```
-
-![zh-cn_image_0000001174422918](figures/zh-cn_image_0000001174422918.gif)
+![textExp1](figures/textExp2.png)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md

@@ -47,8 +47,8 @@
 @Entry
 @Component
 struct PopupExample {
-  @State handlePopup: boolean = false;
-  @State customPopup: boolean = false;
+  @State handlePopup: boolean = false
+  @State customPopup: boolean = false
 
   // popup构造器定义弹框内容
   @Builder popupBuilder() {
@@ -63,48 +63,31 @@ struct PopupExample {
       // PopupOptions 类型设置弹框内容
       Button('PopupOptions')
         .onClick(() => {
-          this.noHandlePopup = !this.noHandlePopup;
-        })
-        .bindPopup(this.noHandlePopup, {
-          message: 'content1 content1',
-          placementOnTop: false,
-          showInSubWindow:true,
-          onStateChange: (e) => {
-            console.info(e.isVisible.toString())
-            if (!e.isVisible) {
-              this.noHandlePopup = false;
-            }
-          }
-        })
-        .position({ x: 100, y: 50 })
-
-      Button('with handle popup')
-        .onClick(() => {
-          this.handlePopup = !this.handlePopup;
+          this.handlePopup = !this.handlePopup
         })
         .bindPopup(this.handlePopup, {
-          message: 'content2 content2',
+          message: 'This is a popup with PopupOptions',
           placementOnTop: true,
           showInSubWindow:false,
           primaryButton: {
             value: 'confirm',
             action: () => {
-              this.handlePopup = !this.handlePopup;
-              console.info('ok Button click')
+              this.handlePopup = !this.handlePopup
+              console.info('confirm Button click')
             }
           },
           // 第二个按钮
           secondaryButton: {
-            value: 'cancle',
+            value: 'cancel',
             action: () => {
               this.handlePopup = !this.handlePopup;
-              console.info('cancle Button click')
+              console.info('cancel Button click')
             }
           },
           onStateChange: (e) => {
             console.info(e.isVisible.toString())
             if (!e.isVisible) {
-              this.handlePopup = false;
+              this.handlePopup = false
             }
           }
         })
@@ -114,7 +97,7 @@ struct PopupExample {
       // CustomPopupOptions 类型设置弹框内容
       Button('CustomPopupOptions')
         .onClick(() => {
-          this.customPopup = !this.customPopup;
+          this.customPopup = !this.customPopup
         })
         .bindPopup(this.customPopup, {
           builder: this.popupBuilder,
@@ -122,10 +105,10 @@ struct PopupExample {
           maskColor: 0x33000000,
           popupColor: Color.Yellow,
           enableArrow: true,
-          showInSubWindow:false,
+          showInSubWindow: false,
           onStateChange: (e) => {
             if (!e.isVisible) {
-              this.customPopup = false;
+              this.customPopup = false
             }
           }
         })

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md

@@ -39,7 +39,7 @@
 @Entry
 @Component
 struct ClickExample {
-  @State text: string = '';
+  @State text: string = ''
 
   build() {
     Column() {