!16438 校准 arkui js lite 组件文档

Merge pull request !16438 from piggyguy_jdx/lite-doc-check

zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md

@@ -13,6 +13,7 @@
     - [通用属性](js-common-attributes.md)
     - [通用样式](js-common-styles.md)
     - [动画样式](js-components-common-animation.md)
+    - [媒体查询](js-components-common-mediaquery.md)
 - 容器组件
     - [div](js-components-container-div.md)
     - [list](js-components-container-list.md)

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md

 # chart
 
-
 图表组件，用于呈现线形图、柱状图界面。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md

 # image-animator
 
-
 图片帧动画播放器。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md

 # image
 
-
 图片组件，用来渲染展示图片。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -46,3 +49,26 @@
 | opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
 | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
+
+## 示例
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <image src="common/images/hw_right.png" style="width: 300px; height: 300px; border-color: red; border-width: 2px;">
+  </image>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+```
+
+![image](figures/image.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md

 # input
 
-
 交互式组件，包括单选框，多选框，按钮。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -60,3 +63,119 @@
 | background-color | <color> | - | 否 | 设置背景颜色。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
 | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
+
+## 示例
+
+1. type为button
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="div-button">
+     <input class="button" type="button" value="Input-Button"></input>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .div-button {
+     flex-direction: column;
+     align-items: center;
+     width: 100%;
+     height: 100%;
+   }
+   .button {
+     margin-top: 30px;
+     width: 280px;
+   }
+   ```
+
+   ![input-type-button](figures/input-type-button.png)
+
+   
+
+2. type为checkbox
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="content">
+     <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
+     <text class="text">{{text}}</text>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .content{
+     width: 100%;
+     height: 100%;
+     flex-direction: column;
+     align-items: center; 
+     justify-content: center;   
+   }
+   .text{
+     font-size: 30px;
+     text-align: center;
+     width: 200px;
+     margin-top: 20px;
+     height: 100px;
+   }
+   ```
+
+   ```javascript
+   // xxx.js
+   export default {
+     data: {
+       text: "text"
+     },
+     checkboxOnChange(e) {
+       this.text = e.checked;
+     }
+   }
+   ```
+
+   ![input-type-checkbox](figures/input-type-checkbox.gif)
+
+3. type为radio
+
+   ```html
+   <!-- xxx.hml -->
+   <div class="container">
+     <div class="item">
+       <input type="radio" checked="true" name="radioSample" value="radio1" onchange="onRadioChange"></input>
+       <text class="text">radio1</text>
+     </div>
+     <div class="item">
+       <input type="radio" checked="false" name="radioSample" value="radio2" onchange="onRadioChange"></input>
+       <text class="text">radio2</text>
+     </div>
+     <div class="item">
+       <input type="radio" checked="false" name="radioSample" value="radio3" onchange="onRadioChange"></input>
+       <text class="text">radio3</text>
+     </div>
+   </div>
+   ```
+
+   ```css
+   /* xxx.css */
+   .container {
+     width: 100%;
+     height: 100%;
+     justify-content: center;
+     align-items: center;
+     flex-direction: column;
+   }
+   .item {
+     width: 50%;
+     height: 30%;
+     justify-content: center;
+   }
+   .text {
+     margin-top: 25%;
+     font-size: 30px;
+     text-align: center;
+     width: 200px;
+     height: 100px;
+   }
+   ```
+
+   ![input-type-radio](figures/input-type-radio.gif)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md

 # marquee
 
-
 跑马灯组件，用于展示一段单行滚动的文字。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -49,3 +52,67 @@
 | opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
 | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
+
+## 示例
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <marquee class="customMarquee" scrollamount="{{scrollAmount}}">{{marqueeCustomData}}</marquee>
+  <text class="text" onclick="addSpeed">speed+</text>
+  <text class="text" onclick="downSpeed">speed-</text>
+  <text class="text" onclick="changeData">changeData</text>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+.customMarquee {
+  width: 50%;
+  height: 80px;
+  padding: 10px;
+  margin: 20px;
+  border-width: 4px;
+  border-color: #ffffff;
+  border-radius: 20px;
+  font-size: 38px;
+}
+.text {
+  font-size: 30px;
+  text-align: center;
+  width: 30%;
+  height: 10%;
+  margin-top: 5%;
+  background-color: #f2f2f2;
+  border-radius: 40px;
+  color: #0d81f2;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    scrollAmount: 30,
+    marqueeCustomData: 'Custom marquee Custom marquee Custom marquee'
+  },
+  addSpeed() {
+    this.scrollAmount++;
+  },
+  downSpeed() {
+    this.scrollAmount--;
+  },
+  changeData() {
+    this.marqueeCustomData = 'Change Data Change Data Change Data';
+  }
+}
+```
+
+![marquee](figures/marquee.gif)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md

@@ -2,6 +2,10 @@
 
 嵌入页面的滑动选择器。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -138,4 +142,4 @@ export default {
 }
 ```
 
-![sssssss](figures/sssssss.PNG)
+![picker-view](figures/picker-view.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md

 # progress
 
-
 进度条，用于显示内容加载或操作处理进度。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -78,3 +81,45 @@
 | border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
 | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
+
+## 示例
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <progress type="horizontal" percent="{{horizontalVal}}" style="height: 10%;width: 40%;" onclick = "changeHorizontal"></progress>
+  <progress type="arc" class="min-progress" percent="{{arcVal}}" on:click="changeArc"></progress>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+.min-progress {
+  width: 300px;
+  height: 300px;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    arcVal: 0,
+    horizontalVal: 0
+  },
+  changeArc() {
+    this.arcVal+= 10;
+  },
+  changeHorizontal() {
+    this.horizontalVal+= 10;
+  }
+}
+```
+
+![progress](figures/progress.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md

@@ -3,10 +3,9 @@
 
 生成并显示二维码。
 
-
 > **说明：**
 >
-> 本组件从从API version 5 开始支持。
+> 该组件从从API version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 子组件
@@ -61,6 +60,66 @@
 ## 示例
 
 
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <qrcode value="{{qr_value}}" class="qrCode" style="color: {{qr_color}};background-color: {{qr_bcol}};"></qrcode>
+  <input type="button" onclick="changeColor" class="button">Color</input>
+  <input type="button" onclick="changeBackgroundColor" class="button">BackgroundColor</input>
+  <input type="button" onclick="changeColor" class="button">Value</input>
+</div>
 ```
-<qrcode value="https://huawei.com"></qrcode>
+
+```css
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.qrCode {
+  width: 200px;
+  height: 200px;
+}
+.button {
+  width: 30%;
+  height: 10%;
+  margin-top: 5%;
+}
 ```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    qr_col: '#87ceeb',
+    qr_bcol: '#f0ffff',
+    qr_value: 'value'
+  },
+  changeColor() {
+    if (this.qr_col == '#87ceeb') {
+      this.qr_col = '#fa8072';
+    } else {
+      this.qr_col = '#87ceeb';
+    }
+  },
+  changeBackgroundColor() {
+    if (this.qr_bcol == '#f0ffff') {
+      this.qr_bcol = '#ffffe0';
+    } else {
+      this.qr_bcol = '#f0ffff';
+    }
+  },
+  changeValue() {
+    if (this.qr_value == 'value') {
+      this.qr_value = 'change';
+    } else {
+      this.qr_value = 'value';
+    }
+  }
+}
+```
+
+![qrcode](figures/qrcode.gif)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md

 # slider
 
-
 滑动条组件，用来快速调节设置值，如音量、亮度等。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -57,3 +60,43 @@
 | background-color | <color> | - | 否 | 设置背景颜色。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
 | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
+
+## 示例
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <text>slider start value is {{startValue}}</text>
+  <text>slider current value is {{currentValue}}</text>
+  <text>slider end value is {{endValue}}</text>
+  <slider min="0" max="100" value="{{value}}" onchange="setvalue" style="width: 20%;height: 10%"></slider>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+    value: 0,
+    startValue: 0,
+    currentValue: 0,
+    endValue: 100,
+  },
+  setvalue(e) {
+    this.currentValue = e.value;
+  }
+}
+```
+
+![slider](figures/slider.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md

 # switch
 
-
 开关选择器，通过开关，开启或关闭某个功能。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -46,3 +49,51 @@
 | background-color | <color> | - | 否 | 设置背景颜色。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
 | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
+
+## 示例
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <div class="box">
+    <switch checked="true" @change="switchChange"></switch>
+    <text>{{title}}</text>
+  </div>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.box{
+  width: 18%;
+  height: 25%;
+  flex-direction:column;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+  data: {
+      title: '开启'
+  },
+  switchChange(e){
+      console.log(e.checked);
+      if(e.checked){
+          this.title="开启"
+      }else{
+          this.title="关闭"
+      }
+  }
+}
+```
+
+![switch](figures/switch.gif)
\ No newline at end of file

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

 # text
 
-
 文本，用于呈现一段信息。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -51,3 +54,45 @@
 | opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
 | [left\|top] | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>-&nbsp;left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>-&nbsp;top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
+
+## 示例
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+    <text class="title">
+        Hello {{ title }}
+    </text>
+</div>
+```
+
+```CSS
+/* xxx.css */
+.container {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.title {
+    width: 100px;
+    font-size: 30px;
+    text-align: center;
+    color: red;
+}
+```
+
+```javascript
+// xxx.js
+export default {
+    data: {
+        title: ""
+    },
+    onInit() {
+        this.title = "World";
+    }
+}
+```
+
+![text](figures/text.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md

 # canvas组件
 
-
 提供画布组件。用于自定义绘制图形。
 
+> **说明：**
+>
+> 该组件从从API version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 

zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md

@@ -5,7 +5,7 @@
 
 **示例：**
 
-```
+```html
 <!-- xxx.hml -->
 <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
 <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
@@ -13,7 +13,7 @@
 ```
 
 
-```
+```javascript
 // xxx.js
 export default {
   handleClick() {
@@ -47,7 +47,7 @@ export default {
  ![zh-cn_image_0000001431388525](figures/zh-cn_image_0000001431388525.png)
 
 
-  ```
+  ```javascript
   ctx.fillRect(20, 20, 200, 150);
   ```
 
@@ -67,7 +67,7 @@ export default {
   ![zh-cn_image_0000001431388505](figures/zh-cn_image_0000001431388505.png)
 
 
-  ```
+  ```javascript
   ctx.fillStyle = '#0000ff';
   ctx.fillRect(20, 20, 150, 100);
   ```
@@ -91,7 +91,7 @@ export default {
   ![zh-cn_image_0000001381268264](figures/zh-cn_image_0000001381268264.png)
 
 
-  ```
+  ```javascript
   ctx.strokeRect(30, 30, 200, 150);
   ```
 
@@ -113,7 +113,7 @@ export default {
   ![zh-cn_image_0000001431548109](figures/zh-cn_image_0000001431548109.png)
 
 
-  ```
+  ```javascript
   ctx.font = '35px sans-serif';
   ctx.fillText("Hello World!", 20, 60);
   ```
@@ -134,7 +134,7 @@ export default {
   ![zh-cn_image_0000001431548121](figures/zh-cn_image_0000001431548121.png)
 
 
-  ```
+  ```javascript
   ctx.lineWidth = 5;
   ctx.strokeRect(25, 25, 85, 105);
   ```
@@ -155,7 +155,7 @@ export default {
   ![zh-cn_image_0000001380789172](figures/zh-cn_image_0000001380789172.png)
 
 
-  ```
+  ```javascript
   ctx.lineWidth = 10;
   ctx.strokeStyle = '#0000ff';
   ctx.strokeRect(25, 25, 155, 105);
@@ -170,7 +170,7 @@ export default {
 
 ![zh-cn_image_0000001431388513](figures/zh-cn_image_0000001431388513.png)
 
-  ```
+  ```javascript
   ctx.moveTo(25, 25);
   ctx.lineTo(25, 105);
   ctx.strokeStyle = 'rgb(0,0,255)';
@@ -187,7 +187,7 @@ export default {
   ![zh-cn_image_0000001431548125](figures/zh-cn_image_0000001431548125.png)
 
 
-  ```
+  ```javascript
   ctx.beginPath();              
   ctx.lineWidth = '6';
   ctx.strokeStyle = '#0000ff';
@@ -212,7 +212,7 @@ export default {
 
   ![zh-cn_image_0000001431388529](figures/zh-cn_image_0000001431388529.png)
 
-  ```
+  ```javascript
   ctx.beginPath();
   ctx.moveTo(10, 10);
   ctx.lineTo(280, 160);
@@ -235,7 +235,7 @@ export default {
 
 ![zh-cn_image_0000001431148365](figures/zh-cn_image_0000001431148365.png)
 
-  ```
+  ```javascript
   ctx.beginPath();
   ctx.moveTo(10, 10);
   ctx.lineTo(280, 160);
@@ -252,7 +252,7 @@ export default {
   ![zh-cn_image_0000001381268284](figures/zh-cn_image_0000001381268284.png)
 
 
-  ```
+  ```javascript
   ctx.beginPath();
   ctx.moveTo(30, 30);
   ctx.lineTo(110, 30);
@@ -277,7 +277,7 @@ export default {
   ![zh-cn_image_0000001381108328](figures/zh-cn_image_0000001381108328.png)
 
 
-  ```
+  ```javascript
   ctx.font = '30px sans-serif';
   ctx.fillText("Hello World", 20, 60);
   ```
@@ -298,7 +298,7 @@ export default {
   ![zh-cn_image_0000001431388517](figures/zh-cn_image_0000001431388517.png)
 
 
-  ```
+  ```javascript
   ctx.strokeStyle = '#0000ff';
   ctx.moveTo(140, 10);
   ctx.lineTo(140, 160);
@@ -335,7 +335,7 @@ export default {
 
 ![zh-cn_image_0000001381108320](figures/zh-cn_image_0000001381108320.png)
 
-  ```
+  ```javascript
   ctx.beginPath();
   ctx.arc(100, 75, 50, 0, 6.28);
   ctx.stroke();
@@ -359,7 +359,7 @@ export default {
 
 ![zh-cn_image_0000001381108312](figures/zh-cn_image_0000001381108312.png)
 
-  ```
+  ```javascript
   ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
   ctx.stroke(); // Draw it
   ```

zh-cn/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md

+# 媒体查询
+
+>  **说明：**
+>
+>  - 从API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+>
+>  - media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。
+
+
+媒体查询（Media Query）应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。使用媒体查询针对设备和应用的属性信息，可以设计出相匹配的布局样式。
+
+
+## CSS语法规则
+
+使用@media来引入查询语句，具体规则如下：
+
+```
+@media [media-type] [and|or] [(media-feature)] {
+  CSS-Code;
+}
+```
+
+@media screen and (round-screen: true) { … } ： 当设备屏幕是圆形时条件成立
+
+@media (max-height: 454) { … } ：范围查询，CSS level 3 写法
+
+>  **说明：**
+>
+>  - 不支持<=，>=，<，>操作符;
+>  - api 9开始才支持多重 () 嵌套使用；
+>  - media语句整体长度不能超过 512 个字符；
+>  - 单个media条件长度不能超过32个字符；
+
+
+## 媒体类型
+
+| 类型     | 说明             |
+| ------ | -------------- |
+| screen | 按屏幕相关参数进行媒体查询。 |
+
+
+## 媒体逻辑操作
+
+媒体逻辑操作符：and、or<sup>9+</sup>用于构成媒体查询语句，详细解释说明如下表。
+
+**表1** 媒体逻辑操作符
+
+| 类型            | 说明                                                         |
+| --------------- | ------------------------------------------------------------ |
+| and             | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;liteWearable)&nbsp;and&nbsp;(max-height:&nbsp;454)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于454个像素单位时成立。 |
+| or<sup>9+</sup> | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;454) &nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于454个像素单位或者设备屏幕是圆形时，条件成立。 |
+
+
+
+
+## 媒体特征
+
+| 类型             | 说明                                                         |
+| ---------------- | ------------------------------------------------------------ |
+| height           | 应用页面显示区域的高度。                                     |
+| min-height       | 应用页面显示区域的最小高度。                                 |
+| max-height       | 应用页面显示区域的最大高度。                                 |
+| width            | 应用页面显示区域的宽度。                                     |
+| min-width        | 应用页面显示区域的最小宽度。                                 |
+| max-width        | 应用页面显示区域的最大宽度。                                 |
+| aspect-ratio     | 应用页面显示区域的宽度与高度的比值。<br/>例如：aspect-ratio: 1/2 |
+| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。                     |
+| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。                     |
+| round-screen     | 屏幕类型，圆形屏幕为 true，&nbsp;非圆形屏幕为&nbsp;false。   |
+
+
+## 通用媒体特征示例代码
+
+多个.container中的所写的属性个数以及类型需要相同，若不相同会导致显示异常。
+
+```html
+<!-- xxx.hml -->
+<div>
+  <div class="container">
+    <text class="title">Hello World</text>
+  </div>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  width: 300px;
+  height: 600px;
+  background-color: #008000;
+}
+.title {
+    font-size: 30px;
+    text-align: center;
+}
+@media (device-type: samrtVision) {
+  .container {
+    width: 500px;
+    height: 500px;
+    background-color: #fa8072;
+  }
+} 
+@media (device-type: liteWearable) {
+  .container {
+    width: 300px;
+    height: 300px;
+    background-color: #008b8b;
+  }
+} 
+```

zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md

 # div
 
-
 基础容器，用作页面结构的根节点或将内容进行分组。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -55,7 +58,7 @@
 
 1. Flex样式
   
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="container">
      <div class="flex-box">
@@ -67,7 +70,7 @@
    ```
 
    
-   ```
+   ```css
    /* xxx.css */
    .container {
      flex-direction: column;
@@ -103,7 +106,7 @@
 
 2. Flex Wrap样式
   
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="container">
      <div class="flex-box">
@@ -115,7 +118,7 @@
    ```
 
    
-   ```
+   ```css
    /* xxx.css */
    .container {
      flex-direction: column;

zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md

 # list-item
 
-
 <[list](js-components-container-list.md)>的子组件，用来展示列表具体item。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -42,3 +45,9 @@
 | background-color | <color> | - | 否 | 设置背景颜色。 |
 | opacity<sup>5+</sup> | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
 | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。 |
+
+
+
+## 示例
+
+参考 [list示例](js-components-container-list.md)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md

 # list
 
-
 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 
@@ -27,6 +30,8 @@
 | click | - | 点击动作触发该事件。 |
 | longpress | - | 长按动作触发该事件。 |
 | swipe<sup>5+</sup> | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 |
+| scrolltop<sup>8+</sup> | - | 当前列表已滑动到顶部位置。 |
+| scrollbottom<sup>8+</sup> | - | 当前列表已滑动到底部位置。 |
 
 
 ## 样式
@@ -115,4 +120,4 @@ export default {
 }
 ```
 
-![zh-cn_image_0000001380789196](figures/zh-cn_image_0000001380789196.png)
+![list](figures/list.png)

zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md

 # stack
 
-
 堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件
 

zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md

 # swiper
 
-
 滑动容器，提供切换子组件显示的能力。
 
+> **说明：**
+>
+> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 子组件