diff --git a/en/application-dev/reference/arkui-js/js-components-container-div.md b/en/application-dev/reference/arkui-js/js-components-container-div.md index e35eb42639301cfb6ce1a9a45880217ce1daf54b..1cbd9ac9be8e5f4f0dfd3a9db2f91c45d19b10f4 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-div.md +++ b/en/application-dev/reference/arkui-js/js-components-container-div.md @@ -275,7 +275,7 @@ In addition to the [universal methods](js-components-common-methods.md), the fol top:0, }, dragstart(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Start to be dragged' }) }, @@ -385,25 +385,25 @@ In addition to the [universal methods](js-components-common-methods.md), the fol ```js // xxx.js - import prompt from '@system.prompt'; + import promptAction from '@ohos.promptAction'; export default { pinchstart(e){ - prompt.showToast({ + promptAction.showToast({ message: 'pinchstart!!!' }) }, pinchupdate(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Two-finger pinch update' }) }, pinchend(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Finished with two fingers pinching' }) }, pinchcancel(e){ - prompt.showToast({ + promptAction.showToast({ message: 'Finger pinching is interrupted' }) } diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index cd072648a81f68b080ae88b9a90cf6a157376dc6..ff60c8526b70cd848293f696699a6bd5f4fe26c0 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -19,10 +19,10 @@ Configure the component transition animations for when a component is inserted o | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.
Default value: **TransitionType.All**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **type** is not specified, insertion and deletion use the same transition type.| -| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| +| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 or greater than 1 evaluates to the value **1**.| | translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.
Since API version 9, this API is supported in ArkTS widgets.| | scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.
- If the center point is 0, it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/ui/figures/en-us_image_0000001163531210.gif b/en/application-dev/ui/figures/en-us_image_0000001163531210.gif index 47730f745cfd341cd6f11c9a3d4ce71d4b2795fb..a645566ffd6152e073bda387a61468d05d0a93da 100644 Binary files a/en/application-dev/ui/figures/en-us_image_0000001163531210.gif and b/en/application-dev/ui/figures/en-us_image_0000001163531210.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001174756580.gif b/en/application-dev/ui/figures/en-us_image_0000001174756580.gif new file mode 100644 index 0000000000000000000000000000000000000000..d3ad5d5ccc9d68f3f822a20b7fde31b05d4b2892 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001174756580.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001178685854.gif b/en/application-dev/ui/figures/en-us_image_0000001178685854.gif new file mode 100644 index 0000000000000000000000000000000000000000..7f8c79eb23a72da310d2769746d0a8bde4519bcd Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001178685854.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001181655292.gif b/en/application-dev/ui/figures/en-us_image_0000001181655292.gif new file mode 100644 index 0000000000000000000000000000000000000000..24dba7afc4830bb8da86f31fe7a2d25092bc4987 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001181655292.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001181823160.gif b/en/application-dev/ui/figures/en-us_image_0000001181823160.gif new file mode 100644 index 0000000000000000000000000000000000000000..cf8a2ba1b016283dc59117bc853d1348b5016bbe Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001181823160.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001189089950.gif b/en/application-dev/ui/figures/en-us_image_0000001189089950.gif index 52e27cf794d93927462587c5fe202c1afb344b96..c91f56f31a49756556d6ff61cccda166b33c6371 100644 Binary files a/en/application-dev/ui/figures/en-us_image_0000001189089950.gif and b/en/application-dev/ui/figures/en-us_image_0000001189089950.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001189249862.gif b/en/application-dev/ui/figures/en-us_image_0000001189249862.gif index a1839308d0fdde50aefd4c818d30ea82c49b6ca6..f541dcffbfdc3712ccb6aaddaa5ab0b5a904f6d9 100644 Binary files a/en/application-dev/ui/figures/en-us_image_0000001189249862.gif and b/en/application-dev/ui/figures/en-us_image_0000001189249862.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001218279600.gif b/en/application-dev/ui/figures/en-us_image_0000001218279600.gif new file mode 100644 index 0000000000000000000000000000000000000000..af0d82673874b844d27059447b73c5eeff622156 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218279600.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001220316305.gif b/en/application-dev/ui/figures/en-us_image_0000001220316305.gif new file mode 100644 index 0000000000000000000000000000000000000000..52486eead5a5d005c46e0eb445954bb41fbc186e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001220316305.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001220396251.gif b/en/application-dev/ui/figures/en-us_image_0000001220396251.gif new file mode 100644 index 0000000000000000000000000000000000000000..e7d53872aa36d55697d3fa917ba9ab655c91984e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001220396251.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001220554911.gif b/en/application-dev/ui/figures/en-us_image_0000001220554911.gif new file mode 100644 index 0000000000000000000000000000000000000000..f6c0806abfb1bdc742b69592300bc333c590407b Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001220554911.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001220635011.gif b/en/application-dev/ui/figures/en-us_image_0000001220635011.gif deleted file mode 100644 index 0be34d5b9598c7e03132b08e030fd71d977886b5..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001220635011.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001222807776.gif b/en/application-dev/ui/figures/en-us_image_0000001222807776.gif deleted file mode 100644 index 365dbc42e583335f32de863120fd80ae0e7d59e5..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001222807776.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001223127712.gif b/en/application-dev/ui/figures/en-us_image_0000001223127712.gif deleted file mode 100644 index 3fe0cd60d60a0c5d29c2625ebade3d8b0bd0cdf8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001223127712.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001224086459.gif b/en/application-dev/ui/figures/en-us_image_0000001224086459.gif new file mode 100644 index 0000000000000000000000000000000000000000..0257ac0a97c7bb8af3431962f41c8d0a62a5351e Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001224086459.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001226815403.gif b/en/application-dev/ui/figures/en-us_image_0000001226815403.gif new file mode 100644 index 0000000000000000000000000000000000000000..ca4ecc21fe0596f0a644dd619b2d889949d339d1 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001226815403.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001226896657.gif b/en/application-dev/ui/figures/en-us_image_0000001226896657.gif new file mode 100644 index 0000000000000000000000000000000000000000..5caa616a4867ff14b496363ed522739ed470f873 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001226896657.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001227135613.gif b/en/application-dev/ui/figures/en-us_image_0000001227135613.gif new file mode 100644 index 0000000000000000000000000000000000000000..25967987fbbada2f179f029578d8f28dfc523d8a Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001227135613.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001227422709.gif b/en/application-dev/ui/figures/en-us_image_0000001227422709.gif new file mode 100644 index 0000000000000000000000000000000000000000..a89f97cdb43f6527836575768e306a594a76a221 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001227422709.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001227701031.gif b/en/application-dev/ui/figures/en-us_image_0000001227701031.gif new file mode 100644 index 0000000000000000000000000000000000000000..74e527d7842dcd825a0baf93dbe49cdcc3933a97 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001227701031.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001227701867.gif b/en/application-dev/ui/figures/en-us_image_0000001227701867.gif index 0cbcaa3ff368a2a2ad63c8729acc0f66ae874437..fac38d519b9b817e2a7dfdc7f26c46b61a7bdb3e 100644 Binary files a/en/application-dev/ui/figures/en-us_image_0000001227701867.gif and b/en/application-dev/ui/figures/en-us_image_0000001227701867.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843088.gif b/en/application-dev/ui/figures/en-us_image_0000001231843088.gif deleted file mode 100644 index f7f05ac39da2bd2f04a7257e1c36eb87ad811783..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001231843088.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001231843116.gif b/en/application-dev/ui/figures/en-us_image_0000001231843116.gif deleted file mode 100644 index d6a46140a41a112790210c58502fbc3df6e65f20..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001231843116.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003008.gif b/en/application-dev/ui/figures/en-us_image_0000001232003008.gif deleted file mode 100644 index b5bce1b8e09e0c47231c11250c6d676806bcd53c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001232003008.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001232003012.gif b/en/application-dev/ui/figures/en-us_image_0000001232003012.gif deleted file mode 100644 index 260966e4fe59e4e6f80b501251f478bbb7126dce..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001232003012.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001234011019.gif b/en/application-dev/ui/figures/en-us_image_0000001234011019.gif index 7dd539689ac7b81822c934bd3c515e1d4f002d85..f7defcdb55deec4749d8af503dd8314bf6b1521a 100644 Binary files a/en/application-dev/ui/figures/en-us_image_0000001234011019.gif and b/en/application-dev/ui/figures/en-us_image_0000001234011019.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267607921.gif b/en/application-dev/ui/figures/en-us_image_0000001267607921.gif deleted file mode 100644 index 90898288928277467db40c5eb11b4ff7ae082e6e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267607921.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267767853.gif b/en/application-dev/ui/figures/en-us_image_0000001267767853.gif deleted file mode 100644 index 5a297661641d1714ebc95116592a97a693293e0a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267767853.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267887837.gif b/en/application-dev/ui/figures/en-us_image_0000001267887837.gif deleted file mode 100644 index b7808565202cf12474f1282e67fde3a9c85d0e9c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267887837.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803173.gif b/en/application-dev/ui/figures/en-us_image_0000001275803173.gif deleted file mode 100644 index abec4486ad5f444b32aa20b88a3a6d1975254cd0..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001275803173.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275803189.gif b/en/application-dev/ui/figures/en-us_image_0000001275803189.gif deleted file mode 100644 index ab6d5e3bde1e3218eaa1156137c7fd6ffc298882..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001275803189.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923005.gif b/en/application-dev/ui/figures/en-us_image_0000001275923005.gif deleted file mode 100644 index 8bd5e2f2f7f60ad28107af3dc67ff5ee75af2b0d..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001275923005.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001275923021.gif b/en/application-dev/ui/figures/en-us_image_0000001275923021.gif deleted file mode 100644 index 5813dfac315791a87d9bd9c70a9587e6b779614c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001275923021.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001276003485.gif b/en/application-dev/ui/figures/en-us_image_0000001276003485.gif deleted file mode 100644 index 28b2a163673a71e95a40284d2b045005594623e6..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001276003485.gif and /dev/null differ diff --git a/en/application-dev/ui/ui-js-animate-component.md b/en/application-dev/ui/ui-js-animate-component.md index 9d51f17b287ef56dfc8cea9b880c129fb0fe7bfc..16130a97a98e04b0736e46550aa72607cd1a53be 100644 --- a/en/application-dev/ui/ui-js-animate-component.md +++ b/en/application-dev/ui/ui-js-animate-component.md @@ -34,28 +34,28 @@ Call the **animate** method to obtain an animation object, which supports animat ```js /* xxx.js */ export default { - data: { - animation: '', - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - }; - var frames = [ - { - width:200,height:200, - }, - { - width:300,height:300, - } - ]; - this.animation = this.$element('content').animate(frames, options); // Obtain the animation object. - }, - Show() { - this.animation.play(); - } + data: { + animation: '', + options: {}, + frames: {} + }, + onInit() { + this.options = { + duration: 1500, + }; + this.frames = [ + { + width: 200, height: 200, + }, + { + width: 300, height: 300, + } + ]; + }, + Show() { + this.animation = this.$element('content').animate(this.frames, this.options); // Obtain the animation object. + this.animation.play(); + } } ``` @@ -172,297 +172,52 @@ Set the animation attributes by using the **options** parameter. ```js /* xxx.js */ -export default { - data: { - animation: '', - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - easing: 'ease-in', - delay: 5, - iterations: 2, - direction: 'normal', - }; - var frames = [ - { - transform: { - translate: '-150px -0px' - } - }, - { - transform: { - translate: '150px 0px' - } - } - ]; - this.animation = this.$element('content').animate(frames, options); - }, - Show() { - this.animation.play(); - } -} -``` - -![en-us_image_0000001222967796](figures/en-us_image_0000001222967796.gif) - -> **NOTE** -> -> **direction**: mode of playing the animation. -> -> **normal**: plays the animation in forward loop mode. -> -> **reverse**: plays the animation in reverse loop mode. -> -> **alternate**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction. -> -> **alternate-reverse**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction. - - -## Adding an Event and Calling a Method - -Animation objects support animation events and methods. You can achieve the intended animation by adding start and cancel events and calling the play, pause, rewind, and stop methods. - -```html - -
-
-
-
- - -
-
- - -
-
-``` - -```css -/* xxx.css */ -.container { - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; -} -button{ - width: 200px; -} -.row{ - width: 65%; - height: 100px; - align-items: center; - justify-content: space-between; - margin-top: 40px; - position: fixed; - top: 65%; - left: 120px; -} -.row1{ - width: 65%; - height: 100px; - align-items: center; - justify-content: space-between; - margin-top: 30px; - position: fixed; - top: 75%; - left: 120px; -} -``` - -```js -// xxx.js export default { data: { animation: '', + options: {}, + frames: {} }, - onShow() { - var options = { + onInit() { + this.options = { duration: 1500, - easing:'ease-in', - delay:5, - direction:'normal', - iterations:2 + easing: 'ease-in', + delay: 5, + iterations: 2, + direction: 'normal', }; - var frames = [ + this.frames = [ { transform: { translate: '-150px -0px' - }, - opacity: 0.1, - offset: 0.0, - width: 200, - height: 200, + } }, { transform: { translate: '150px 0px' - }, - opacity: 1.0, - offset: 1.0, - width: 300, - height: 300, + } } ]; - this.animation = this.$element('content').animate(frames, options); - this.animation.onstart = function() { - console.info('animation start') - } // Add a start event. - this.animation.onrepeat = function() { - console.info('animation repeated') - } // Add a repeat event. - this.animation.oncancel = function() { - console.info('animation canceled') - } // Add a cancel event. - this.animation.onfinish = function() { - console.info('animation finish') - } // Add a finish event. - }, - playAnimation() { - this.animation.play() // Start this animation. - }, - pauseAnimation() { - this.animation.pause() // Pause this animation. }, - reverseAnimation() { - this.animation.reverse() // Reverse this animation. - }, - cancelAnimation() { - this.animation.cancel() // Cancel this animation. + Show() { + this.animation = this.$element('content').animate(this.frames, this.options); + this.animation.play(); } } ``` -![en-us_image_0000001220635011](figures/en-us_image_0000001220635011.gif) - -Change the animation status by changing the **playState** attribute. - -```html - -
-
-
-
- -
-
- -
-
-``` +![en-us_image_0000001222967796](figures/en-us_image_0000001222967796.gif) -```css -/* xxx.css */ -.container { - flex-direction: column; - align-items: center; - justify-content: center; -} -button{ - width: 200px; -} -.row{ - width: 65%; - height: 100px; - align-items: center; - justify-content: space-between; - margin-top: 50px; - margin-left: 260px; - position: fixed; - top: 65%; -} -.row1{ - width: 65%; - height: 100px; - align-items: center; - justify-content: space-between; - margin-top: 50px; - margin-left: 260px; - position: fixed; - top: 75%; -} -``` +> **NOTE** +> +> **direction**: mode of playing the animation. +> +> **normal**: plays the animation in forward loop mode. +> +> **reverse**: plays the animation in reverse loop mode. +> +> **alternate**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction. +> +> **alternate-reverse**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction. -```js -// xxx.js -import promptAction from '@ohos.promptAction'; -export default { - data: { - animation: '', - state:'play', - state1:'play' - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - easing:'ease-in', - elay:5, - direction:'normal', - iterations:2, - }; - var frames = [ - { - transform: { - translate: '-150px -0px' - }, - opacity: 0.1, - offset: 0.0, - width: 200, - height: 200, - }, - { - transform: { - translate: '150px 0px' - }, - opacity: 1.0, - offset: 1.0, - width: 300, - height: 300, - } - ]; - this.animation = this.$element('content').animate(frames, options); - this.animation.onstart = function(){ - promptAction.showToast({ - message: "start" - }); - }; - this.animation.onrepeat = function(){ - promptAction.showToast({ - message: " repeated" - }); - }; - this.animation.onfinish = function(){ - promptAction.showToast({ - message: " finished" - }); - }; - }, - playStateClick(){ - if(this.animation.playState != 'running'){ - this.animation.playState = 'running';// Set playState to running to run the animation. - this.state = 'pause' - }else{ - this.animation.playState = 'paused';// Set playState to paused to pause the animation. - this.state = 'play' - } - }, - playStateClick1(){ - if(this.animation.playState != 'running'){ - this.animation.playState = 'running'; - this.state1 = 'finish' - }else{ - this.animation.playState = 'finished';// Set playState to finished to stop the animation. - this.state1 = 'play' - } - } -} -``` -![en-us_image_0000001267607921](figures/en-us_image_0000001267607921.gif) diff --git a/en/application-dev/ui/ui-js-animate-dynamic-effects.md b/en/application-dev/ui/ui-js-animate-dynamic-effects.md index f8cb772417f52df363c16ceea9fc2683f9d39e19..59afb8eea9271913bd997452ee93e95aa7f239fb 100644 --- a/en/application-dev/ui/ui-js-animate-dynamic-effects.md +++ b/en/application-dev/ui/ui-js-animate-dynamic-effects.md @@ -156,7 +156,7 @@ button{ ```js // xxx.js import animator from '@ohos.animator'; -import prompt from '@system.prompt'; +import promptAction from '@ohos.promptAction'; export default { data: { scaleVal:1, @@ -178,7 +178,7 @@ export default { var _this= this; // Add an animation repeat event. this.animation.onrepeat = function() { - prompt.showToast({ + promptAction.showToast({ message: 'repeat' }); var repeatoptions = { @@ -220,7 +220,7 @@ export default { var _this= this; // Add an animation completion event. this.animation.onfinish = function() { - prompt.showToast({ + promptAction.showToast({ message: 'finish' }) }; diff --git a/en/application-dev/ui/ui-js-animate-transform.md b/en/application-dev/ui/ui-js-animate-transform.md index 29882f56200d45615534142f4b2fdcac60a0c77b..72b632c60f58ab6b70f9dfb7057bb2cd3edb6aa3 100644 --- a/en/application-dev/ui/ui-js-animate-transform.md +++ b/en/application-dev/ui/ui-js-animate-transform.md @@ -51,7 +51,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p } .door{ width: 100px; - height: 150px; + height: 135px; background-color: #1033d9; transform: translate(150px,-137px); } @@ -198,111 +198,111 @@ Set the rotation center around an element in different transform-origin position ```css /* xxx.css */ .container { - flex-direction: column; - background-color:#F1F3F5; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; + flex-direction: column; + background-color:#F1F3F5; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; } .rect { - width: 100px; - height: 100px; - animation: rotate 3s infinite; - margin-left: 100px; + width: 100px; + height: 100px; + animation: rotate 3s infinite; + margin-left: 30px; } .rect1 { - background-color: #f76160; + background-color: #f76160; } .rect2 { - background-color: #60f76f; - /* Change the origin position.*/ - transform-origin: 10% 10px; + background-color: #60f76f; +/* Change the origin position.*/ + transform-origin: 10% 10px; } .rect3 { - background-color: #6081f7; - /* Change the origin position.*/ - transform-origin: right bottom; + background-color: #6081f7; +/* Change the origin position.*/ + transform-origin: right bottom; } @keyframes rotate { - from { - transform: rotate(0deg) - } - to { - transform: rotate(360deg); - } + from { + transform: rotate(0deg) + } + to { + transform: rotate(360deg); + } } /* 3D sample style */ .rotate3d { - margin-top: 150px; - flex-direction: column; - background-color:#F1F3F5; - display: flex; - align-items: center; - width: 80%; - height: 600px; - border-radius: 300px; - border: 1px solid #ec0808; + margin-top: 150px; + flex-direction: column; + background-color:#F1F3F5; + display: flex; + align-items: center; + width: 80%; + height: 600px; + border-radius: 300px; + border: 1px solid #ec0808; } .content { - padding-top: 150px; - display: flex; - align-items: center; - justify-content: center; + padding-top: 150px; + display: flex; + align-items: center; + justify-content: center; } /* Use react4 and react5 to shape eyes. */ .rect4 { - width: 100px; - height: 100px; - animation: rotate3d1 1000ms infinite; - background: linear-gradient(#e6c4ec, #be15d9) + width: 100px; + height: 100px; + animation: rotate3d1 1000ms infinite; + background-color: darkmagenta; } .rect5 { - width: 100px; - height: 100px; - animation: rotate3d1 1000ms infinite; - margin-left: 100px; - background: linear-gradient(#e6c4ec, #be15d9) + width: 100px; + height: 100px; + animation: rotate3d1 1000ms infinite; + margin-left: 100px; + background-color: darkmagenta; } .mouse { - margin-top: 150px; - width: 200px; - height: 100px; - border-radius: 50px; - border: 1px solid #e70303; - animation: rotate3d2 1000ms infinite; + margin-top: 150px; + width: 200px; + height: 100px; + border-radius: 50px; + border: 1px solid #e70303; + animation: rotate3d2 1000ms infinite; } /* Eye animation */ @keyframes rotate3d1 { - 0% { - transform:rotate3d(0,0,0,0deg) - } - 50% { - transform:rotate3d(20,20,20,360deg); - } - 100% { - transform:rotate3d(0,0,0,0deg); - } + 0% { + transform:rotate3d(0,0,0,0deg) + } + 50% { + transform:rotate3d(20,20,20,360deg); + } + 100% { + transform:rotate3d(0,0,0,0deg); + } } /* Mouth animation */ @keyframes rotate3d2 { - 0% { - transform:rotate3d(0,0,0,0deg) - } - 33% { - transform:rotate3d(0,0,10,30deg); - } - 66% { - transform:rotate3d(0,0,10,-30deg); - } - 100% { - transform:rotate3d(0,0,0,0deg); - } + 0% { + transform:rotate3d(0,0,0,0deg) + } + 33% { + transform:rotate3d(0,0,10,30deg); + } + 66% { + transform:rotate3d(0,0,10,-30deg); + } + 100% { + transform:rotate3d(0,0,0,0deg); + } } ``` -![en-us_image_0000001222807776](figures/en-us_image_0000001222807776.gif) +![en-us_image_0000001220316305](figures/en-us_image_0000001220316305.gif) > **NOTE** > @@ -333,90 +333,89 @@ Set the scaling values for the x-axis, y-axis, and z-axis in **scale3d** to impl ```css /* xxx.css */ .container { - flex-direction: column; - background-color:#F1F3F5; - width: 100%; - position: relative; + flex-direction: column; + background-color:#F1F3F5; + width: 100%; + position: relative; } .circle{ - margin-top: 400px; - margin-left: 40%; - width: 100px; - height: 100px; - border-radius: 50px; - background:linear-gradient(#dcaec1, #d3a8e3); - z-index: 1; position: absolute; + margin-top: 400px; + margin-left: 40%; + width: 100px; + height: 100px; + border-radius: 50px; + background-color: mediumpurple; + z-index: 1; position: absolute; } .ripple{ - margin-top: 400px; - margin-left: 40%; - position: absolute; z-index: 0; - width: 100px; - height: 100px; - border-radius: 50px; - background:linear-gradient(#dcaec1,#d3a8e3); - animation: ripple 5s infinite; + margin-top: 400px; + margin-left: 40%; + position: absolute; z-index: 0; + width: 100px; + height: 100px; + border-radius: 50px; + background-color: blueviolet; + animation: ripple 5s infinite; } /* Set different animation durations for different components. */ .ripple2{ - animation-duration: 2.5s; + animation-duration: 2.5s; } @keyframes ripple{ - 0%{ - transform: scale(1); - opacity: 0.5; - } - 50%{ - transform: scale(3); - opacity: 0; - } - 100%{ - transform: scale(1); - opacity: 0.5; - } + 0%{ + transform: scale(1); + opacity: 0.5; + } + 50%{ + transform: scale(3); + opacity: 0; + } + 100%{ + transform: scale(1); + opacity: 0.5; + } } text{ - color: white; - text-align: center; - height: 100%; - width: 100%; + color: white; + text-align: center; + height: 100%; + width: 100%; } .content { - margin-top: 700px; - margin-left: 33%; - width: 200px; - height: 100px; - animation:rubberBand 1s infinite; - /* Set the gradient.*/ - background:linear-gradient(#e276aa,#ec0d66); - position: absolute; + margin-top: 700px; + margin-left: 33%; + width: 200px; + height: 100px; + animation:rubberBand 1s infinite; + background-color: darkmagenta; + position: absolute; } @keyframes rubberBand { - 0% { - transform: scale3d(1, 1, 1); - } - 30% { - transform: scale3d(1.25, 0.75, 1.1); - } - 40% { - transform: scale3d(0.75, 1.25, 1.2); - } - 50% { - transform: scale3d(1.15, 0.85, 1.3); - } - 65% { - transform: scale3d(.95, 1.05, 1.2); - } - 75% { - transform: scale3d(1.05, .95, 1.1); - } - 100%{ - transform: scale3d(1, 1, 1); - } + 0% { + transform: scale3d(1, 1, 1); + } + 30% { + transform: scale3d(1.25, 0.75, 1.1); + } + 40% { + transform: scale3d(0.75, 1.25, 1.2); + } + 50% { + transform: scale3d(1.15, 0.85, 1.3); + } + 65% { + transform: scale3d(.95, 1.05, 1.2); + } + 75% { + transform: scale3d(1.05, .95, 1.1); + } + 100%{ + transform: scale3d(1, 1, 1); + } } ``` -![en-us_image_0000001267887837](figures/en-us_image_0000001267887837.gif) +![en-us_image_0000001220396251](figures/en-us_image_0000001220396251.gif) > **NOTE** > @@ -465,7 +464,7 @@ The matrix attribute defines a transformation matrix with six input parameters: } ``` -![en-us_image_0000001267767853](figures/en-us_image_0000001267767853.gif) +![en-us_image_0000001174756580](figures/en-us_image_0000001174756580.gif) ## Integrating transform Attributes @@ -486,96 +485,96 @@ You can set multiple **transform** attributes at the same time to apply differen ```css /* xxx.css */ .container{ - width: 100%; - height: 100%; - flex-direction:column; - background-color:#F1F3F5; - padding:50px; + width: 100%; + height: 100%; + flex-direction:column; + background-color:#F1F3F5; + padding:50px; } .rect1{ - width: 100px; - height: 100px; - background:linear-gradient(#e77070,#ee0202); - animation: change1 3s infinite forwards; + width: 100px; + height: 100px; + background-color: red; + animation: change1 3s infinite forwards; } .rect2{ - margin-top: 50px; - width: 100px; - height: 100px; - background:linear-gradient(#95a6e8, #2739de); - animation: change2 3s infinite forwards; + margin-top: 50px; + width: 100px; + height: 100px; + background-color: darkblue; + animation: change2 3s infinite forwards; } .rect3{ - margin-top: 50px; - width: 100px; - height: 100px; - background:linear-gradient(#142ee2, #8cb1e5); - animation: change3 3s infinite; + margin-top: 50px; + width: 100px; + height: 100px; + background-color: darkblue; + animation: change3 3s infinite; } .rect4{ - align-self: center; - margin-left: 50px; - margin-top: 200px; - width: 100px; - height: 100px; - background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3); - animation: change4 3s infinite; + align-self: center; + margin-left: 50px; + margin-top: 200px; + width: 100px; + height: 100px; + background-color: darkmagenta; + animation: change4 3s infinite; } .rect5{ - margin-top: 300px; - width: 100px; - height: 100px; - background:linear-gradient(#e7ded7, #486ccd, #94b4d2); - animation: change5 3s infinite; + margin-top: 300px; + width: 100px; + height: 100px; + background-color: cadetblue; + animation: change5 3s infinite; } /* Use change1 and change2 for comparison. */ @keyframes change1{ - 0%{ - transform: translate(0,0); transform: rotate(0deg) - } - 100%{ - transform: translate(0,500px); - transform: rotate(360deg) - } + 0%{ + transform: translate(0,0); transform: rotate(0deg) + } + 100%{ + transform: translate(0,500px); + transform: rotate(360deg) + } } /*change2 and change3 compare the animation effects with different attribute sequences.*/ @keyframes change2{ - 0%{ - transform:translate(0,0) rotate(0deg) ; - } - 100%{ - transform: translate(300px,0) rotate(360deg); - } + 0%{ + transform:translate(0,0) rotate(0deg) ; + } + 100%{ + transform: translate(300px,0) rotate(360deg); + } } @keyframes change3{ - 0%{ - transform:rotate(0deg) translate(0,0); - } - 100%{ - transform:rotate(360deg) translate(300px,0); - } + 0%{ + transform:rotate(0deg) translate(0,0); + } + 100%{ + transform:rotate(360deg) translate(300px,0); + } } /* Where the attribute values do not match. */ @keyframes change4{ - 0%{ - transform: scale(0.5); - } - 100%{ - transform:scale(2) rotate(45deg); - } + 0%{ + transform: scale(0.5); + } + 100%{ + transform:scale(2) rotate(45deg); + } } /* Multi-attribute format */ @keyframes change5{ - 0%{ - transform:scale(0) translate(0,0) rotate(0); - } - 100%{ - transform: scale(1.5) rotate(360deg) translate(200px,0); - } + 0%{ + transform:scale(0) translate(0,0) rotate(0); + } + 100%{ + transform: scale(1.5) rotate(360deg) translate(200px,0); + } } ``` -![en-us_image_0000001223127712](figures/en-us_image_0000001223127712.gif) +![en-us_image_0000001220554911](figures/en-us_image_0000001220554911.gif) > **NOTE** > diff --git a/en/application-dev/ui/ui-js-component-tabs.md b/en/application-dev/ui/ui-js-component-tabs.md index 1099ff21b8556e73b99e7b722689b51745de3123..40bd47a73026060dc5a5360f2b9b1c4cf08ed9d2 100644 --- a/en/application-dev/ui/ui-js-component-tabs.md +++ b/en/application-dev/ui/ui-js-component-tabs.md @@ -51,61 +51,9 @@ Create a **<tabs>** component in the .hml file under **pages/index**. ![en-us_image_0000001223287676](figures/en-us_image_0000001223287676.gif) -## Setting the Tabs Orientation - -By default, the active tab of a **<tabs>** component is the one with the specified **index**. To show the **<tabs>** vertically, set the **vertical** attribute to **true**. - -```html - -
- - - item1 - item2 - - -
- -
-
- -
- - -
-``` - -![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif) - -Set the **mode** attribute to enable the child components of the **<tab-bar>** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **<tab-content>**. - -```html - -
- - - item1 - item2 - - -
- -
-
- -
- - -
-``` - -![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif) - - ## Setting Styles Set the background color, border, and tab-content layout of the **<tabs>** component. - ```html
diff --git a/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md index 95a07736c69d3d99d90074bd37da895a5860dad7..06f89b529b1d517e8aad129b386339f1d9284ba0 100644 --- a/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md +++ b/en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md @@ -732,7 +732,7 @@ export default { } ``` -![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif) +![en-us_image_0000001218279600](figures/en-us_image_0000001218279600.gif) > **NOTE** > - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters. diff --git a/en/application-dev/ui/ui-js-components-dialog.md b/en/application-dev/ui/ui-js-components-dialog.md index 67e0601c7694afa618d81c0c6c13f9bebab69d64..0477ac700d6ccf5ee41d8bb2af0f5c5c6452ca6e 100644 --- a/en/application-dev/ui/ui-js-components-dialog.md +++ b/en/application-dev/ui/ui-js-components-dialog.md @@ -269,8 +269,7 @@ Use the **<dialog>** component to implement a schedule. When the dialog bo ```js // xxx.js var info = null; -import prompt from '@system.prompt'; -import router from '@system.router'; +import promptAction from '@ohos.promptAction'; export default { data: { curYear:'', @@ -293,7 +292,7 @@ export default { this.$element('datedialog').show() }, canceldialog(e) { - prompt.showToast({ + promptAction.showToast({ message: 'Event setting canceled.' }) }, @@ -302,7 +301,7 @@ export default { }, cancelschedule(e) { this.$element('datedialog').close() - prompt.showToast({ + promptAction.showToast({ message: 'Event setting canceled.' }) }, diff --git a/en/application-dev/ui/ui-js-components-grid.md b/en/application-dev/ui/ui-js-components-grid.md index cdb1dbbb4dca0cdb80ec0b49c22879cae4af19e1..9ba4ec977b8b456376e5f891bb4a508e7079cbae 100644 --- a/en/application-dev/ui/ui-js-components-grid.md +++ b/en/application-dev/ui/ui-js-components-grid.md @@ -12,7 +12,7 @@ Create a **\** component in the .hml file under **pages/index** ```html
- + @@ -27,8 +27,7 @@ Create a **\** component in the .hml file under **pages/index** .container{ flex-direction: column; background-color: #F1F3F5; - width: 100%; - height: 100%; + margin-top: 500px; justify-content: center; align-items: center; } @@ -49,7 +48,7 @@ Touch the **\** component to call the **getColumns**, **getColum ```html
- @@ -68,8 +67,7 @@ Touch the **\** component to call the **getColumns**, **getColum .container{ flex-direction: column; background-color: #F1F3F5; - width: 100%; - height: 100%; + margin-top: 400px; justify-content: center; align-items: center; } @@ -108,7 +106,7 @@ export default { } ``` -![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif) +![en-us_image_0000001227135613](figures/en-us_image_0000001227135613.gif) ## Adding \ @@ -164,7 +162,7 @@ After adding a **\** child component to **\**, add a * text{ color: white; font-size: 40px; - +} ``` ![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) @@ -219,7 +217,7 @@ text{ ```js // index.js -import prompt from '@system.prompt'; +import promptAction from '@ohos.promptAction'; export default { data:{ list:[ @@ -230,7 +228,7 @@ export default { fresh:false }, refresh(e) { - prompt.showToast({ + promptAction.showToast({ message: 'refreshing' }) var that = this; @@ -238,7 +236,7 @@ export default { setTimeout(function () { that.fresh = false; that.list.unshift({src: 'common/images/4.png',id:'4'}); - prompt.showToast({ + promptAction.showToast({ message: 'succeed' }) }, 2000) diff --git a/en/application-dev/ui/ui-js-components-image-animator.md b/en/application-dev/ui/ui-js-components-image-animator.md index 17c0ef71c4f4bec6ee681f87069e4c032ae72889..2c6024356406c1e7f1a5a4f490b17574742e35f9 100644 --- a/en/application-dev/ui/ui-js-components-image-animator.md +++ b/en/application-dev/ui/ui-js-components-image-animator.md @@ -285,7 +285,7 @@ button{ ```js // index.js -import prompt from '@system.prompt'; +import promptAction from '@ohos.promptAction'; export default { data: { rev:false, @@ -317,7 +317,7 @@ export default { this.$element('img').resume() }, getimgstate(e) { - prompt.showToast({ + promptAction.showToast({ message: 'Current state:' + this.$element('img').getState() }) }, diff --git a/en/application-dev/ui/ui-js-components-marquee.md b/en/application-dev/ui/ui-js-components-marquee.md index 844caa67cb1066cc7f5bb7f8f2ca61a766d8c0ee..24db47aa039d470127c4a53cd0e20c29f1fd0f8a 100644 --- a/en/application-dev/ui/ui-js-components-marquee.md +++ b/en/application-dev/ui/ui-js-components-marquee.md @@ -12,7 +12,7 @@ Create a **<marquee>** component in the .hml file under **pages/index**. ```html
- This is a marquee. + It's a racing lamp.
``` diff --git a/en/application-dev/ui/ui-js-components-menu.md b/en/application-dev/ui/ui-js-components-menu.md index c30a27a85ccaed2bb8fdd56bbdd243fd2b9b9c67..355c2bf38f2a24669c76415d5a50b8f23b18210b 100644 --- a/en/application-dev/ui/ui-js-components-menu.md +++ b/en/application-dev/ui/ui-js-components-menu.md @@ -179,15 +179,15 @@ Click the **<toggle>** component to change the text color and select the * ```html
-
- {{item.name}} -
- width:{{width}},height:{{height}} -
- change size - - - +
+ {{item.name}} +
+ width:{{width}},height:{{height}} +
+ change size + + +
``` @@ -242,7 +242,6 @@ option{ ```js // xxx.js -import promptAction from '@ohos.promptAction'; export default { data:{ fresh: false, @@ -277,4 +276,4 @@ export default { } ``` -![en-us_image_0000001276003485](figures/en-us_image_0000001276003485.gif) +![en-us_image_0000001226815403](figures/en-us_image_0000001226815403.gif) diff --git a/en/application-dev/ui/ui-js-components-rating.md b/en/application-dev/ui/ui-js-components-rating.md index b1f78b766f5f3d43c03072be549eecdfe848292f..81af0bd13512b5c837bb6e589b3e394dc5ea7e21 100644 --- a/en/application-dev/ui/ui-js-components-rating.md +++ b/en/application-dev/ui/ui-js-components-rating.md @@ -33,7 +33,7 @@ rating { } ``` -![en-us_image_0000001231843116](figures/en-us_image_0000001231843116.gif) +![en-us_image_0000001227701031](figures/en-us_image_0000001227701031.gif) ## Setting the Rating Level @@ -66,7 +66,7 @@ rating { } ``` -![en-us_image_0000001232003012](figures/en-us_image_0000001232003012.gif) +![en-us_image_0000001227422709](figures/en-us_image_0000001227422709.gif) ## Setting the Rating Style @@ -114,7 +114,7 @@ export default { } ``` -![en-us_image_0000001275803173](figures/en-us_image_0000001275803173.gif) +![en-us_image_0000001178685854](figures/en-us_image_0000001178685854.gif) > **NOTE** > - You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the grey rating star applies, indicating that the image source is incorrectly set. @@ -154,17 +154,17 @@ rating { ```js // xxx.js -import prompt from '@system.prompt'; +import promptAction from '@ohos.promptAction'; export default { showrating(e) { - prompt.showToast({ + promptAction.showToast({ message:'Current Rating' + e.rating }) } } ``` -![en-us_image_0000001276003525](figures/en-us_image_0000001276003525.gif) +![en-us_image_0000001181823160](figures/en-us_image_0000001181823160.gif) ## Example Scenario @@ -256,4 +256,4 @@ export default { } ``` -![en-us_image_0000001275923005](figures/en-us_image_0000001275923005.gif) +![en-us_image_0000001224086459](figures/en-us_image_0000001224086459.gif) diff --git a/en/application-dev/ui/ui-js-components-swiper.md b/en/application-dev/ui/ui-js-components-swiper.md index f69ab201ee654e7c71e28b8964c9ab347b490977..1aeeaf850f52ee628b31b88686bd10b5529a6414 100644 --- a/en/application-dev/ui/ui-js-components-swiper.md +++ b/en/application-dev/ui/ui-js-components-swiper.md @@ -114,7 +114,7 @@ text{ } ``` -![en-us_image_0000001275923021](figures/en-us_image_0000001275923021.gif) +![en-us_image_0000001181655292](figures/en-us_image_0000001181655292.gif) > **NOTE** > - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**. @@ -132,17 +132,17 @@ Set the width and height of the **<swiper>** component, the indicator's si ```html
- -
- item1 -
-
- item2 -
-
- item3 -
- + +
+ item1 +
+
+ item2 +
+
+ item3 +
+
``` @@ -180,7 +180,7 @@ text{ } ``` -![en-us_image_0000001275803189](figures/en-us_image_0000001275803189.gif) +![en-us_image_0000001226896657](figures/en-us_image_0000001226896657.gif) ## Binding Events diff --git a/en/application-dev/ui/ui-js-components-toolbar.md b/en/application-dev/ui/ui-js-components-toolbar.md index cd92894b959acf309e96766eb7fceb9ce18726a6..d8da1a6064e7fe575f8d5db36a08e91b3a40450f 100644 --- a/en/application-dev/ui/ui-js-components-toolbar.md +++ b/en/application-dev/ui/ui-js-components-toolbar.md @@ -108,10 +108,6 @@ Set the **position** style for the **<toolbar>** component and set the fon toolbar-item{ font-size: 35px; } -.toolbarActive{ - color: red; - background-color: #daebef; -} ``` @@ -187,9 +183,8 @@ Use the **for** loop to create a **<toolbar-item>** component and bind a c
- - + +
``` @@ -211,7 +206,6 @@ toolbar-item{ ```js // xxx.js -import prompt from '@system.prompt'; export default { data:{ active: 0,