Skip to content

D
Docs

OpenHarmony / Docs
接近 2 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 39e5e8f8 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!19116 翻译完成 17976 

Merge pull request !19116 from ester.zhou/TR-17976
上级 5e6ba3d0 bde74b20
隐藏空白更改
内联 并排
Showing with 268 addition and 576 deletion
en/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @ 39e5e8f8
...@@ -385,25 +385,25 @@ In addition to the [universal methods](js-components-common-methods.md), the fol ...@@ -385,25 +385,25 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import promptAction from '@ohos.promptAction';
export default { export default {
pinchstart(e){ pinchstart(e){
prompt.showToast({ promptAction.showToast({
message: 'pinchstart!!!' message: 'pinchstart!!!'
}) })
}, },
pinchupdate(e){ pinchupdate(e){
prompt.showToast({ promptAction.showToast({
message: 'Two-finger pinch update' message: 'Two-finger pinch update'
}) })
}, },
pinchend(e){ pinchend(e){
prompt.showToast({ promptAction.showToast({
message: 'Finished with two fingers pinching' message: 'Finished with two fingers pinching'
}) })
}, },
pinchcancel(e){ pinchcancel(e){
prompt.showToast({ promptAction.showToast({
message: 'Finger pinching is interrupted' message: 'Finger pinching is interrupted'
}) })
} }
......
en/application-dev/ui/ui-js-animate-component.md
浏览文件 @ 39e5e8f8
...@@ -221,248 +221,3 @@ export default { ...@@ -221,248 +221,3 @@ export default {
> **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. > **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
<!-- xxx.hml -->
<div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
</div>
<div class="row">
<button type="capsule" value="play" onclick="playAnimation"></button>
<button type="capsule" value="pause" onclick="pauseAnimation"></button>
</div>
<div class="row1">
<button type="capsule" value="reverse" onclick="reverseAnimation"></button>
<button type="capsule" value="cancel" onclick="cancelAnimation"></button>
</div>
</div>
```
```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: '',
},
onShow() {
var options = {
duration: 1500,
easing:'ease-in',
delay: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() {
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.
}
}
```
![en-us_image_0000001220635011](figures/en-us_image_0000001220635011.gif)
Change the animation status by changing the **playState** attribute.
```html
<!-- xxx.hml -->
<div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
</div>
<div class="row">
<button type="capsule" value="{{state}}" onclick="playStateClick"></button>
</div>
<div class="row1">
<button type="capsule" value="{{state1}}" onclick="playStateClick1"></button>
</div>
</div>
```
```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%;
}
```
```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)
en/application-dev/ui/ui-js-animate-dynamic-effects.md
浏览文件 @ 39e5e8f8
...@@ -156,7 +156,7 @@ button{ ...@@ -156,7 +156,7 @@ button{
```js ```js
// xxx.js // xxx.js
import animator from '@ohos.animator'; import animator from '@ohos.animator';
import prompt from '@system.prompt'; import promptAction from '@ohos.promptAction';
export default { export default {
data: { data: {
scaleVal:1, scaleVal:1,
...@@ -178,7 +178,7 @@ export default { ...@@ -178,7 +178,7 @@ export default {
var _this= this; var _this= this;
// Add an animation repeat event. // Add an animation repeat event.
this.animation.onrepeat = function() { this.animation.onrepeat = function() {
prompt.showToast({ promptAction.showToast({
message: 'repeat' message: 'repeat'
}); });
var repeatoptions = { var repeatoptions = {
...@@ -220,7 +220,7 @@ export default { ...@@ -220,7 +220,7 @@ export default {
var _this= this; var _this= this;
// Add an animation completion event. // Add an animation completion event.
this.animation.onfinish = function() { this.animation.onfinish = function() {
prompt.showToast({ promptAction.showToast({
message: 'finish' message: 'finish'
}) })
}; };
......
en/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 39e5e8f8
...@@ -39,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -39,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 428px; height: 428px;
background-color: #860303; background-color: #860303;
transform: rotate(45deg); transform: rotate(45deg);
margin-top: 290px; margin-top: 284px;
margin-left: 145px; margin-left: 148px;
} }
.content{ .content{
margin-top: 500px; margin-top: 500px;
...@@ -51,9 +51,9 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -51,9 +51,9 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
} }
.door{ .door{
width: 100px; width: 100px;
height: 150px; height: 135px;
background-color: #1033d9; background-color: #1033d9;
transform: translate(150px,-152px); transform: translate(150px,-137px);
} }
.window{ .window{
z-index: 1; z-index: 1;
...@@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 100px; height: 100px;
border-radius: 15px; border-radius: 15px;
background-color: #9a7404; background-color: #9a7404;
transform: translate(200px,-700px) skewX(-5deg); transform: translate(200px,-710px) skewX(-5deg);
} }
``` ```
...@@ -198,111 +198,111 @@ Set the rotation center around an element in different transform-origin position ...@@ -198,111 +198,111 @@ Set the rotation center around an element in different transform-origin position
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
background-color:#F1F3F5; background-color:#F1F3F5;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.rect { .rect {
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate 3s infinite; animation: rotate 3s infinite;
margin-left: 100px; margin-left: 30px;
} }
.rect1 { .rect1 {
background-color: #f76160; background-color: #f76160;
} }
.rect2 { .rect2 {
background-color: #60f76f; background-color: #60f76f;
/* Change the origin position.*/ /* Change the origin position.*/
transform-origin: 10% 10px; transform-origin: 10% 10px;
} }
.rect3 { .rect3 {
background-color: #6081f7; background-color: #6081f7;
/* Change the origin position.*/ /* Change the origin position.*/
transform-origin: right bottom; transform-origin: right bottom;
} }
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0deg) transform: rotate(0deg)
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
/* 3D sample style */ /* 3D sample style */
.rotate3d { .rotate3d {
margin-top: 150px; margin-top: 150px;
flex-direction: column; flex-direction: column;
background-color:#F1F3F5; background-color:#F1F3F5;
display: flex; display: flex;
align-items: center; align-items: center;
width: 80%; width: 80%;
height: 600px; height: 600px;
border-radius: 300px; border-radius: 300px;
border: 1px solid #ec0808; border: 1px solid #ec0808;
} }
.content { .content {
padding-top: 150px; padding-top: 150px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* Use react4 and react5 to shape eyes. */ /* Use react4 and react5 to shape eyes. */
.rect4 { .rect4 {
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 1000ms infinite; animation: rotate3d1 1000ms infinite;
background: linear-gradient(#e6c4ec, #be15d9) background-color: darkmagenta;
} }
.rect5 { .rect5 {
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 1000ms infinite; animation: rotate3d1 1000ms infinite;
margin-left: 100px; margin-left: 100px;
background: linear-gradient(#e6c4ec, #be15d9) background-color: darkmagenta;
} }
.mouse { .mouse {
margin-top: 150px; margin-top: 150px;
width: 200px; width: 200px;
height: 100px; height: 100px;
border-radius: 50px; border-radius: 50px;
border: 1px solid #e70303; border: 1px solid #e70303;
animation: rotate3d2 1000ms infinite; animation: rotate3d2 1000ms infinite;
} }
/* Eye animation */ /* Eye animation */
@keyframes rotate3d1 { @keyframes rotate3d1 {
0% { 0% {
transform:rotate3d(0,0,0,0deg) transform:rotate3d(0,0,0,0deg)
} }
50% { 50% {
transform:rotate3d(20,20,20,360deg); transform:rotate3d(20,20,20,360deg);
} }
100% { 100% {
transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg);
} }
} }
/* Mouth animation */ /* Mouth animation */
@keyframes rotate3d2 { @keyframes rotate3d2 {
0% { 0% {
transform:rotate3d(0,0,0,0deg) transform:rotate3d(0,0,0,0deg)
} }
33% { 33% {
transform:rotate3d(0,0,10,30deg); transform:rotate3d(0,0,10,30deg);
} }
66% { 66% {
transform:rotate3d(0,0,10,-30deg); transform:rotate3d(0,0,10,-30deg);
} }
100% { 100% {
transform:rotate3d(0,0,0,0deg); 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** > **NOTE**
> >
...@@ -333,90 +333,89 @@ Set the scaling values for the x-axis, y-axis, and z-axis in **scale3d** to impl ...@@ -333,90 +333,89 @@ Set the scaling values for the x-axis, y-axis, and z-axis in **scale3d** to impl
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
background-color:#F1F3F5; background-color:#F1F3F5;
width: 100%; width: 100%;
position: relative; position: relative;
} }
.circle{ .circle{
margin-top: 400px; margin-top: 400px;
margin-left: 40%; margin-left: 40%;
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50px; border-radius: 50px;
background:linear-gradient(#dcaec1, #d3a8e3); background-color: mediumpurple;
z-index: 1; position: absolute; z-index: 1; position: absolute;
} }
.ripple{ .ripple{
margin-top: 400px; margin-top: 400px;
margin-left: 40%; margin-left: 40%;
position: absolute; z-index: 0; position: absolute; z-index: 0;
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50px; border-radius: 50px;
background:linear-gradient(#dcaec1,#d3a8e3); background-color: blueviolet;
animation: ripple 5s infinite; animation: ripple 5s infinite;
} }
/* Set different animation durations for different components. */ /* Set different animation durations for different components. */
.ripple2{ .ripple2{
animation-duration: 2.5s; animation-duration: 2.5s;
} }
@keyframes ripple{ @keyframes ripple{
0%{ 0%{
transform: scale(1); transform: scale(1);
opacity: 0.5; opacity: 0.5;
} }
50%{ 50%{
transform: scale(3); transform: scale(3);
opacity: 0; opacity: 0;
} }
100%{ 100%{
transform: scale(1); transform: scale(1);
opacity: 0.5; opacity: 0.5;
} }
} }
text{ text{
color: white; color: white;
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.content { .content {
margin-top: 700px; margin-top: 700px;
margin-left: 33%; margin-left: 33%;
width: 200px; width: 200px;
height: 100px; height: 100px;
animation:rubberBand 1s infinite; animation:rubberBand 1s infinite;
/* Set the gradient.*/ background-color: darkmagenta;
background:linear-gradient(#e276aa,#ec0d66); position: absolute;
position: absolute;
} }
@keyframes rubberBand { @keyframes rubberBand {
0% { 0% {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
30% { 30% {
transform: scale3d(1.25, 0.75, 1.1); transform: scale3d(1.25, 0.75, 1.1);
} }
40% { 40% {
transform: scale3d(0.75, 1.25, 1.2); transform: scale3d(0.75, 1.25, 1.2);
} }
50% { 50% {
transform: scale3d(1.15, 0.85, 1.3); transform: scale3d(1.15, 0.85, 1.3);
} }
65% { 65% {
transform: scale3d(.95, 1.05, 1.2); transform: scale3d(.95, 1.05, 1.2);
} }
75% { 75% {
transform: scale3d(1.05, .95, 1.1); transform: scale3d(1.05, .95, 1.1);
} }
100%{ 100%{
transform: scale3d(1, 1, 1); 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** > **NOTE**
> >
...@@ -465,7 +464,7 @@ The matrix attribute defines a transformation matrix with six input parameters: ...@@ -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 ## Integrating transform Attributes
...@@ -486,96 +485,96 @@ You can set multiple **transform** attributes at the same time to apply differen ...@@ -486,96 +485,96 @@ You can set multiple **transform** attributes at the same time to apply differen
```css ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction:column; flex-direction:column;
background-color:#F1F3F5; background-color:#F1F3F5;
padding:50px; padding:50px;
} }
.rect1{ .rect1{
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#e77070,#ee0202); background-color: red;
animation: change1 3s infinite forwards; animation: change1 3s infinite forwards;
} }
.rect2{ .rect2{
margin-top: 50px; margin-top: 50px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#95a6e8, #2739de); background-color: darkblue;
animation: change2 3s infinite forwards; animation: change2 3s infinite forwards;
} }
.rect3{ .rect3{
margin-top: 50px; margin-top: 50px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#142ee2, #8cb1e5); background-color: darkblue;
animation: change3 3s infinite; animation: change3 3s infinite;
} }
.rect4{ .rect4{
align-self: center; align-self: center;
margin-left: 50px; margin-left: 50px;
margin-top: 200px; margin-top: 200px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3); background-color: darkmagenta;
animation: change4 3s infinite; animation: change4 3s infinite;
} }
.rect5{ .rect5{
margin-top: 300px; margin-top: 300px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#e7ded7, #486ccd, #94b4d2); background-color: cadetblue;
animation: change5 3s infinite; animation: change5 3s infinite;
} }
/* Use change1 and change2 for comparison. */ /* Use change1 and change2 for comparison. */
@keyframes change1{ @keyframes change1{
0%{ 0%{
transform: translate(0,0); transform: rotate(0deg) transform: translate(0,0); transform: rotate(0deg)
} }
100%{ 100%{
transform: translate(0,500px); transform: translate(0,500px);
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
/*change2 and change3 compare the animation effects with different attribute sequences.*/ /*change2 and change3 compare the animation effects with different attribute sequences.*/
@keyframes change2{ @keyframes change2{
0%{ 0%{
transform:translate(0,0) rotate(0deg) ; transform:translate(0,0) rotate(0deg) ;
} }
100%{ 100%{
transform: translate(300px,0) rotate(360deg); transform: translate(300px,0) rotate(360deg);
} }
} }
@keyframes change3{ @keyframes change3{
0%{ 0%{
transform:rotate(0deg) translate(0,0); transform:rotate(0deg) translate(0,0);
} }
100%{ 100%{
transform:rotate(360deg) translate(300px,0); transform:rotate(360deg) translate(300px,0);
} }
} }
/* Where the attribute values do not match. */ /* Where the attribute values do not match. */
@keyframes change4{ @keyframes change4{
0%{ 0%{
transform: scale(0.5); transform: scale(0.5);
} }
100%{ 100%{
transform:scale(2) rotate(45deg); transform:scale(2) rotate(45deg);
} }
} }
/* Multi-attribute format */ /* Multi-attribute format */
@keyframes change5{ @keyframes change5{
0%{ 0%{
transform:scale(0) translate(0,0) rotate(0); transform:scale(0) translate(0,0) rotate(0);
} }
100%{ 100%{
transform: scale(1.5) rotate(360deg) translate(200px,0); 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** > **NOTE**
> >
......
en/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 39e5e8f8
...@@ -51,61 +51,9 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -51,61 +51,9 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
![en-us_image_0000001223287676](figures/en-us_image_0000001223287676.gif) ![en-us_image_0000001223287676](figures/en-us_image_0000001223287676.gif)
## Setting the Tabs Orientation
By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**.
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true">
<tab-bar >
<text>item1</text>
<text style="margin-top: 50px;">item2</text>
</tab-bar>
<tab-content>
<div>
<image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
</div>
<div>
<image src="common/images/img1.jpg" style="object-fit: contain;"> </image>
</div>
</tab-content>
</tabs>
</div>
```
![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif)
Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**.
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;">
<tab-bar mode="fixed">
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content scrollable="false">
<div>
<image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
</div>
<div>
<image src="common/images/img2.jpg" style="object-fit: contain;"> </image>
</div>
</tab-content>
</tabs>
</div>
```
![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif)
## Setting Styles ## Setting Styles
Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component. Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
......
en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 39e5e8f8
...@@ -732,7 +732,7 @@ export default { ...@@ -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** > **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. > - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters.
......
en/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ 39e5e8f8
...@@ -269,8 +269,7 @@ Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog bo ...@@ -269,8 +269,7 @@ Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog bo
```js ```js
// xxx.js // xxx.js
var info = null; var info = null;
import prompt from '@system.prompt'; import promptAction from '@ohos.promptAction';
import router from '@system.router';
export default { export default {
data: { data: {
curYear:'', curYear:'',
...@@ -293,7 +292,7 @@ export default { ...@@ -293,7 +292,7 @@ export default {
this.$element('datedialog').show() this.$element('datedialog').show()
}, },
canceldialog(e) { canceldialog(e) {
prompt.showToast({ promptAction.showToast({
message: 'Event setting canceled.' message: 'Event setting canceled.'
}) })
}, },
...@@ -302,7 +301,7 @@ export default { ...@@ -302,7 +301,7 @@ export default {
}, },
cancelschedule(e) { cancelschedule(e) {
this.$element('datedialog').close() this.$element('datedialog').close()
prompt.showToast({ promptAction.showToast({
message: 'Event setting canceled.' message: 'Event setting canceled.'
}) })
}, },
......
en/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 39e5e8f8
...@@ -12,9 +12,9 @@ Create a **\<grid-container>** component in the .hml file under **pages/index** ...@@ -12,9 +12,9 @@ Create a **\<grid-container>** component in the .hml file under **pages/index**
```html ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> <grid-container id="mygrid" gutter="20px" style="background-color: pink;">
<grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left: <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left:
10%; margin-right: 10%;"></grid-row> 10%;"></grid-row>
<grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row> <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row> <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
</grid-container> </grid-container>
...@@ -27,8 +27,7 @@ Create a **\<grid-container>** component in the .hml file under **pages/index** ...@@ -27,8 +27,7 @@ Create a **\<grid-container>** component in the .hml file under **pages/index**
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; margin-top: 500px;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -49,14 +48,14 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum ...@@ -49,14 +48,14 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
```html ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" <grid-container id="mygrid" gutter="20px" style="background-color: pink;padding-top: 100px;"
onclick="getColumns" onlongpress="getSizeType"> onclick="getColumns" onlongpress="getSizeType">
<grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left: <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left:
40%; margin-right: 40%;"></grid-row> 40%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left: <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
25%; margin-right: 25%;"></grid-row> 25%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left: <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left:
10%; margin-right: 10%;"></grid-row> 10%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row> <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
</grid-container> </grid-container>
</div> </div>
...@@ -68,8 +67,7 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum ...@@ -68,8 +67,7 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; margin-top: 400px;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -108,7 +106,7 @@ export default { ...@@ -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 \<grid-col> ## Adding \<grid-col>
...@@ -164,7 +162,7 @@ After adding a **\<grid-row>** child component to **\<grid-container>**, add a * ...@@ -164,7 +162,7 @@ After adding a **\<grid-row>** child component to **\<grid-container>**, add a *
text{ text{
color: white; color: white;
font-size: 40px; font-size: 40px;
}
``` ```
![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png) ![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
...@@ -219,7 +217,7 @@ text{ ...@@ -219,7 +217,7 @@ text{
```js ```js
// index.js // index.js
import prompt from '@system.prompt'; import promptAction from '@ohos.promptAction';
export default { export default {
data:{ data:{
list:[ list:[
...@@ -230,7 +228,7 @@ export default { ...@@ -230,7 +228,7 @@ export default {
fresh:false fresh:false
}, },
refresh(e) { refresh(e) {
prompt.showToast({ promptAction.showToast({
message: 'refreshing' message: 'refreshing'
}) })
var that = this; var that = this;
...@@ -238,7 +236,7 @@ export default { ...@@ -238,7 +236,7 @@ export default {
setTimeout(function () { setTimeout(function () {
that.fresh = false; that.fresh = false;
that.list.unshift({src: 'common/images/4.png',id:'4'}); that.list.unshift({src: 'common/images/4.png',id:'4'});
prompt.showToast({ promptAction.showToast({
message: 'succeed' message: 'succeed'
}) })
}, 2000) }, 2000)
......
en/application-dev/ui/ui-js-components-image-animator.md
浏览文件 @ 39e5e8f8
...@@ -285,7 +285,7 @@ button{ ...@@ -285,7 +285,7 @@ button{
```js ```js
// index.js // index.js
import prompt from '@system.prompt'; import promptAction from '@ohos.promptAction';
export default { export default {
data: { data: {
rev:false, rev:false,
...@@ -317,7 +317,7 @@ export default { ...@@ -317,7 +317,7 @@ export default {
this.$element('img').resume() this.$element('img').resume()
}, },
getimgstate(e) { getimgstate(e) {
prompt.showToast({ promptAction.showToast({
message: 'Current state:' + this.$element('img').getState() message: 'Current state:' + this.$element('img').getState()
}) })
}, },
......
en/application-dev/ui/ui-js-components-marquee.md
浏览文件 @ 39e5e8f8
...@@ -12,7 +12,7 @@ Create a **&lt;marquee&gt;** component in the .hml file under **pages/index**. ...@@ -12,7 +12,7 @@ Create a **&lt;marquee&gt;** component in the .hml file under **pages/index**.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee> <marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">It's a racing lamp.</marquee>
</div> </div>
``` ```
......
en/application-dev/ui/ui-js-components-menu.md
浏览文件 @ 39e5e8f8
...@@ -179,15 +179,15 @@ Click the **&lt;toggle&gt;** component to change the text color and select the * ...@@ -179,15 +179,15 @@ Click the **&lt;toggle&gt;** component to change the text color and select the *
```html ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<div class="contentToggle"> <div class="contentToggle">
<toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle> <toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle>
</div> </div>
<text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text> <text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text>
<div style="width: {{width}}'px';height: {{height}}px;background:linear-gradient(to right,#FF0000,#0000FF);"></div> <div style="width: {{width}}px;height: {{height}}px; background-color: cornflowerblue;"></div>
<text id="menuId" class="text">change size</text> <text id="menuId" class="text">change size</text>
<menu onselected="select" oncancel="cancel" target="menuId"> <menu onselected="select" oncancel="cancel" target="menuId">
<option value="{{item.value}}" for="item in optionList">{{item.text}}</option> <option value="{{item.value}}" for="item in optionList">{{item.text}}</option>
</menu> </menu>
</div> </div>
``` ```
...@@ -242,7 +242,6 @@ option{ ...@@ -242,7 +242,6 @@ option{
```js ```js
// xxx.js // xxx.js
import promptAction from '@ohos.promptAction';
export default { export default {
data:{ data:{
fresh: false, fresh: false,
...@@ -277,4 +276,4 @@ export default { ...@@ -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)
en/application-dev/ui/ui-js-components-rating.md
浏览文件 @ 39e5e8f8
...@@ -33,7 +33,7 @@ rating { ...@@ -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 ## Setting the Rating Level
...@@ -66,7 +66,7 @@ rating { ...@@ -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 ## Setting the Rating Style
...@@ -114,7 +114,7 @@ export default { ...@@ -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** > **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. > - 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 { ...@@ -154,17 +154,17 @@ rating {
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import promptAction from '@ohos.promptAction';
export default { export default {
showrating(e) { showrating(e) {
prompt.showToast({ promptAction.showToast({
message:'Current Rating' + e.rating 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 ## Example Scenario
...@@ -256,4 +256,4 @@ export default { ...@@ -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)
en/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ 39e5e8f8
...@@ -114,7 +114,7 @@ text{ ...@@ -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** > **NOTE**
> - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**. > - 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 **&lt;swiper&gt;** component, the indicator's si ...@@ -132,17 +132,17 @@ Set the width and height of the **&lt;swiper&gt;** component, the indicator's si
```html ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper index="1" autoplay="true" interval="2000" duration="500" > <swiper index="1" autoplay="true" interval="2000" duration="500" >
<div class="item" style="background: linear-gradient(to right,#806dd9,#5d44ea,#2eb9d5)"> <div class="item" style="background-color: bisque;">
<text>item1</text> <text>item1</text>
</div> </div>
<div class="item" style="background: linear-gradient( to right,#2eb9d5,#0e7db4,#2673d9)"> <div class="item" style="background-color: darkkhaki;">
<text>item2</text> <text>item2</text>
</div> </div>
<div class="item" style="background: linear-gradient( to right,#2673d9,#0c89af,#806dd9)"> <div class="item" style="background-color: cadetblue;">
<text>item3</text> <text>item3</text>
</div> </div>
</swiper> </swiper>
</div> </div>
``` ```
...@@ -180,7 +180,7 @@ text{ ...@@ -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 ## Binding Events
......
en/application-dev/ui/ui-js-components-toolbar.md
浏览文件 @ 39e5e8f8
...@@ -108,10 +108,6 @@ Set the **position** style for the **&lt;toolbar&gt;** component and set the fon ...@@ -108,10 +108,6 @@ Set the **position** style for the **&lt;toolbar&gt;** component and set the fon
toolbar-item{ toolbar-item{
font-size: 35px; font-size: 35px;
} }
.toolbarActive{
color: red;
background-color: #daebef;
}
``` ```
...@@ -187,9 +183,8 @@ Use the **for** loop to create a **&lt;toolbar-item&gt;** component and bind a c ...@@ -187,9 +183,8 @@ Use the **for** loop to create a **&lt;toolbar-item&gt;** component and bind a c
<div class="container"> <div class="container">
<image src="{{imgList[active]}}"></image> <image src="{{imgList[active]}}"></image>
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;"> <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active <toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item> </toolbar>
</toolbar>
</div> </div>
``` ```
...@@ -211,7 +206,6 @@ toolbar-item{ ...@@ -211,7 +206,6 @@ toolbar-item{
```js ```js
// xxx.js // xxx.js
import prompt from '@system.prompt';
export default { export default {
data:{ data:{
active: 0, active: 0,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或