Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
d4464f78
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
d4464f78
编写于
3月 30, 2022
作者:
O
openharmony_ci
提交者:
Gitee
3月 30, 2022
浏览文件
操作
浏览文件
下载
差异文件
!2790 docs测试修改
Merge pull request !2790 from wangshuainan1/docs/3.29
上级
5792198c
22eb23b3
变更
23
显示空白变更内容
内联
并排
Showing
23 changed file
with
380 addition
and
206 deletion
+380
-206
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
...arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+42
-33
zh-cn/application-dev/ui/figures/zh-cn_image_tab.gif
zh-cn/application-dev/ui/figures/zh-cn_image_tab.gif
+0
-0
zh-cn/application-dev/ui/ui-js-animate-component.md
zh-cn/application-dev/ui/ui-js-animate-component.md
+24
-1
zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
+4
-7
zh-cn/application-dev/ui/ui-js-animate-transform.md
zh-cn/application-dev/ui/ui-js-animate-transform.md
+4
-0
zh-cn/application-dev/ui/ui-js-component-tabs.md
zh-cn/application-dev/ui/ui-js-component-tabs.md
+5
-1
zh-cn/application-dev/ui/ui-js-components-button.md
zh-cn/application-dev/ui/ui-js-components-button.md
+6
-0
zh-cn/application-dev/ui/ui-js-components-canvas.md
zh-cn/application-dev/ui/ui-js-components-canvas.md
+30
-5
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
...ation-dev/ui/ui-js-components-canvasrenderingcontext2d.md
+13
-6
zh-cn/application-dev/ui/ui-js-components-dialog.md
zh-cn/application-dev/ui/ui-js-components-dialog.md
+5
-1
zh-cn/application-dev/ui/ui-js-components-form.md
zh-cn/application-dev/ui/ui-js-components-form.md
+39
-17
zh-cn/application-dev/ui/ui-js-components-images.md
zh-cn/application-dev/ui/ui-js-components-images.md
+17
-9
zh-cn/application-dev/ui/ui-js-components-input.md
zh-cn/application-dev/ui/ui-js-components-input.md
+6
-0
zh-cn/application-dev/ui/ui-js-components-list.md
zh-cn/application-dev/ui/ui-js-components-list.md
+5
-1
zh-cn/application-dev/ui/ui-js-components-menu.md
zh-cn/application-dev/ui/ui-js-components-menu.md
+16
-1
zh-cn/application-dev/ui/ui-js-components-picker.md
zh-cn/application-dev/ui/ui-js-components-picker.md
+8
-0
zh-cn/application-dev/ui/ui-js-components-slider.md
zh-cn/application-dev/ui/ui-js-components-slider.md
+2
-2
zh-cn/application-dev/ui/ui-js-components-stepper.md
zh-cn/application-dev/ui/ui-js-components-stepper.md
+15
-2
zh-cn/application-dev/ui/ui-js-components-swiper.md
zh-cn/application-dev/ui/ui-js-components-swiper.md
+20
-3
zh-cn/application-dev/ui/ui-js-components-switch.md
zh-cn/application-dev/ui/ui-js-components-switch.md
+5
-1
zh-cn/application-dev/ui/ui-js-components-text.md
zh-cn/application-dev/ui/ui-js-components-text.md
+92
-105
zh-cn/application-dev/ui/ui-js-components-toolbar.md
zh-cn/application-dev/ui/ui-js-components-toolbar.md
+12
-1
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+10
-10
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @
d4464f78
...
...
@@ -12,7 +12,8 @@
<div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" /></div>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias">
</div>
```
```
...
...
@@ -27,7 +28,12 @@
},
antialias() {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d', { antialias: true }); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }}
const ctx = el.getContext('2d', { antialias: true });
ctx.beginPath(); ]
ctx.arc(100, 75, 50, 0, 6.28);
ctx.stroke();
}
}
```
-
示意图(关闭抗锯齿)
...
...
@@ -62,12 +68,13 @@
### fillStyle
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
...
...
@@ -103,6 +110,7 @@ export default {
ctx.strokeRect(25, 25, 85, 105);
}
}
```
![
zh-cn_image_0000001166484430
](
figures/zh-cn_image_0000001166484430.png
)
...
...
@@ -260,9 +268,7 @@ export default {
ctx.moveTo(140, 10);
ctx.lineTo(140, 160);
ctx.stroke();
ctx.font = '18px sans-serif';
// Show the different textAlign values
ctx.textAlign = 'start';
ctx.fillText('textAlign=start', 140, 60);
...
...
@@ -276,6 +282,7 @@ export default {
ctx.fillText('textAlign=right',140, 140);
}
}
```
...
...
@@ -300,9 +307,7 @@ export default {
ctx.moveTo(0, 120);
ctx.lineTo(400, 120);
ctx.stroke();
ctx.font = '20px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Top', 10, 120);
ctx.textBaseline = 'bottom';
...
...
@@ -389,12 +394,12 @@ export default {
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
-
示例
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
...
...
@@ -423,12 +428,12 @@ export default {
### shadowBlur
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
...
...
@@ -571,12 +576,12 @@ fillRect(x: number, y: number, width:number, height: number): void
| height | number | 指定矩形的高度。 |
-
示例
```
```
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>
```
```
```
//xxx.js
...
...
@@ -1740,8 +1745,8 @@ createImageData(width: number, height: number, imageData: Object): Object
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
var
imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
var
newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
}
}
```
...
...
@@ -1777,8 +1782,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
//xxx.js
export default {
onShow() {
var
test = this.$element('getImageData')
var
ctx = test.getContext('2d');
const
test = this.$element('getImageData')
const
ctx = test.getContext('2d');
var imageData = ctx.getImageData(0, 0, 280, 300);
}
}
...
...
@@ -1813,8 +1818,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
//xxx.js
export default {
onShow() {
var
test = this.$element('getImageData')
var
ctx = test.getContext('2d');
const
test = this.$element('getImageData')
const
ctx = test.getContext('2d');
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
...
...
@@ -1930,3 +1935,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
```
!
[
zh-cn_image_0000001168984882
](
figures/zh-cn_image_0000001168984882.png
)
```
```
\ No newline at end of file
zh-cn/application-dev/ui/figures/zh-cn_image_tab.gif
0 → 100644
浏览文件 @
d4464f78
501.2 KB
zh-cn/application-dev/ui/ui-js-animate-component.md
浏览文件 @
d4464f78
...
...
@@ -104,7 +104,30 @@ export default {
this.options = {
duration: 4000,
};
this.keyframes = [ { transform: { translate: '-120px -0px', scale: 1, rotate: 0 }, transformOrigin: '100px 100px', offset: 0.0, width: 200, height: 200 }, { transform: { translate: '120px 0px', scale: 1.5, rotate: 90 }, transformOrigin: '100px 100px', offset: 1.0, width: 300, height: 300 } ];
this.keyframes = [
{
transform: {
translate: '-120px -0px',
scale: 1,
rotate: 0
},
transformOrigin: '100px 100px',
offset: 0.0,
width: 200,
height: 200
},
{
transform: {
translate: '120px 0px',
scale: 1.5,
rotate: 90
},
transformOrigin: '100px 100px',
offset: 1.0,
width: 300,
height: 300
}
];
},
Show() {
this.animation = this.$element('content').animate(this.keyframes, this.options);
...
...
zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
浏览文件 @
d4464f78
...
...
@@ -25,6 +25,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
@@ -90,7 +92,7 @@ animator支持事件和接口,可以通过添加frame、cancel、repeat、fini
```
<!-- xxx.hml -->
<div style="flex-direction: column;align-items: center;">
<div style="flex-direction: column;align-items: center;
width: 100%;height: 100%;
">
<div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);
transform: scale({{scaleVal}});"></div>
<div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;
...
...
@@ -113,11 +115,6 @@ animator支持事件和接口,可以通过添加frame、cancel、repeat、fini
```
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
justify-content: center;
}
button{
width: 200px;
}
...
...
@@ -128,7 +125,7 @@ button{
justify-content: space-between;
margin-top: 150px;
position: fixed;
top: 5
5
%;
top: 5
2
%;
left: 120px;
}
.row1{
...
...
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @
d4464f78
...
...
@@ -25,6 +25,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
align-items: center;
flex-direction: column;
...
...
@@ -105,6 +107,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
display: flex;
justify-content: center;
...
...
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @
d4464f78
...
...
@@ -230,12 +230,16 @@ export default {
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
background-color:#F1F3F5;
}
.tab_bar {
width: 100%;
height: 150px;
}
.tab_item {
height: 30%;
flex-direction: column;
align-items: center;
}
...
...
@@ -302,4 +306,4 @@ export default {
}
```
![
zh-cn_image_
0000001163228602
](
figures/zh-cn_image_0000001163228602
.gif
)
![
zh-cn_image_
tab
](
figures\zh-cn_image_tab
.gif
)
zh-cn/application-dev/ui/ui-js-components-button.md
浏览文件 @
d4464f78
...
...
@@ -17,6 +17,8 @@ Button是按钮组件,其类型包括胶囊按钮、圆形按钮、文本按
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -44,6 +46,8 @@ Button是按钮组件,其类型包括胶囊按钮、圆形按钮、文本按
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
...
...
@@ -106,6 +110,8 @@ Button是按钮组件,其类型包括胶囊按钮、圆形按钮、文本按
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
...
...
zh-cn/application-dev/ui/ui-js-components-canvas.md
浏览文件 @
d4464f78
...
...
@@ -60,7 +60,10 @@ Canvas组件设置宽(width)、高(height)、背景色(background-colo
background-color: #F1F3F5;
}
canvas{
width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red;
width: 500px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
```
...
...
@@ -83,9 +86,29 @@ Canvas添加长按事件,长按后可获取Canvas组件的dataUrl值(toDataU
```
/* xxx.css */.container{ flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5;}canvas{ width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red;
/* xxx.css */
.container{
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 500px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
margin-bottom: 50px;
}.content{ border: 5px solid blue; padding: 10px; width: 90%; height: 400px; overflow: scroll;}
}
.content{
border: 5px solid blue;
padding: 10px;
width: 90%;
height: 400px;
overflow: scroll;
}
```
...
...
@@ -99,7 +122,9 @@ export default {
porc:'open',
},
onShow(){
let el = this.$refs.canvas1 let ctx = el.getContext("2d") ctx.strokeRect(100,100,300,300)
let el = this.$refs.canvas1;
let ctx = el.getContext("2d");
ctx.strokeRect(100,100,300,300);
},
getUrl(){
let el = this.$refs.canvas1
...
...
zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @
d4464f78
...
...
@@ -274,7 +274,7 @@ export default {
this.ctx.setLineDash([0,0]);
// 画具有边框的矩形
this.ctx.strokeRect(200, 150, 200, 200);
}else if(e.newValue == 'value2'){
}else if
(e.newValue == 'value2'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 30;
this.ctx.strokeStyle = '#0000ff';
...
...
@@ -283,12 +283,12 @@ export default {
this.ctx.arc(300, 250, 150,0,6.28);
//进行边框绘制
this.ctx.stroke();
}else if(e.newValue == 'value3'){
}else if
(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 5;
this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200, 150, 200, 200);
}else if(e.newValue == 'value4'){
}else if
(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500);
// 画一个有填充颜色的矩形
this.ctx.fillStyle = '#0000ff';
...
...
@@ -395,7 +395,10 @@ export default {
this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400); gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35');
let gradient = this.ctx.createLinearGradient(100,100, 400,400);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// 设置绘制阴影时的模糊级别
this.ctx.shadowBlur = 30;
// 绘制阴影时的阴影颜色
...
...
@@ -405,9 +408,13 @@ export default {
}else if(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500);
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1, '#17ea35');
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// 设置绘制阴影时的模糊级别
this.ctx.shadowBlur = 30; this.ctx.shadowOffsetY = 30;
this.ctx.shadowBlur = 30;
this.ctx.shadowOffsetY = 30;
// 绘制阴影时的阴影颜色
this.ctx.shadowColor = 'rgb(23, 1, 1)';
this.ctx.fillStyle = gradient;
...
...
zh-cn/application-dev/ui/ui-js-components-dialog.md
浏览文件 @
d4464f78
...
...
@@ -9,7 +9,7 @@ Dialog组件用于创建自定义弹窗,通常用来展示用户当前需要
```
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId"><div class="content">
<dialog class="dialogClass" id="dialogId"><div class="content"
dragable="ture"
>
<text>this is a dialog</text>
</div>
</dialog>
...
...
@@ -20,6 +20,8 @@ Dialog组件用于创建自定义弹窗,通常用来展示用户当前需要
```
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
@@ -83,6 +85,8 @@ export default {
```
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
zh-cn/application-dev/ui/ui-js-components-form.md
浏览文件 @
d4464f78
...
...
@@ -13,7 +13,8 @@ Form是一个表单容器,支持容器内[Input](../reference/arkui-js/js-comp
```
<!-- xxx.hml -->
<div class="container">
<form> <input type="text" style="width:80%"></input>
<form style="width: 100%; height: 20%">
<input type="text" style="width:80%"></input>
</form>
</div>
```
...
...
@@ -21,6 +22,8 @@ Form是一个表单容器,支持容器内[Input](../reference/arkui-js/js-comp
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -59,9 +62,8 @@ Form是一个表单容器,支持容器内[Input](../reference/arkui-js/js-comp
background-color: #F1F3F5;
}
.formClass{
width: 80%;
padding: 10px;
border: 1px solid #c3d3e7;
width: 100%;
height: 20%;
}
```
...
...
@@ -72,19 +74,20 @@ Form是一个表单容器,支持容器内[Input](../reference/arkui-js/js-comp
## 添加响应事件
为Form组件添加submit和reset事件,来提交表单内容或重置表单选项。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<form onsubmit='onSubmit' onreset='onReset' style="justify-content: center; align-items: center;text-align: center;">
<div style="flex-direction: column;justify-content: center;align-self: center;">
<div style="justify-content: center; align-items: center;">
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
<div style="width: 100%;justify-content: center;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="margin-top: 30px;justify-content: center; align-items: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
<div style="width: 100%;justify-content: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" >
</input>
<input type="reset" value="Reset" style="width:100px;"></input>
</div>
</div>
...
...
@@ -92,6 +95,25 @@ Form是一个表单容器,支持容器内[Input](../reference/arkui-js/js-comp
</div>
```
```
/* index.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-items: center
align-items: center;
background-color: #F1F3F5;
}
.form{
width: 100%;
height: 30%;
flex-direction: column;
justify-items: center
align-items: center;
}
```
```
/* xxx.js */
import prompt from '@system.prompt';
...
...
zh-cn/application-dev/ui/ui-js-components-images.md
浏览文件 @
d4464f78
...
...
@@ -9,13 +9,15 @@ Image是图片组件,用来渲染展示图片。具体用法请参考[Image AP
```
<!-- index.hml -->
<div class="container">
<image src="common/images/bg-tv.jpg"> </image>
<image s
tyle="height: 30%;" s
rc="common/images/bg-tv.jpg"> </image>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -45,15 +47,15 @@ Image是图片组件,用来渲染展示图片。具体用法请参考[Image AP
flex-direction: column;
align-items: center;
justify-content: center;
background-color:#F1F3F5;
background-color:#F1F3F5;
}
image{
width: 80%; height: 500px;
width: 80%;
height: 500px;
border: 5px solid saddlebrown;
border-radius: 20px;
object-fit: contain;
match-text-direction:true;
}
```
...
...
@@ -69,11 +71,14 @@ image{
<div class="page-container">
<list>
<list-item class="item-container" for="{{list}}">
<image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};"></image>
<div>
<image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};">
</image>
<div class="text-container">
<text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
<text style="font-size: 23px;color: orange;font-style: italic;">content</text>
</div>
</div>
</list-item>
</list>
<div style="width: 100%;height:100px;justify-content: center;margin-top: 100px;flex-shrink: 0;">
...
...
@@ -235,7 +240,10 @@ export default {
justify-content: space-between;
}
.testimage {
width: 100%; height: 400px; object-fit: scale-down; border-radius: 20px;}
width: 100%; height: 400px;
object-fit: scale-down;
border-radius: 20px;
}
```
```
...
...
zh-cn/application-dev/ui/ui-js-components-input.md
浏览文件 @
d4464f78
...
...
@@ -17,6 +17,8 @@ Input是交互式组件,用于接收用户数据。其类型可设置为日期
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -54,6 +56,8 @@ Input是交互式组件,用于接收用户数据。其类型可设置为日期
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
...
...
@@ -120,6 +124,7 @@ export default {
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
@@ -176,6 +181,7 @@ export default {
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
zh-cn/application-dev/ui/ui-js-components-list.md
浏览文件 @
d4464f78
...
...
@@ -10,7 +10,8 @@ List是用来显示列表的组件,包含一系列相同宽度的列表项,
```
<!-- index.hml -->
<div class="container">
<list> <list-item class="listItem"></list-item>
<list>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
...
...
@@ -21,6 +22,8 @@ List是用来显示列表的组件,包含一系列相同宽度的列表项,
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
...
...
@@ -191,6 +194,7 @@ export default {
![
zh-cn_image_0000001162911958
](
figures/zh-cn_image_0000001162911958.gif
)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
>
> - groupcollapse和groupexpand事件仅支持list-item-group组件使用。
...
...
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @
d4464f78
...
...
@@ -25,6 +25,8 @@
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
...
...
@@ -65,6 +67,8 @@
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
...
...
@@ -115,6 +119,8 @@ option{
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
...
...
@@ -254,7 +260,16 @@ export default {
{name: "black", checked:false},
],
},
toggleClick(index){ for(let i=0;i<this.togglesList.length;i++){ if(i == index){ this.color = this.togglesList[index].name this.togglesList[i].checked = true; }else{ this.togglesList[i].checked = false; } } },
toggleClick(index) {
for(let i=0;i<this.togglesList.length;i++) {
if (i == index) {
this.color = this.togglesList[index].name;
this.togglesList[i].checked = true;
}else {
this.togglesList[i].checked = false;
}
}
},
select(e) {
this.width = e.value * 100;
this.height = e.value * 100;
...
...
zh-cn/application-dev/ui/ui-js-components-picker.md
浏览文件 @
d4464f78
...
...
@@ -17,6 +17,8 @@ Picker是滑动选择器组件,类型支持普通选择器、日期选择器
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -42,6 +44,8 @@ Picker是滑动选择器组件,类型支持普通选择器、日期选择器
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -86,6 +90,8 @@ Picker的hours属性定义时间的展现格式,可选类型有12小时制和2
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -121,6 +127,8 @@ Picker的hours属性定义时间的展现格式,可选类型有12小时制和2
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
zh-cn/application-dev/ui/ui-js-components-slider.md
浏览文件 @
d4464f78
...
...
@@ -17,8 +17,6 @@ Slider为滑动条组件,用来快速调节音量、亮度等。具体用法
</div>
```
```
/* xxx.css */
.container {
...
...
@@ -119,6 +117,8 @@ Slider组件通过color、selected-color、block-color样式分别为滑动条
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
zh-cn/application-dev/ui/ui-js-components-stepper.md
浏览文件 @
d4464f78
...
...
@@ -14,7 +14,8 @@
```
<!-- index.hml -->
<div class="container">
<stepper> <stepper-item>
<stepper>
<stepper-item>
<text>Step 1</text>
</stepper-item>
<stepper-item>
...
...
@@ -27,6 +28,8 @@
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -66,6 +69,8 @@ text{
```
/* index.css */
.container {
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
}
...
...
@@ -103,6 +108,8 @@ text{
```
/* index.css */
.container {
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
}
...
...
@@ -154,6 +161,8 @@ Stepper组件默认填充父容器,通过border和background-color设置边框
```
/* index.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
@@ -208,6 +217,8 @@ Stepper分别添加finish,change,next,back,skip事件。
```
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
@@ -325,6 +336,8 @@ export default {
```
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
...
...
zh-cn/application-dev/ui/ui-js-components-swiper.md
浏览文件 @
d4464f78
...
...
@@ -28,18 +28,24 @@ Swiper为滑动容器,提供切换显示子组件的能力。具体用法请
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
height: 500px;
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
...
...
@@ -84,11 +90,15 @@ Swiper组件当不开启循环播放(loop="false")时添加自动播放属
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
...
...
@@ -96,6 +106,7 @@ Swiper组件当不开启循环播放(loop="false")时添加自动播放属
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
...
...
@@ -138,11 +149,12 @@ text{
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
width: 500px;
...
...
@@ -205,11 +217,15 @@ text{
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
...
...
@@ -217,6 +233,7 @@ text{
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
...
...
zh-cn/application-dev/ui/ui-js-components-switch.md
浏览文件 @
d4464f78
...
...
@@ -44,6 +44,8 @@ Switch为开关选择器,切换开启或关闭状态。具体用法请参考[S
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
...
...
@@ -53,7 +55,7 @@ switch{
// 选中时的字体颜色
texton-color: #002aff;
// 未选中时的字体颜色
textoff-color: silver;
textoff-color: silver;
text-padding: 20px;
font-size: 50px;
}
...
...
@@ -114,6 +116,8 @@ export default {
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
padding: 50px;
...
...
zh-cn/application-dev/ui/ui-js-components-text.md
浏览文件 @
d4464f78
...
...
@@ -36,31 +36,29 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
<text style="color: blueviolet; font-size: 40px; allow-scale:true">
This is a passage
</text>
<text style="color: blueviolet; font-size: 40px; margin-top: 20px; allow-scale:true;word-spacing: 20px;" >
This is a passage
</text>
</div>
```
</div>
```
```
/* xxx.css */
.container {
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
```
}
```
!
[
zh-cn_image_0000001220778205
](
figures/zh-cn_image_0000001220778205.png
)
...
...
@@ -68,11 +66,9 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
-
添加划线
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考Text自有样式。
设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考 Text自有样式。
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<text style="text-decoration:underline">
...
...
@@ -82,44 +78,36 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
text{
}
text{
font-size: 50px;
}
```
}
```
!
[
zh-cn_image_0000001220856725
](
figures/zh-cn_image_0000001220856725.png
)
-
隐藏文本内容
当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现
当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现。
```
<!-- xxx.hml -->
<div class="container">
```
<!-- xxx.hml -->
<div class="container">
<text class="text">
This is a passage
</text>
</div>
```
</div>
```
```
/* xxx.css */
.container {
width: 100%;
...
...
@@ -134,27 +122,23 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
max-lines: 1;
text-overflow:ellipsis;
}
```
**说明:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。
>
> - max-lines属性设置文本最多可以展示的行数。
-
text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。
-
max-lines属性设置文本最多可以展示的行数。
![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png)
!
[
zh-cn_image_0000001163656706
](
figures/zh-cn_image_0000001163656706.png
)
-
设置文本折行
设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。
设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。
```
<!-- xxx.hml -->
<div class="container">
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="text1">
Welcome to the world
...
...
@@ -163,11 +147,10 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
Welcome to the world
</text>
</div>
</div>
```
</div
```
```
/* xxx.css */
.container {
background-color: #F1F3F5;
...
...
@@ -196,10 +179,9 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
word-break: break-all;
font-size: 40px;
}
```
![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png)
!
[
zh-cn_image_0000001209033195
](
figures/zh-cn_image_0000001209033195.png
)
-
Text组件支持
[
Span
](
../reference/arkui-js/js-components-basic-span.md
)
子组件
...
...
@@ -207,12 +189,15 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex
```
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;
width: 100%;height: 100%;
">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1 </span> <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span> <span style="color: red;"> passage </span>
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1
</span>
<span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span>
<span style="color: red;"> passage </span>
</text>
</div>
```
...
...
@@ -253,6 +238,8 @@ Text组件通过数据绑定展示文本内容,Span组件通过设置show属
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
...
...
zh-cn/application-dev/ui/ui-js-components-toolbar.md
浏览文件 @
d4464f78
...
...
@@ -23,6 +23,8 @@ Toolbar为页面工具栏组件,用于展示针对当前界面的操作选项
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -44,7 +46,12 @@ toolbar-item{
<!-- xxx.hml -->
<div class="container">
<toolbar>
<toolbar-item value="item1"></toolbar-item> <toolbar-item value="item2"></toolbar-item> <toolbar-item value="item3"></toolbar-item> <toolbar-item value="item4"></toolbar-item> <toolbar-item value="item5"></toolbar-item> <toolbar-item value="item6"></toolbar-item>
<toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item>
<toolbar-item value="item3"></toolbar-item>
<toolbar-item value="item4"></toolbar-item>
<toolbar-item value="item5"></toolbar-item>
<toolbar-item value="item6"></toolbar-item>
</toolbar>
</div>
```
...
...
@@ -53,6 +60,8 @@ toolbar-item{
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
...
...
@@ -92,6 +101,7 @@ toolbar-item{
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
...
...
@@ -131,6 +141,7 @@ toolbar-item{
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
...
...
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @
d4464f78
...
...
@@ -108,8 +108,8 @@ GridContainer() {
struct GridContainerExample {
build() {
Column({ space: 5 }) {
GridContainer({ columns: 6
, sizeType: SizeType.Auto, gutter: 10, margin: 20
}) {
Row(
) {
GridContainer({ columns: 6 }) {
Flex({justifyContent:FlexAlign.SpaceAround}
) {
Text('1')
.useSizeType({
xs: { span: 2, offset: 0 },
...
...
@@ -120,18 +120,18 @@ struct GridContainerExample {
.height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
Text('2')
.useSizeType({
xs: { span: 2, offset:
2
},
sm: { span: 2, offset:
2
},
md: { span: 4, offset:
1
},
lg: { span: 4, offset:
1
},
xs: { span: 2, offset:
0
},
sm: { span: 2, offset:
0
},
md: { span: 4, offset:
0
},
lg: { span: 4, offset:
0
},
})
.height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center)
Text('3')
.useSizeType({
xs: { span: 2, offset:
4
},
sm: { span: 2, offset:
4
},
md: { span: 1, offset:
5
},
lg: { span: 1, offset:
5
},
xs: { span: 2, offset:
0
},
sm: { span: 2, offset:
0
},
md: { span: 1, offset:
0
},
lg: { span: 1, offset:
0
},
})
.height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录