Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

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

提交 8a5a5461 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 57198acd
显示空白变更内容
内联 并排
Showing with 241 addition and 546 deletion
zh-cn/application-dev/ui/ui-js-animate-component.md
浏览文件 @ 8a5a5461
......@@ -218,249 +218,3 @@ export default {
>
> alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。
## 添加事件和调用方法
animation对象支持动画事件和动画方法。可以通过添加开始和取消事件，调用播放、暂停、倒放和结束方法实现预期动画。
```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')
} // 添加开始事件
this.animation.onrepeat = function() {
console.info('animation repeated')
} // 添加重播事件
this.animation.oncancel = function() {
console.info('animation canceled')
} // 添加取消事件
this.animation.onfinish = function() {
console.info('animation finish')
} // 添加完成事件
},
playAnimation() {
this.animation.play() // 调用播放开始的方法
},
pauseAnimation() {
this.animation.pause() // 调用播放暂停的方法
},
reverseAnimation() {
this.animation.reverse() // 调用播放倒放的方法
},
cancelAnimation() {
this.animation.cancel() // 调用播放取消的方法
}
}
```
![zh-cn_image_0000001220635011](figures/zh-cn_image_0000001220635011.gif)
通过改变playState的值实现动画状态的改变。
```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';//设置playState为running，动画运行。
this.state = 'pause'
}else{
this.animation.playState = 'paused';//设置playState为paused，动画暂停。
this.state = 'play'
}
},
playStateClick1(){
if(this.animation.playState != 'running'){
this.animation.playState = 'running';
this.state1 = 'finish'
}else{
this.animation.playState = 'finished';//设置playState为finished，动画结束。
this.state1 = 'play'
}
}
}
```
![zh-cn_image_0000001175075286](figures/zh-cn_image_0000001175075286.gif)
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 8a5a5461
......@@ -38,8 +38,8 @@
height: 428px;
background-color: #860303;
transform: rotate(45deg);
margin-top: 290px;
margin-left: 145px;
margin-top: 284px;
margin-left: 148px;
}
.content{
margin-top: 500px;
......@@ -50,9 +50,9 @@
}
.door{
width: 100px;
height: 150px;
height: 135px;
background-color: #1033d9;
transform: translate(150px,-152px);
transform: translate(150px,-137px);
}
.window{
z-index: 1;
......@@ -85,7 +85,7 @@
height: 100px;
border-radius: 15px;
background-color: #9a7404;
transform: translate(200px,-700px) skewX(-5deg);
transform: translate(200px,-710px) skewX(-5deg);
}
```
......@@ -209,19 +209,19 @@
width: 100px;
height: 100px;
animation: rotate 3s infinite;
margin-left: 100px;
margin-left: 30px;
}
.rect1 {
background-color: #f76160;
}
.rect2 {
background-color: #60f76f;
/* 改变原点位置*/
/* 改变原点位置*/
transform-origin: 10% 10px;
}
.rect3 {
background-color: #6081f7;
/* 改变原点位置*/
/* 改变原点位置*/
transform-origin: right bottom;
}
@keyframes rotate {
......@@ -255,14 +255,14 @@
width: 100px;
height: 100px;
animation: rotate3d1 1000ms infinite;
background: linear-gradient(#e6c4ec, #be15d9)
background-color: darkmagenta;
}
.rect5 {
width: 100px;
height: 100px;
animation: rotate3d1 1000ms infinite;
margin-left: 100px;
background: linear-gradient(#e6c4ec, #be15d9)
background-color: darkmagenta;
}
.mouse {
margin-top: 150px;
......@@ -342,7 +342,7 @@
width: 100px;
height: 100px;
border-radius: 50px;
background:linear-gradient(#dcaec1, #d3a8e3);
background-color: mediumpurple;
z-index: 1; position: absolute;
}
.ripple{
......@@ -352,7 +352,7 @@
width: 100px;
height: 100px;
border-radius: 50px;
background:linear-gradient(#dcaec1,#d3a8e3);
background-color: blueviolet;
animation: ripple 5s infinite;
}
/* 设置不同的动画时间 */
......@@ -385,8 +385,7 @@ text{
width: 200px;
height: 100px;
animation:rubberBand 1s infinite;
/* 设置渐变色 */
background:linear-gradient(#e276aa,#ec0d66);
background-color: darkmagenta;
position: absolute;
}
@keyframes rubberBand {
......@@ -492,21 +491,21 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
.rect1{
width: 100px;
height: 100px;
background:linear-gradient(#e77070,#ee0202);
background-color: red;
animation: change1 3s infinite forwards;
}
.rect2{
margin-top: 50px;
width: 100px;
height: 100px;
background:linear-gradient(#95a6e8, #2739de);
background-color: darkblue;
animation: change2 3s infinite forwards;
}
.rect3{
margin-top: 50px;
width: 100px;
height: 100px;
background:linear-gradient(#142ee2, #8cb1e5);
background-color: darkblue;
animation: change3 3s infinite;
}
.rect4{
......@@ -515,14 +514,14 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
margin-top: 200px;
width: 100px;
height: 100px;
background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3);
background-color: darkmagenta;
animation: change4 3s infinite;
}
.rect5{
margin-top: 300px;
width: 100px;
height: 100px;
background:linear-gradient(#e7ded7, #486ccd, #94b4d2);
background-color: cadetblue;
animation: change5 3s infinite;
}
/* change1 change2 对比 */
......@@ -586,13 +585,11 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
针对transform样式动画开发，有以下相关实例可供参考：
- [`JsAnimation`：动效示例应用（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/JsAnimation)
- [`JsAnimationStyle`：动画与自定义字体（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/JsAnimationStyle)
- [`JsComponentCollection`：组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentClollection/JsComponentCollection)
- [`Clock`：时钟（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/common/Clock)
- [`JsClock`：时钟（JS）（API10）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Tools/JsClock)
- [`JsAnimator`：动画（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/JsAnimation)
- [`JsAnimator`：动画（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/JsAnimation)
- [动画样式（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo)
......
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 8a5a5461
......@@ -50,55 +50,6 @@ tabs是一种常见的界面导航结构。通过页签容器，用户可以快
![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif)
## 设置tabs方向
tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。
```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>
```
![zh-cn_image_0000001208908643](figures/zh-cn_image_0000001208908643.gif)
设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。
```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>
```
![zh-cn_image_0000001209028575](figures/zh-cn_image_0000001209028575.gif)
## 设置样式
......
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 8a5a5461
......@@ -12,9 +12,9 @@
```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 @@
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
height: 100%;
margin-top: 500px;
justify-content: center;
align-items: center;
}
......@@ -48,14 +47,14 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
```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>
......@@ -67,8 +66,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
height: 100%;
margin-top: 400px;
justify-content: center;
align-items: center;
}
......@@ -163,7 +161,7 @@ export default {
text{
color: white;
font-size: 40px;
}
```
![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png)
......@@ -252,4 +250,4 @@ export default {
针对Grid开发，有以下相关实例可供参考：
- [`JsGrid`：栅格组件（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/JsGrid)
- [`JsGrid`：栅格组件（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/JsGrid)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-marquee.md
浏览文件 @ 8a5a5461
......@@ -12,7 +12,7 @@ marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用
```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>
```
......
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @ 8a5a5461
......@@ -183,7 +183,7 @@ export default {
<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>
<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>
......
zh-cn/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ 8a5a5461
......@@ -132,13 +132,13 @@ text{
<!-- 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)">
<div class="item" style="background-color: bisque;">
<text>item1</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2eb9d5,#0e7db4,#2673d9)">
<div class="item" style="background-color: darkkhaki;">
<text>item2</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2673d9,#0c89af,#806dd9)">
<div class="item" style="background-color: cadetblue;">
<text>item3</text>
</div>
</swiper>
......
zh-cn/application-dev/ui/ui-js-components-toolbar.md
浏览文件 @ 8a5a5461
......@@ -108,10 +108,6 @@ toolbar-item{
toolbar-item{
font-size: 35px;
}
.toolbarActive{
color: red;
background-color: #daebef;
}
```
......@@ -186,8 +182,7 @@ export default {
<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-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>
```
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或