@@ -334,7 +334,7 @@
```
- ```
+ ```css
/* xxx.css */
.container {
flex-direction: column;
@@ -352,3 +352,76 @@
```
+
+4. 进度类、加载类、占比类圆形图表
+ ```html
+
+
+ progress Example
+
+
+ loading Example
+
+
+ rainbow Example
+
+
+
+ ```
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .chart-region {
+ height: 400px;
+ width: 700px;
+ margin-top: 10px;
+ }
+ .text {
+ margin-top: 30px;
+ }
+ ```
+ ```js
+ // xxx.js
+ export default {
+ data: {
+ progressdata: {
+ value: 50,
+ name: 'progress'
+ },
+ loadingdata: {
+ startColor: "#ffc0cb",
+ endColor: "#00bfff",
+ },
+ rainbowdata: [
+ {
+ value: 50,
+ name: 'item1'
+ },
+ {
+ value: 10,
+ name: 'item2'
+ },
+ {
+ value: 20,
+ name: 'item3'
+ },
+ {
+ value: 10,
+ name: 'item4'
+ },
+ {
+ value: 10,
+ name: 'item5'
+ }
+ ]
+ }
+ }
+ ```
+ 
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
index c2ada666a38d33b17859157647e18847d7b49495..28f0128a4c0d661078f7803c79c8a4490eb9d7fd 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
@@ -1,7 +1,7 @@
# image
->  **说明：**
-> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：**
+> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。
@@ -15,55 +15,55 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。
支持Base64字符串
6+ 。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。
支持dataability://的路径前缀，用于访问通过data ability提供的图片路径
6+ 。 |
-| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| ---- | ------ | ---- | ---- | ---------------------------------------- |
+| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。
- 支持Base64字符串
6+ 。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。
- 支持dataability://的路径前缀，用于访问通过data ability提供的图片路径
6+ 。 |
+| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） |
-| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。（不支持svg格式） |
-| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。 |
-| object-position
7+ | string | 0px 0px | 否 | 设置图片在组件内展示的位置。
设置类型有两种：
1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置
2. 字符，可选值：
- left 图片显示在组件左侧；
- top 图片显示在组件顶部位置；
- right 图片显示在组件右侧位置；
- bottom 图片显示在组件底部位置。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
+| object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit类型说明。 |
+| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持svg格式。 |
+| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 |
+| object-position
7+ | string | 0px 0px | 否 | 设置图片在组件内展示的位置。
设置类型有两种：
1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置
2. 字符，可选值：
- left 图片显示在组件左侧；
- top 图片显示在组件顶部位置；
- right 图片显示在组件右侧位置；
- bottom 图片显示在组件底部位置。 |
**表1** object-fit 类型说明
-| 类型 | 描述 |
-| -------- | -------- |
-| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
-| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
-| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
-| none | 保持原有尺寸进行居中显示。 |
-| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
-
->  **说明：**
-> 使用svg图片资源时：
->
-> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
->
-> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
->
-> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
->
-> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
->
-> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
+| 类型 | 描述 |
+| ---------- | ------------------------------------ |
+| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
+| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
+| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
+| none | 保持原有尺寸进行居中显示。 |
+| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
+
+> **说明：**
+> 使用svg图片资源时：
+>
+> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
+>
+> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
+>
+> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
+>
+> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
+>
+> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
-| complete(Rich) | { width：width， height：height } | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
-| error(Rich) | { width：width， height：height } | 图片加载出现异常时触发该回调，异常时长宽为零。 |
+| 名称 | 参数 | 描述 |
+| -------------- | ---------------------------------------- | ------------------------- |
+| complete(Rich) | {
width：width，
height：height
} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
+| error(Rich) | {
width：width，
height：height
} | 图片加载出现异常时触发该回调，异常时长宽为零。 |
## 方法
@@ -72,7 +72,7 @@
## 示例
-```
+```html
@@ -81,7 +81,7 @@
```
-```
+```css
/* xxx.css */
.container {
justify-content: center;
@@ -96,7 +96,7 @@
}
```
-```
+```js
// xxx.js
export default {
data: {
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
index 15a1e89ddca0b91a2fe9716e2037010f63738fa6..5a7d79339a11fa55cc5dee82e03e4af57c93967b 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
@@ -1,7 +1,7 @@
# picker-view
->  **说明：**
-> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：**
+> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
嵌入页面的滑动选择器。
@@ -19,24 +19,24 @@
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：
- text：文本选择器。
- time：时间选择器。
- date：日期选择器。
- datetime：日期时间选择器。
- multi-text：多列文本选择器。 |
-文本选择器：type=text
+### 文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | ------ | ---- | ---- | ---------------------------------------- |
-| range | Array | - | 否 | 设置文本选择器的取值范围。
>  **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 |
+| range | Array | - | 否 | 设置文本选择器的取值范围。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 |
| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 |
| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 |
-时间选择器：type=time
+### 时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | 否 | 时间选择器是否包含秒。 |
| selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为 HH:mm；
当包含秒时，格式为HH:mm:ss。 |
-| hours | number | 24
1-4 -
5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
>  **说明：**
> 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。
5+ |
+| hours | number | 24
1-4 -
5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
-日期选择器：type=date
+### 日期选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- |
@@ -46,21 +46,21 @@
| lunar
5+ | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
-日期时间选择器：type=datetime，日期的选择范围为本年的日月。
+### 日期时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
-| hours | number | 24
1-4 -
5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
>  **说明：**
> 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。
5+ |
+| hours | number | 24
1-4 -
5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
| lunar
5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
-多列文本选择器：type=multi-text
+### 多列文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | 是 | 设置多列文本选择器的列数。 |
-| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。
>  **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。 |
+| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。
使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
@@ -70,7 +70,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
-| color | <color> | \#ffffff | 否 | 候选项字体颜色。 |
+| color | <color> | \#ffffff | 否 | 候选项字体颜色。 |
| font-size | <length> | 16px | 否 | 候选项字体尺寸，类型length，单位px。 |
| selected-color | <color> | #ff0a69f7 | 否 | 选中项字体颜色。 |
| selected-font-size | <length> | 20px | 否 | 选中项字体尺寸，类型length，单位px。 |
@@ -83,31 +83,31 @@
仅支持如下事件：
-type=text：
+### 文本选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | --------------- |
| change | { newValue: newValue, newSelected: newSelected } | 文本选择器选定值后触发该事件。 |
-type=time：
+### 时间选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ------------------------------- |
| change | { hour: hour, minute: minute, [second:second]} | 时间选择器选定值后触发该事件。
包含秒时，返回时分秒。 |
-type=date：
+### 日期选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | --------------- |
| change | { year:year, month:month, day:day } | 日期选择器选择值后触发该事件。 |
-type=datetime：
+### 日期时间选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ----------------- |
| change | { year:year, month:month, day:day, hour:hour, minute:minute } | 日期时间选择器选择值后触发该事件。 |
-type=multi-text：
+### 多列文本选择器
| 名称 | 参数 | 描述 |
| ------------ | ---------------------------------------- | ---------------------------------------- |
@@ -120,67 +120,252 @@ type=multi-text：
## 示例
-
-```
-
-
-
- Selected：{{time}}
-
-
-
-```
-
-```
-/* xxx.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- left: 0px;
- top: 0px;
- width: 454px;
- height: 454px;
-}
-.title {
- font-size: 30px;
- text-align: center;
-}
-.time-picker {
- width: 500px;
- height: 400px;
- margin-top: 20px;
-}
-```
-
-```
-/* xxx.js */
-export default {
- data: {
- defaultTime: "",
- time: "",
- },
- onInit() {
- this.defaultTime = this.now();
- },
- handleChange(data) {
- this.time = this.concat(data.hour, data.minute);
- },
- now() {
- const date = new Date();
- const hours = date.getHours();
- const minutes = date.getMinutes();
- return this.concat(hours, minutes);
- },
-
- fill(value) {
- return (value > 9 ? "" : "0") + value;
- },
-
- concat(hours, minutes) {
- return `${this.fill(hours)}:${this.fill(minutes)}`;
- },
-}
-```
-
-
+1. 文本选择器
+ ```html
+
+
+
+ 选中值：{{value}} 选中下标： {{index}}
+
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ options: ['选项1', '选项2', '选项3'],
+ value: "选项1",
+ index: 0
+ },
+ handleChange(data) {
+ this.value = data.newValue;
+ this.index = data.newSelected;
+ },
+ }
+ ```
+ 
+
+2. 时间选择器
+ ```html
+
+
+
+ Selected：{{time}}
+
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ }
+ .time-picker {
+ width: 500px;
+ height: 400px;
+ margin-top: 20px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ defaultTime: "",
+ time: "",
+ },
+ onInit() {
+ this.defaultTime = this.now();
+ },
+ handleChange(data) {
+ this.time = this.concat(data.hour, data.minute);
+ },
+ now() {
+ const date = new Date();
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ return this.concat(hours, minutes);
+ },
+ fill(value) {
+ return (value > 9 ? "" : "0") + value;
+ },
+ concat(hours, minutes) {
+ return `${this.fill(hours)}:${this.fill(minutes)}`;
+ },
+ }
+ ```
+
+ 
+
+3. 日期选择器
+ ```html
+
+
+
+ Selected：{{time}}
+
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ .date-picker {
+ width: 500px;
+ height: 400px;
+ margin-top: 50px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ date: "",
+ },
+ handleChange(data) {
+ this.date = data.year + "年" + data.month + "月" + data.day + "日";
+ },
+ }
+ ```
+ 
+
+4. 日期时间选择器
+ ```html
+
+
+
+ Selected：{{datetime}}
+
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 500px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ .date-picker {
+ width: 500px;
+ height: 400px;
+ margin-top: 50px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ datetime: "",
+ },
+ handleChange(data) {
+ this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分";
+ },
+ }
+ ```
+ 
+
+5. 多列文本选择器
+
+ ```html
+
+
+
+ Selected：{{ value }}
+
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 500px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ multitext: [
+ [1, 2, 3],
+ [4, 5, 6],
+ [7, 8, 9],
+ ],
+ value: ""
+ },
+ handleChange(data) {
+ this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected;
+ },
+ }
+ ```
+ 
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md
index 7e8e09b155d0c3d1b8d0e60682bf07c3bc3e9164..8f040c9400ffad5b447166ea9716b3834dd8f711 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md
@@ -1,7 +1,7 @@
# search
->  **说明：**
-> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：**
+> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。
@@ -15,19 +15,19 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
-| hint | string | - | 否 | 搜索提示文字。 |
-| value | string | - | 否 | 搜索框搜索文本值。 |
-| searchbutton
5+ | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
-| menuoptions
5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
+| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
+| hint | string | - | 否 | 搜索提示文字。 |
+| value | string | - | 否 | 搜索框搜索文本值。 |
+| searchbutton
5+ | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
+| menuoptions
5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
**表1** MenuOption
5+
-| 名称 | 类型 | 描述 |
-| -------- | -------- | -------- |
-| icon | string | 菜单选项中的图标路径。 |
+| 名称 | 类型 | 描述 |
+| ------- | ------ | ----------- |
+| icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 |
@@ -35,28 +35,28 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| color | <color> | \#e6000000 | 否 | 搜索框的文本颜色。 |
-| font-size | <length> | 16px | 否 | 搜索框的文本尺寸。 |
-| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
>  **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
-| placeholder-color | <color> | \#99000000
| 否 | 搜索框的提示文本颜色。 |
-| font-weight | number \| string | normal | 否 | 搜索框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
-| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
-| caret-color
6+ | <color> | - | 否 | 设置输入光标的颜色。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
+| color | <color> | \#e6000000 | 否 | 搜索框的文本颜色。 |
+| font-size | <length> | 16px | 否 | 搜索框的文本尺寸。 |
+| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
+| placeholder-color | <color> | \#99000000
| 否 | 搜索框的提示文本颜色。 |
+| font-weight | number \| string | normal | 否 | 搜索框的字体粗细，见text组件[font-weight](../arkui-js/js-components-basic-text.md#样式)的样式属性。 |
+| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
+| caret-color
6+ | <color> | - | 否 | 设置输入光标的颜色。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
-| change | { text:newText } | 输入内容发生变化时触发。
>  **说明：**
> 改变value属性值不会触发该回调。 |
-| submit | { text:submitText } | 点击搜索图标、搜索按钮
5+ 或者按下软键盘搜索按钮时触发。 |
-| translate
5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
-| share
5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
-| search
5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
+| 名称 | 参数 | 描述 |
+| ------------------------- | ---------------------------------------- | ---------------------------------------- |
+| change | { text:newText } | 输入内容发生变化时触发。
改变value属性值不会触发该回调。 |
+| submit | { text:submitText } | 点击搜索图标、搜索按钮
5+ 或者按下软键盘搜索按钮时触发。 |
+| translate
5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
+| share
5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
+| search
5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect
5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
@@ -67,7 +67,7 @@
## 示例
-```
+```html
@@ -75,7 +75,7 @@
```
-```
+```css
/* xxx.css */
.container {
display: flex;
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
index fec6983512032ad84693f293302f85ed66430b3c..09d5c7e3a82938a1ef217ce444d99ebbbdd49d36 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
@@ -1,6 +1,7 @@
# slider
->  **说明：**
+> **说明：**
+>
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。
@@ -50,55 +51,33 @@
| 属性 | 类型 | 说明 |
| -------- | -------- | -------- |
| value
5+ | number | 当前slider的进度值。 |
-| mode
5+ | string | 当前change事件的类型，可选值为：
- start：slider的值开始改变。
- move：slider的值跟随手指拖动中。
- end：slider的值结束改变。 |
+| mode
5+ | string | 当前change事件的类型，可选值为：
- start：slider的值开始改变。
- move：slider的值跟随手指拖动中。
- end：slider的值结束改变。
- click：slider的值在点击进度条后改变。 |
## 示例
-```
+```html
- slider start value is {{startValue}}
- slider current value is {{currentValue}}
- slider end value is {{endValue}}
-
```
-```
+```css
/* xxx.css */
.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
-```
-
-```
-// xxx.js
-export default {
- data: {
- value: 0,
- startValue: 0,
- currentValue: 0,
- endValue: 0,
- },
- setvalue(e) {
- if (e.mode == "start") {
- this.value = e.value;
- this.startValue = e.value;
- } else if (e.mode == "move") {
- this.value = e.value;
- this.currentValue = e.value;
- } else if (e.mode == "end") {
- this.value = e.value;
- this.endValue = e.value;
- }
- }
+slider{
+ margin-top: 100px;
}
```
-
+
+
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md
index 9d8e6bfc8079d0aaeec0129c13ce97a55b366449..50a4095562e348d0e039ac2842db80aea7b4be6b 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md
@@ -1,7 +1,7 @@
# switch
->  **说明：**
-> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：**
+> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开关选择器，通过开关，开启或关闭某个功能。
@@ -19,12 +19,12 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| checked | boolean | false | 否 | 是否选中。 |
-| showtext | boolean | false | 否 | 是否显示文本。 |
-| texton | string | "On" | 否 | 选中时显示的文本。 |
-| textoff | string | "Off" | 否 | 未选中时显示的文本。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | ------- | ----- | ---- | ---------- |
+| checked | boolean | false | 否 | 是否选中。 |
+| showtext | boolean | false | 否 | 是否显示文本。 |
+| texton | string | "On" | 否 | 选中时显示的文本。 |
+| textoff | string | "Off" | 否 | 未选中时显示的文本。 |
## 样式
@@ -33,24 +33,24 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| texton-color(Rich) | <color> | \#000000 | 否 | 选中时显示的文本颜色。 |
-| textoff-color(Rich) | <color> | \#000000 | 否 | 未选中时显示的文本颜色。 |
-| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
-| font-size(Rich) | <length> | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
-| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
>  **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
-| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
-| font-weight(Rich) | number \| string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
-| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| texton-color(Rich) | <color> | \#000000 | 否 | 选中时显示的文本颜色，仅设置texton和textoff生效。 |
+| textoff-color(Rich) | <color> | \#000000 | 否 | 未选中时显示的文本颜色，仅设置texton和textoff生效。 |
+| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
+| font-size(Rich) | <length> | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
+| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
+| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见text组件[font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
+| font-weight(Rich) | number \| string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见text组件的[font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
+| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
+| 名称 | 参数 | 描述 |
+| ------ | ---------------------------------------- | ------------- |
| change | { checked: checkedValue } | 选中状态改变时触发该事件。 |
## 方法
@@ -59,48 +59,66 @@
## 示例
-```
+```html
-
-
+
+
+
+
+
+
```
-```
+```css
/* xxx.css */
.container {
- display: flex;
- justify-content: center;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-switch{
- texton-color:#002aff;
- textoff-color:silver;
- text-padding:20px;
+.switch {
+ texton-color: red;
+ textoff-color: forestgreen;
+}
+.text {
+ text-padding: 20px;
+ font-size: 30px;
+ font-weight: 700;
}
```
-```
+```js
// xxx.js
import prompt from '@system.prompt';
export default {
- data: {
- title: 'World'
- },
- switchChange(e){
- console.log(e.checked);
- if(e.checked){
- prompt.showToast({
- message: "打开开关"
- });
- }else{
- prompt.showToast({
- message: "关闭开关"
- });
+ data: {
+ title: 'World'
+ },
+ switchChange(e) {
+ if (e.checked) {
+ prompt.showToast({
+ message: "打开开关"
+ });
+ } else {
+ prompt.showToast({
+ message: "关闭开关"
+ });
+ }
+ },
+ normalswitchChange(e) {
+ if (e.checked) {
+ prompt.showToast({
+ message: "switch on"
+ });
+ } else {
+ prompt.showToast({
+ message: "switch off"
+ });
+ }
}
- }
}
```
-
+
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
index c25ba6285163c57c5bfc9e76828baf0b9fd1daa2..d3b8dbe68f3073c3cde2cee2c1ad0b85943a1458 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
@@ -1,10 +1,10 @@
# text
->  **说明：**
+> **说明：**
>
-> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
-> - 文本的展示内容需要写在元素标签内。
+> - 文本的展示内容需要写在元素标签内。
文本，用于呈现一段信息。
@@ -27,43 +27,43 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| color | <color> | #e5000000 | 否 | 设置文本的颜色。 |
-| font-size | <length> | 30px | 否 | 设置文本的尺寸。 |
-| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
>  **说明：**
> 如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
-| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 |
-| word-spacing
7+ | <length> \| <percentage> \| string | normal | 否 | 设置文本之间的间距，string可选值为：
normal：默认的字间距。 |
-| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 |
-| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。
>  **说明：**
> number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
-| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 |
-| text-decoration-color
7+ | <color> | - | 否 | 设置文本修饰线的颜色。 |
-| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
>  **说明：**
> 如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
-| line-height | <length> \| <percentage>
7+ \| string
7+ | 0px
1-6 normal
7+ | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：
normal
7+ ：默认的行高。 |
-| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
-| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
-| max-lines | number \| string
7+ | - | 否 | 设置文本的最大行数，string类型可选值为：
- auto
7+ ：文本行数自适应容器高度。 |
-| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
-| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
-| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
-| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px |
-| word-break
6+ | string | normal | 否 | 设置文本折行模式，可选值为：
- normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
- break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
- break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 |
-| text-indent
7+ | <length> | - | 否 | 设置首行缩进量。 |
-| white-space
7+ | string | pre | 否 | 设置处理元素中空白的模式，可选值为：
- normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
- nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
- pre：所有东西原样输出；
- pre-wrap：所有东西原样输出，文本换行；
- pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 |
-| adapt-height
7+ | boolean | false | 否 | 文本大小是否自适应容器高度。
>  **说明：**
> 设置字体大小自适应相关样式后生效。 |
-
->  **说明：**
-> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
->
-> - 文本换行：文本可以通过转义字符\r\n进行换行。
->
-> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
->
-> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
->
-> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
->
-> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| color | <color> | #e5000000 | 否 | 设置文本的颜色。 |
+| font-size | <length> | 30px | 否 | 设置文本的尺寸。 |
+| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
+| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 |
+| word-spacing
7+ | <length> \| <percentage> \| string | normal | 否 | 设置文本之间的间距，string可选值为：
normal：默认的字间距。 |
+| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 |
+| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。number取值必须为100的整数倍。
string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
+| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 |
+| text-decoration-color
7+ | <color> | - | 否 | 设置文本修饰线的颜色。 |
+| text-align | string | start
| 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
如果文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
+| line-height | <length> \| <percentage>
7+ \| string
7+ | 0px
1-6 normal
7+ | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：
normal
7+ ：默认的行高。 |
+| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
+| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
+| max-lines | number \| string
7+ | - | 否 | 设置文本的最大行数，string类型可选值为：
- auto
7+ ：文本行数自适应容器高度。 |
+| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
+| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
+| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
+| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px |
+| word-break
6+ | string | normal | 否 | 设置文本折行模式，可选值为：
- normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
- break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
- break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 |
+| text-indent
7+ | <length> | - | 否 | 设置首行缩进量。 |
+| white-space
7+ | string | pre | 否 | 设置处理元素中空白的模式，可选值为：
- normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
- nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
- pre：所有东西原样输出；
- pre-wrap：所有东西原样输出，文本换行；
- pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 |
+| adapt-height
7+ | boolean | false | 否 | 文本大小是否自适应容器高度。
设置字体大小自适应相关样式后生效。 |
+
+> **说明：**
+> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
+>
+> - 文本换行：文本可以通过转义字符\r\n进行换行。
+>
+> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
+>
+> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
+>
+> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
+>
+> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
## 事件
@@ -76,84 +76,66 @@
## 示例
-
-```
+1.
+```html
-
-
- Hello {{ title }}
-
-
+
default text
+
hello world with color
+
hello world with font-size
+
hello world with letter-spacing
+
hello world with word-spacing
+
hello world with italic
+
hello world with font-weight
+
hello world with underline
+
hello world with line-through
+
hello world with text-align:right
```
-```
+```css
/* xxx.css */
.container {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.content{
- width: 400px;
- height: 400px;
- border: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
.title {
- font-size: 80px;
- text-align: center;
- width: 400px;
- height: 400px;
+ text-align: center;
+ width: 800px;
+ height: 60px;
}
-```
-
-```
-// xxx.js
-export default {
- data: {
- title: 'World'
- }
+.textcolor {
+ color: indianred;
}
-```
-
-
-
-```
-
-
-
- This is a passage
-
-
- This is a passage
-
-
-```
-
-```
-/* xxx.css */
-.container {
- flex-direction: column;
- align-items: center;
- background-color: #F1F3F5;
- justify-content: center;
+.textsize {
+ font-size: 40px;
}
-.text1{
- word-spacing: 10px;
- adapt-height: true;
+.textletterspacing {
+ letter-spacing: -3px;
}
-.text2{
- width: 200px;
- max-lines: 1;
- text-overflow: ellipsis;
- text-valign: middle;
- line-height: 40px;
- text-decoration: underline;
- text-decoration-color: red;
- text-indent: 20px;
- white-space: pre;
+.textwordspacing {
+ word-spacing: 20px;
+}
+.textstyle {
+ font-style: italic;
+}
+.textweight {
+ font-weight: 700;
+}
+.textdecoration1 {
+ text-decoration: underline;
+}
+.textdecoration2 {
+ text-decoration: line-through;
+ text-decoration-color: red;
+}
+.textalign {
+ text-align: right;
}
```
-
+
+
+
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
index c2fb21c57dddff95a9ea352ed5af449da408b7b1..696ea732fd9a8e8db233f80fa881483249ebe64a 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
@@ -1,7 +1,7 @@
# list
->  **说明：**
-> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：**
+> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
@@ -19,86 +19,86 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| scrollpage | boolean | false | 否 | 设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。 |
-| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。
可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 |
-| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：
- off：不显示。
- auto：按需显示(触摸时显示，2s后消失)。
- on：常驻显示。 |
-| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：
- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
- no：滑动到边缘后无效果。 |
-| indexer | boolean \| Array<string> | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：
"indexer" : "true"表示使用默认字母索引表。
"indexer" : "false"表示无索引。
"indexer" : ['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。
>  **说明：**
> - indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
>
> - 点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 |
-| indexercircle
5+ | boolean | - | 否 | 是否为环形索引。
穿戴设备默认为true，其他为false。indexer为false时不生效。 |
-| indexermulti
5+ | boolean | false | 否 | 是否开启索引条多语言功能。
indexer为false时不生效。 |
-| indexerbubble
5+ | boolean | true | 否 | 是否开启索引切换的气泡提示。
indexer为false时不生效。 |
-| divider
5+ | boolean | false | 否 | item是否自带分隔线。
其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 |
-| shapemode | string | default | 否 | 侧边滑动栏的形状类型。
- default：不指定，跟随主题；
- rect：矩形；
- round：圆形。 |
-| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。
- false：新增删除item时无过渡动效。
- true：新增删除item时播放过程动效。 |
-| chainanimation
5+ | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动
- true：启用链式联动
>  **说明：**
> - 不支持动态修改。
> - 如同时配置了indexer，链式动效不生效。
> - 如配置了链式动效，list-item的sticky不生效。 |
-| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 |
-| initialoffset | <length> | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 |
-| selected
5+ | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- |
+| scrollpage | boolean | false | 否 | 设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。 |
+| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。
可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 |
+| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：
- off：不显示。
- auto：按需显示(触摸时显示，2s后消失)。
- on：常驻显示。 |
+| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：
- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
- no：滑动到边缘后无效果。 |
+| indexer | boolean \| Array<string> | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：
"indexer" : "true"表示使用默认字母索引表。
"indexer" : "false"表示无索引。
"indexer" : ['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。
indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 |
+| indexercircle
5+ | boolean | - | 否 | 是否为环形索引。
穿戴设备默认为true，其他为false。indexer为false时不生效。 |
+| indexermulti
5+ | boolean | false | 否 | 是否开启索引条多语言功能。
indexer为false时不生效。 |
+| indexerbubble
5+ | boolean | true | 否 | 是否开启索引切换的气泡提示。
indexer为false时不生效。 |
+| divider
5+ | boolean | false | 否 | item是否自带分隔线。
其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 |
+| shapemode | string | default | 否 | 侧边滑动栏的形状类型。
- default：不指定，跟随主题；
- rect：矩形；
- round：圆形。 |
+| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。
- false：新增删除item时无过渡动效。
- true：新增删除item时播放过程动效。 |
+| chainanimation
5+ | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动
- true：启用链式联动
不支持动态修改。
同时配置了indexer，链式动效不生效。
如配置了链式动效，list-item的sticky不生效。 |
+| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 |
+| initialoffset | <length> | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 |
+| selected
5+ | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
-| 名称 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| divider-color
5+ | <color> | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
-| divider-height
5+ | <length> | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
-| divider-length
5+ | <length> | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
-| divider-origin
5+ | <length> | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 |
-| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：
- column：主轴为纵向。
- row：主轴为横向。
其他组件默认值为row，在list组件中默认值为column。 |
-| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。
>  **说明：**
> 设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
-| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：
- stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。
>  **说明：**
> align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
-| item-extent | <length> \| <percentage> | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
-| fade-color | <color> | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
-| scrollbar-color
6+ | <color> | - | 否 | 设置滚动条的颜色。 |
-| scrollbar-width
6+ | <length> | - | 否 | 设置滚动条的宽度。 |
-| scrollbar-offset
6+ | <length> | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
+| divider-color
5+ | <color> | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
+| divider-height
5+ | <length> | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
+| divider-length
5+ | <length> | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
+| divider-origin
5+ | <length> | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 |
+| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：
- column：主轴为纵向。
- row：主轴为横向。
其他组件默认值为row，在list组件中默认值为column。 |
+| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。
设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
+| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：
- stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。
align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
+| item-extent | <length> \| <percentage> | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
+| fade-color | <color> | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
+| scrollbar-color
6+ | <color> | - | 否 | 设置滚动条的颜色。 |
+| scrollbar-width
6+ | <length> | - | 否 | 设置滚动条的宽度。 |
+| scrollbar-offset
6+ | <length> | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
-| indexerchange
5+ | { local: booleanValue } | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：
- true: 当前展示本地索引。
- false: 当前展示字母索引。 |
-| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | 列表滑动的偏移量和状态回调。
stateValue: 0表示列表滑动已经停止。
stateValue: 1表示列表正在用户触摸状态下滑动。
stateValue: 2表示列表正在用户松手状态下滑动。 |
-| scrollbottom | - | 当前列表已滑动到底部位置。 |
-| scrolltop | - | 当前列表已滑动到顶部位置。 |
-| scrollend | - | 列表滑动已经结束。 |
-| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 |
-| requestitem | - | 请求创建新的list-item。
长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 |
-| rotate
7+ | { rotateValue: number } | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
+| 名称 | 参数 | 描述 |
+| -------------------------- | ---------------------------------------- | ---------------------------------------- |
+| indexerchange
5+ | { local: booleanValue } | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：
- true: 当前展示本地索引。
- false: 当前展示字母索引。 |
+| scroll | { scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } | 列表滑动的偏移量和状态回调。
stateValue: 0表示列表滑动已经停止。
stateValue: 1表示列表正在用户触摸状态下滑动。
stateValue: 2表示列表正在用户松手状态下滑动。 |
+| scrollbottom | - | 当前列表已滑动到底部位置。 |
+| scrolltop | - | 当前列表已滑动到顶部位置。 |
+| scrollend | - | 列表滑动已经结束。 |
+| scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 |
+| requestitem | - | 请求创建新的list-item。
长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 |
+| rotate
7+ | { rotateValue: number } | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
## 方法
支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
-| scrollTo | { index: number(指定位置) } | list滑动到指定index的item位置。 |
-| scrollTop | { smooth: boolean } | smooth缺省为false，表示直接滚动到顶部。
smooth为true，表示平滑滚动到顶部。 |
-| scrollBottom | { smooth: boolean } | smooth缺省为false，表示直接滚动到底部。
smooth为true，表示平滑滚动到底部。 |
-| scrollPage | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示下一页，无完整页则滚动到底部。
reverse为true，表示上一页，无完整页则滚动到顶部。
smooth缺省值为false，表示直接滚动一页。
smooth为true，表示平滑滚动一页。 |
-| scrollArrow | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。
reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。
smooth缺省值为false，表示直接滚动。
smooth为true，表示平滑滚动。 |
-| collapseGroup | { groupid: string } | 收拢指定的group。
groupid：需要收拢的group的id。
当groupid未指定时收拢所有的group。 |
-| expandGroup | { groupid: string } | 展开指定的group。
groupid：需要展开的group的id。
当groupid未指定时展开所有的group。 |
-| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 |
+| 名称 | 参数 | 描述 |
+| ------------- | ---------------------------------------- | ---------------------------------------- |
+| scrollTo | { index: number(指定位置) } | list滑动到指定index的item位置。 |
+| scrollTop | { smooth: boolean } | smooth缺省为false，表示直接滚动到顶部。
smooth为true，表示平滑滚动到顶部。 |
+| scrollBottom | { smooth: boolean } | smooth缺省为false，表示直接滚动到底部。
smooth为true，表示平滑滚动到底部。 |
+| scrollPage | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示下一页，无完整页则滚动到底部。
reverse为true，表示上一页，无完整页则滚动到顶部。
smooth缺省值为false，表示直接滚动一页。
smooth为true，表示平滑滚动一页。 |
+| scrollArrow | { reverse: boolean, smooth: boolean } | reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。
reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。
smooth缺省值为false，表示直接滚动。
smooth为true，表示平滑滚动。 |
+| collapseGroup | { groupid: string } | 收拢指定的group。
groupid：需要收拢的group的id。
当groupid未指定时收拢所有的group。 |
+| expandGroup | { groupid: string } | 展开指定的group。
groupid：需要展开的group的id。
当groupid未指定时展开所有的group。 |
+| currentOffset | - | 返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表 currentOffset返回对象属性说明。 |
**表1** currentOffset返回对象属性说明
-| 名称 | 类型 | 备注 |
-| -------- | -------- | -------- |
-| x | number | 当前x轴滑动偏移量，单位为px。 |
-| y | number | 当前y轴滑动偏移量，单位为px。 |
+| 名称 | 类型 | 备注 |
+| ---- | ------ | ---------------- |
+| x | number | 当前x轴滑动偏移量，单位为px。 |
+| y | number | 当前y轴滑动偏移量，单位为px。 |
## 示例
-```
+```html
@@ -111,23 +111,7 @@
```
-
-```
-// index.js
-export default {
- data: {
- todolist: [{
- title: '刷题',
- date: '2021-12-31 10:00:00',
- }, {
- title: '看电影',
- date: '2021-12-31 20:00:00',
- }],
- },
-}
-```
-
-```
+```css
/* index.css */
.container {
display: flex;
@@ -152,4 +136,21 @@ export default {
}
```
+```js
+// index.js
+export default {
+ data: {
+ todolist: [{
+ title: '刷题',
+ date: '2021-12-31 10:00:00'
+ }, {
+ title: '看电影',
+ date: '2021-12-31 20:00:00'
+ }],
+ },
+}
+```
+
+
+
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
index c429f43f6206e954d0ce718eabbaac90f05c119f..2e9d58638dcbc075fcec859de6cfc0fa72ac3d0b 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
@@ -1,9 +1,9 @@
# popup
->  **说明：**
+> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。
+气泡指示。给控件绑定气泡弹窗，并在点击控件或者调用气泡弹窗显示方法后弹出相应的气泡提示来引导用户进行操作。
## 权限列表
@@ -21,13 +21,13 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
-| target | string | - | 是 | 目标元素的id属性值，不支持动态切换。 |
-| placement | string | bottom | 否 | 弹出窗口位置。可选值为：
- left：位于目标元素左边；
- right：位于目标元素右边；
- top：位于目标元素上边；
- bottom：位于目标元素下边；
- topLeft：位于目标元素左上角；
- topRight：位于目标元素右上角；
- bottomLeft：位于目标元素左下角；
- bottomRight：位于目标元素右下角。 |
+| target | string | - | 是 | popup绑定目标元素的id属性值，不支持动态切换。 |
+| placement | string | bottom | 否 | popup相对于目标元素的位置。可选值为：
- left：位于目标元素左边；
- right：位于目标元素右边；
- top：位于目标元素上边；
- bottom：位于目标元素下边；
- topLeft：位于目标元素左上角；
- topRight：位于目标元素右上角；
- bottomLeft：位于目标元素左下角；
- bottomRight：位于目标元素右下角。 |
| keepalive
5+ | boolean | false | 否 | 设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。 |
-| clickable
5+ | boolean | true | 否 | popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。 |
+| clickable
5+ | boolean | true | 否 | popup是否支持点击目标元素弹窗，当设置为false时，只支持方法调用显示弹窗。 |
| arrowoffset
5+ | <length> | 0 | 否 | popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。 |
->  **说明：**
+> **说明：**
>
> - 不支持focusable属性。
@@ -40,7 +40,7 @@
| -------- | -------- | -------- | -------- | -------- |
| mask-color | <color> | - | 否 | 遮罩层的颜色，默认值为全透明。 |
->  **说明：**
+> **说明：**
>
> - 不支持position相关样式。
@@ -61,9 +61,9 @@
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| show
5+ | - | 弹出气泡提示。 |
-| hide
5+ | - | 取消气泡提示。 |
+| hide
5+ | - | 隐藏气泡提示。 |
->  **说明：**
+> **说明：**
> 1. popup气泡弹窗属性、样式均不支持动态更新。
>
> 2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。
@@ -75,7 +75,7 @@
## 示例
-```
+```html
Click to show the pop-up
@@ -88,7 +88,7 @@
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -108,14 +108,14 @@
}
```
-```
+```js
// xxx.js
import prompt from '@system.prompt'
export default {
visibilitychange(e) {
prompt.showToast({
message: 'visibility change visibility: ' + e.visibility,
- duration: 3000,
+ duration: 3000
});
},
showpopup() {
@@ -123,7 +123,7 @@ export default {
},
hidepopup() {
this.$element("popup").hide();
- },
+ }
}
```
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md
index c931d65811fbc3a27795028578e32a57849ac370..08011bdf1d4bb1e15445410a74a3b90a1f664f18 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md
@@ -1,6 +1,6 @@
# refresh
->  **说明：**
+> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
下拉刷新容器。
@@ -22,9 +22,9 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| offset | <length> | - | 否 | 刷新组件静止时距离父组件顶部的距离。 |
-| refreshing | boolean | false | 否 | 用于标识刷新组件当前是否正在刷新。 |
+| refreshing | boolean | false | 否 | 标识刷新组件当前是否正在刷新。 |
| type | string | auto | 否 | 设置组件刷新时的动效。两个可选值，不支持动态修改。
- auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。
- pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。 |
-| lasttime | boolean | false | 否 | 是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 |
+| lasttime | boolean | false | 否 | 设置是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 |
| timeoffset
6+ | <length> | - | 否 | 设置更新时间距离父组件顶部的距离。 |
| friction | number | 42 | 否 | 下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。 |
@@ -35,8 +35,8 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
-| background-color | <color> | white
| 否 | 用于设置刷新组件的背景颜色。 |
-| progress-color | <color> | black
| 否 | 用于设置刷新组件的loading颜色。 |
+| background-color | <color> | white
| 否 | 设置刷新组件的背景颜色。 |
+| progress-color | <color> | black
| 否 | 设置刷新组件的loading图标颜色。 |
## 事件
@@ -56,7 +56,7 @@
## 示例
-```
+```html
@@ -71,7 +71,7 @@
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -104,7 +104,7 @@
}
```
-```
+```js
// xxx.js
import prompt from '@system.prompt';
export default {
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
index 9481ba0c25f4bee0a81454b6217f29c23a2f4905..75c4249b57fe899efe5110456a38cf8948f5dff1 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
@@ -1,7 +1,7 @@
# stepper
->  **说明：**
-> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：**
+> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
@@ -15,141 +15,177 @@
仅支持<stepper-item>子组件。
->  **说明：**
-> 步骤导航器内的步骤顺序按照子组件<stepper-item>的顺序进行排序。
+> **说明：**
+> 步骤导航器内的步骤顺序按照子组件<stepper-item>的顺序进行排序。
## 属性
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
-| 名称 | 类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| index | number | - | 设置步骤导航器步骤显示第几个stepper-item子组件。 |
+| 名称 | 类型 | 默认值 | 描述 |
+| ----- | ------ | ---- | ------------------------------ |
+| index | number | 0 | 设置步骤导航器步骤显示第几个stepper-item子组件，默认显示第一个stepper-item。 |
## 样式
支持[通用样式](../arkui-js/js-components-common-styles.md)。
->  **说明：**
-> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
+> **说明：**
+> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
-| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 |
-| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。 |
-| change | { prevIndex：prevIndex, index: index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
-| next | { index：index, pendingIndex: pendingIndex } | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
-| back | { index：index, pendingIndex: pendingIndex } | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
+| 名称 | 参数 | 描述 |
+| ------ | ---------------------------------------- | ---------------------------------------- |
+| finish | 无 | 当步骤导航器最后一个步骤完成时,触发该事件。 |
+| skip | 无 | 当前步骤导航器下一步按钮状态为skip，即可跳过时，点击右侧跳过按钮触发该事件。 |
+| change | { prevIndex：prevIndex, index: index} | 当用户点击步骤导航器的左边或者右边按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
+| next | { index：index, pendingIndex: pendingIndex } | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
+| back | { index：index, pendingIndex: pendingIndex } | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，支持如下方法：
-| 名称 | 参数 | 描述 |
-| -------- | -------- | -------- |
-| setNextButtonStatus | { status: string, label: label } | 设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：
1. normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
2. disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
3. waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
4. skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
+| 名称 | 参数 | 描述 |
+| ------------------- | ---------------------------------------- | ---------------------------------------- |
+| setNextButtonStatus | { status: string, label: label } | 设置当前步骤中下一步按钮的文本与状态，参数中label为指定按钮文本，status指定按钮状态，status可选值为：
- normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
- disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
- waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
- skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
## 示例
-```
+```html
-
-
-
-
- First screen
-
-
-
-
- Second screen
-
-
-
-
- Third screen
-
-
-
+
+
+
+
+ Page One
+
+
+
+
+ Page Two
+
+
+
+
+ Page Three
+
+
+
```
-```
+```css
/* xxx.css */
.container {
- margin-top: 20px;
- flex-direction: column;
- align-items: center;
- height: 300px;
+ flex-direction: column;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+ background-color: #f7f7f7;
+}
+.stepper{
+ width: 100%;
+ height: 100%;
+}
+.stepper-item {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
}
-.stepperItem {
- width: 100%;
- flex-direction: column;
- align-items: center;
+.item{
+ width: 90%;
+ height: 86%;
+ margin-top: 80px;
+ background-color: white;
+ border-radius: 60px;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 160px;
}
-.stepperItemContent {
- color: #0000ff;
- font-size: 50px;
- justify-content: center;
+text {
+ font-size: 78px;
+ color: #182431;
+ opacity: 0.4;
}
.button {
- width: 60%;
- margin-top: 30px;
- justify-content: center;
+ width: 40%;
+ margin-top: 100px;
+ justify-content: center;
}
```
-```
+```js
// xxx.js
+import prompt from '@system.prompt';
+
export default {
- data: {
- label_1:
- {
- prevLabel: 'BACK',
- nextLabel: 'NEXT',
- status: 'normal'
- },
- label_2:
- {
- prevLabel: 'BACK',
- nextLabel: 'NEXT',
- status: 'normal'
- },
- label_3:
- {
- prevLabel: 'BACK',
- nextLabel: 'NEXT',
- status: 'normal'
- },
- },
- setRightButton(e) {
- this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
- },
- nextclick(e) {
- var index = {
- pendingIndex: e.pendingIndex
- }
- return index;
- },
- backclick(e) {
- var index = {
- pendingIndex: e.pendingIndex
+ data: {
+ label_1:
+ {
+ prevLabel: 'BACK',
+ nextLabel: 'NEXT',
+ status: 'normal'
+ },
+ label_2:
+ {
+ prevLabel: 'BACK',
+ nextLabel: 'NEXT',
+ status: 'normal'
+ },
+ label_3:
+ {
+ prevLabel: 'BACK',
+ nextLabel: 'NEXT',
+ status: 'normal'
+ }
+ },
+ setRightButton(e) {
+ this.$element('mystepper').setNextButtonStatus({
+ status: 'waiting', label: 'SKIP'
+ });
+ },
+ nextclick(e) {
+ var index = {
+ pendingIndex: e.pendingIndex
+ }
+ return index;
+ },
+ backclick(e) {
+ var index = {
+ pendingIndex: e.pendingIndex
+ }
+ return index;
+ },
+ statuschange(e) {
+ prompt.showToast({
+ message: '上一步序号' + e.prevIndex + '当前序号' + e.index
+ })
+ },
+ finish() {
+ prompt.showToast({
+ message: '最后一步已完成'
+ })
+ },
+ skip() {
+ prompt.showToast({
+ message: 'skip触发'
+ })
}
- return index;
- },
}
```
-
+