diff --git a/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md index 97ab611a3ea96ba21772559e381dd225b2e8020c..9d94f7dd8f4595b8e23ddbeb69e6dc0f58d6a131 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/Readme-CN.md +++ b/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) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/image.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/image.png new file mode 100644 index 0000000000000000000000000000000000000000..79db22cd94523a8854562e4c8b45ee22d8b45e90 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/image.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-button.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-button.png new file mode 100644 index 0000000000000000000000000000000000000000..247fed609d862aa73184f3428486ab62e82bf897 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-button.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif new file mode 100644 index 0000000000000000000000000000000000000000..2215e5cfa56f533c6b4d1318b2fa1fb07093dfaa Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-checkbox.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif new file mode 100644 index 0000000000000000000000000000000000000000..bd5fea51c64deb1268793f3a3f70a2c379aebfda Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/input-type-radio.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/list.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/list.png new file mode 100644 index 0000000000000000000000000000000000000000..eea4ba1ba4f92ab65a41990b830e7b1c72d99f09 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/list.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/marquee.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/marquee.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b6df4b26274fdf5c3e6e1fab2423400455b7050 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/marquee.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/picker-view.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/picker-view.png new file mode 100644 index 0000000000000000000000000000000000000000..3e5375876c6c7403b254df56c75d08031ad9801d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/picker-view.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/progress.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/progress.png index 7edb3bedb97ee4b203cd35a6ef6642740f410846..fb9170121d950b8d8b5a4a5a209c25b452791d25 100644 Binary files a/zh-cn/application-dev/reference/arkui-js-lite/figures/progress.png and b/zh-cn/application-dev/reference/arkui-js-lite/figures/progress.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/qrcode.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/qrcode.gif new file mode 100644 index 0000000000000000000000000000000000000000..53e718c2879554c82d4a3d9800507a00e37613dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/qrcode.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/slider.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/slider.png index d0167fe6773371fa70d8bf32c3a3953ed1e1455b..b72ed8404c613ec9283d7be1f56071d70fcbbc1f 100644 Binary files a/zh-cn/application-dev/reference/arkui-js-lite/figures/slider.png and b/zh-cn/application-dev/reference/arkui-js-lite/figures/slider.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/switch.gif b/zh-cn/application-dev/reference/arkui-js-lite/figures/switch.gif new file mode 100644 index 0000000000000000000000000000000000000000..102295bc63e3d373d45e74c23dcddc4f5532e9fb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/switch.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/figures/text.png b/zh-cn/application-dev/reference/arkui-js-lite/figures/text.png new file mode 100644 index 0000000000000000000000000000000000000000..d3a79bc7ae959d16d1eb4b915fa9040f00996b16 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js-lite/figures/text.png differ diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md index 20bed6b363ea29e67f3229d0890ef2188f0417ed..71730347c3280ff915655e5d916c4c97fa5e3693 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-chart.md @@ -1,8 +1,11 @@ # chart - 图表组件，用于呈现线形图、柱状图界面。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md index 4ec840daf2d2d4ecb42929108bba84eccb4edddc..9c85c0e3808241dda5faad0aa459c627d5ed069b 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image-animator.md @@ -1,8 +1,11 @@ # image-animator - 图片帧动画播放器。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md index a44510bb870601a8110e6f0f861b2ccd4513ce7f..838db18b496f1fd144bc2cebddb70dfc2e84e516 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-image.md @@ -1,8 +1,11 @@ # image - 图片组件，用来渲染展示图片。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -46,3 +49,26 @@ | opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | | [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +```html + +
+ + +
+``` + +```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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md index 8a8a9cd2b5a68b295fb997761fd171b834606623..facd4e72415f5c740b879c02698c0f4e5823e620 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-input.md @@ -1,8 +1,11 @@ # input - 交互式组件，包括单选框，多选框，按钮。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -60,3 +63,119 @@ | background-color | <color> | - | 否 | 设置背景颜色。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | | [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +1. type为button + + ```html + +
+ +
+ ``` + + ```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 + +
+ + {{text}} +
+ ``` + + ```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 + +
+
+ + radio1 +
+
+ + radio2 +
+
+ + radio3 +
+
+ ``` + + ```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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md index a0c7f6b90114b6da59fa6a61394933cfaf9d9d2d..e146eb244ac7c796efca5773842feaf1607502ee 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-marquee.md @@ -1,8 +1,11 @@ # marquee - 跑马灯组件，用于展示一段单行滚动的文字。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -49,3 +52,67 @@ | opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | | [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +```html + +
+ {{marqueeCustomData}} + speed+ + speed- + changeData +
+``` + +```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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md index ba53345a62e8f6c0a0f7bf205793026838040dc0..3722716aae1e0d42bf1638e0efc50d475430ee13 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-picker-view.md +++ b/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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md index 3b9006219ce2622b38f89bb1663d9eedde661232..afbbb9010be0c457ac3419da1c5f30aae9fa8388 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-progress.md @@ -1,8 +1,11 @@ # progress - 进度条，用于显示内容加载或操作处理进度。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -78,3 +81,45 @@ | border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | | [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +```html + +
+ + +
+``` + +```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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md index 4c1ce42fe498c6606926ee986e3958297ce4963c..c454322301d03fe4ae53bb7d3c83aa3b733cf239 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-qrcode.md +++ b/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 + +
+ + Color + BackgroundColor + Value +
``` - + +```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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md index 1357ac470166f59764a6e423e8803fe3e1880224..a686e9cf6202041c883ce347c9feaf34af329572 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-slider.md @@ -1,8 +1,11 @@ # slider - 滑动条组件，用来快速调节设置值，如音量、亮度等。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -57,3 +60,43 @@ | background-color | <color> | - | 否 | 设置背景颜色。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | | [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +```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; + 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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md index bfd28ff1fca70f6f7b1049ac4d383e95ef9b3f42..2f09e3c14322014dda6b1e1afd922d4b94dead9a 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-switch.md @@ -1,8 +1,11 @@ # switch - 开关选择器，通过开关，开启或关闭某个功能。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -46,3 +49,51 @@ | background-color | <color> | - | 否 | 设置背景颜色。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | | [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +```html + +
+
+ + {{title}} +
+
+``` + +```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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-text.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-text.md index 390070dcee280173cdc114228a1139089dd2b0a0..fa258500f81b3b9436188afb6cb77740202ec831 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-text.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-basic-text.md @@ -1,8 +1,11 @@ # text - 文本，用于呈现一段信息。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -51,3 +54,45 @@ | opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | | [left\|top] | <length> \| <percentage>6+ | - | 否 | left\|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | + +## 示例 + +```html + +
+ + Hello {{ title }} + +
+``` + +```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 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md index 2375d62e5ed3e34ccde759bf6b4a7fdbf62a6fcc..4ba0df786f1c888c861e9e002c12ee35eb794d4a 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvas.md @@ -1,8 +1,11 @@ # canvas组件 - 提供画布组件。用于自定义绘制图形。 +> **说明：** +> +> 该组件从从API version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md index 11681a4e57b8aa451c84a284649b58733f7c5cdc..0986adc7e314f7f2ed5acc2d39c56352eca100f4 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-canvas-canvasrenderingcontext2d.md @@ -5,7 +5,7 @@ **示例：** -``` +```html @@ -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 ``` diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md new file mode 100644 index 0000000000000000000000000000000000000000..4ee8dd602ae16078380f199a889ca0613b420f37 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-common-mediaquery.md @@ -0,0 +1,110 @@ +# 媒体查询 + +> **说明：** +> +> - 从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、or9+用于构成媒体查询语句，详细解释说明如下表。 + +**表1** 媒体逻辑操作符 + +| 类型 | 说明 | +| --------------- | ------------------------------------------------------------ | +| and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: liteWearable) and (max-height: 454) 表示当设备类型是智能穿戴同时应用的最大高度小于等于454个像素单位时成立。 | +| or9+ | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 454)  or  （round-screen：true）表示当应用高度小于等于454个像素单位或者设备屏幕是圆形时，条件成立。 | + + + + +## 媒体特征 + +| 类型 | 说明 | +| ---------------- | ------------------------------------------------------------ | +| height | 应用页面显示区域的高度。 | +| min-height | 应用页面显示区域的最小高度。 | +| max-height | 应用页面显示区域的最大高度。 | +| width | 应用页面显示区域的宽度。 | +| min-width | 应用页面显示区域的最小宽度。 | +| max-width | 应用页面显示区域的最大宽度。 | +| aspect-ratio | 应用页面显示区域的宽度与高度的比值。
例如：aspect-ratio: 1/2 | +| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。 | +| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。 | +| round-screen | 屏幕类型，圆形屏幕为 true， 非圆形屏幕为 false。 | + + +## 通用媒体特征示例代码 + +多个.container中的所写的属性个数以及类型需要相同，若不相同会导致显示异常。 + +```html + +
+
+ Hello World +
+
+``` + +```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; + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md index b5ebdd4b8e12373e0a45e67c377af6cef3d79a85..d8485dc11445111f2c7165b8c2f7088d246328a8 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-div.md @@ -1,8 +1,11 @@ # div - 基础容器，用作页面结构的根节点或将内容进行分组。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -55,7 +58,7 @@ 1. Flex样式 - ``` + ```html
@@ -67,7 +70,7 @@ ``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -103,7 +106,7 @@ 2. Flex Wrap样式 - ``` + ```html
@@ -115,7 +118,7 @@ ``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md index 902a04866d7d38025a8af5457fbe24b8d13be43e..8db4c78b3b042eaded0f5c90d6406917b1abf255 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list-item.md @@ -1,8 +1,11 @@ # list-item - <[list](js-components-container-list.md)>的子组件，用来展示列表具体item。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -42,3 +45,9 @@ | background-color | <color> | - | 否 | 设置背景颜色。 | | opacity5+ | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | | display | string | flex | 否 | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 | + + + +## 示例 + +参考 [list示例](js-components-container-list.md) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md index 291f725e7aadb9c8c2772d168aff675566607a26..905cf802427c20a6b474de2f32adcb241b01db28 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-list.md @@ -1,8 +1,11 @@ # list - 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 @@ -27,6 +30,8 @@ | click | - | 点击动作触发该事件。 | | longpress | - | 长按动作触发该事件。 | | swipe5+ | [SwipeEvent](js-common-events.md) | 组件上快速滑动后触发。 | +| scrolltop8+ | - | 当前列表已滑动到顶部位置。 | +| scrollbottom8+ | - | 当前列表已滑动到底部位置。 | ## 样式 @@ -115,4 +120,4 @@ export default { } ``` -![zh-cn_image_0000001380789196](figures/zh-cn_image_0000001380789196.png) +![list](figures/list.png) diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md index 27167a410fdb4a8fa6fa202092242d8855c424c4..47a0a062124bc9a92c26dc325739f5cb1b0b3812 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-stack.md @@ -1,8 +1,11 @@ # stack - 堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件 diff --git a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md index e9274975dae24e07f80bdc66a98f99d313aa51fd..37865ab41d81a1d873ab0df01b06253f397b779b 100644 --- a/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-js-lite/js-components-container-swiper.md @@ -1,8 +1,11 @@ # swiper - 滑动容器，提供切换子组件显示的能力。 +> **说明：** +> +> 该组件从从API version 4 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 子组件