Skip to content

D
Docs

OpenHarmony / Docs
11 个月 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 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
```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'
})
}
......
en/application-dev/ui/ui-js-animate-component.md
浏览文件 @ 39e5e8f8
......@@ -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.
## 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{
```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'
})
};
......
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
height: 428px;
background-color: #860303;
transform: rotate(45deg);
margin-top: 290px;
margin-left: 145px;
margin-top: 284px;
margin-left: 148px;
}
.content{
margin-top: 500px;
......@@ -51,9 +51,9 @@ 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,-152px);
transform: translate(150px,-137px);
}
.window{
z-index: 1;
......@@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 100px;
border-radius: 15px;
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
```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**
>
......
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**.
![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
Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
```html
<!-- xxx.hml -->
<div class="container">
......
en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 39e5e8f8
......@@ -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.
......
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
```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.'
})
},
......
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**
```html
<!-- index.hml -->
<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:
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:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
</grid-container>
......@@ -27,8 +27,7 @@ Create a **\<grid-container>** 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,14 +48,14 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
```html
<!-- index.hml -->
<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">
<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:
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:
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-container>
</div>
......@@ -68,8 +67,7 @@ Touch the **\<grid-container>** 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 \<grid-col>
......@@ -164,7 +162,7 @@ After adding a **\<grid-row>** child component to **\<grid-container>**, 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)
......
en/application-dev/ui/ui-js-components-image-animator.md
浏览文件 @ 39e5e8f8
......@@ -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()
})
},
......
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**.
```html
<!-- xxx.hml -->
<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>
```
......
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 *
```html
<!-- xxx.hml-->
<div class="container">
<div class="contentToggle">
<toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle>
</div>
<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>
<text id="menuId" class="text">change size</text>
<menu onselected="select" oncancel="cancel" target="menuId">
<option value="{{item.value}}" for="item in optionList">{{item.text}}</option>
</menu>
<div class="contentToggle">
<toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle>
</div>
<text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text>
<div style="width: {{width}}px;height: {{height}}px; background-color: cornflowerblue;"></div>
<text id="menuId" class="text">change size</text>
<menu onselected="select" oncancel="cancel" target="menuId">
<option value="{{item.value}}" for="item in optionList">{{item.text}}</option>
</menu>
</div>
```
......@@ -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)
en/application-dev/ui/ui-js-components-rating.md
浏览文件 @ 39e5e8f8
......@@ -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)
en/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ 39e5e8f8
......@@ -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 **&lt;swiper&gt;** component, the indicator's si
```html
<!-- xxx.hml-->
<div class="container">
<swiper index="1" autoplay="true" interval="2000" duration="500" >
<div class="item" style="background: linear-gradient(to right,#806dd9,#5d44ea,#2eb9d5)">
<text>item1</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2eb9d5,#0e7db4,#2673d9)">
<text>item2</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2673d9,#0c89af,#806dd9)">
<text>item3</text>
</div>
</swiper>
<swiper index="1" autoplay="true" interval="2000" duration="500" >
<div class="item" style="background-color: bisque;">
<text>item1</text>
</div>
<div class="item" style="background-color: darkkhaki;">
<text>item2</text>
</div>
<div class="item" style="background-color: cadetblue;">
<text>item3</text>
</div>
</swiper>
</div>
```
......@@ -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
......
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
toolbar-item{
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
<div class="container">
<image src="{{imgList[active]}}"></image>
<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
== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
</toolbar>
<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>
</toolbar>
</div>
```
......@@ -211,7 +206,6 @@ toolbar-item{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
active: 0,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或