Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

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

未验证 提交 a8b597fa 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!13827 整改示例 

Merge pull request !13827 from 田雨/master
上级 551ffe8d 64425d3e
隐藏空白更改
内联 并排
Showing with 131 addition and 153 deletion
zh-cn/application-dev/reference/apis/js-apis-prompt.md
浏览文件 @ a8b597fa
......@@ -32,7 +32,7 @@ showToast(options: ShowToastOptions): void
```js
prompt.showToast({
message: 'Message Info',
duration: 2000,
duration: 2000
});
```
......@@ -79,11 +79,11 @@ prompt.showDialog({
buttons: [
{
text: 'button1',
color: '#000000',
color: '#000000'
},
{
text: 'button2',
color: '#000000',
color: '#000000'
}
],
})
......@@ -121,11 +121,11 @@ prompt.showDialog({
buttons: [
{
text: 'button1',
color: '#000000',
color: '#000000'
},
{
text: 'button2',
color: '#000000',
color: '#000000'
}
]
}, (err, data) => {
......@@ -185,11 +185,11 @@ prompt.showActionMenu({
buttons: [
{
text: 'item1',
color: '#666666',
color: '#666666'
},
{
text: 'item2',
color: '#000000',
color: '#000000'
},
]
}, (err, data) => {
......@@ -231,11 +231,11 @@ prompt.showActionMenu({
buttons: [
{
text: 'item1',
color: '#666666',
color: '#666666'
},
{
text: 'item2',
color: '#000000',
color: '#000000'
},
]
})
......
zh-cn/application-dev/reference/apis/js-apis-promptAction.md
浏览文件 @ a8b597fa
......@@ -40,7 +40,7 @@ showToast(options: ShowToastOptions): void
try {
promptAction.showToast({
message: 'Message Info',
duration: 2000,
duration: 2000
});
} catch (error) {
console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
......@@ -100,11 +100,11 @@ try {
buttons: [
{
text: 'button1',
color: '#000000',
color: '#000000'
},
{
text: 'button2',
color: '#000000',
color: '#000000'
}
],
})
......@@ -154,11 +154,11 @@ try {
buttons: [
{
text: 'button1',
color: '#000000',
color: '#000000'
},
{
text: 'button2',
color: '#000000',
color: '#000000'
}
]
}, (err, data) => {
......@@ -229,11 +229,11 @@ try {
buttons: [
{
text: 'item1',
color: '#666666',
color: '#666666'
},
{
text: 'item2',
color: '#000000',
color: '#000000'
},
]
}, (err, data) => {
......@@ -287,11 +287,11 @@ try {
buttons: [
{
text: 'item1',
color: '#666666',
color: '#666666'
},
{
text: 'item2',
color: '#000000',
color: '#000000'
},
]
})
......
zh-cn/application-dev/reference/apis/js-apis-system-prompt.md
浏览文件 @ a8b597fa
......@@ -38,7 +38,7 @@ export default {
showToast() {
prompt.showToast({
message: 'Message Info',
duration: 2000,
duration: 2000
});
}
}
......@@ -67,11 +67,11 @@ export default {
showDialog() {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
message: 'Message Info',
buttons: [
{
text: 'button',
color: '#666666',
color: '#666666'
},
],
success: function(data) {
......@@ -110,12 +110,12 @@ export default {
buttons: [
{
text: 'item1',
color: '#666666',
color: '#666666'
},
{
text: 'item2',
color: '#000000',
},
color: '#000000'
},
],
success: function(tapIndex) {
console.log('dialog success callback，click button : ' + tapIndex);
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ a8b597fa
......@@ -137,15 +137,13 @@
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
margin-top: 50%;
}
```
......@@ -163,8 +161,8 @@
},
}
```
![](figures/pickerview1.gif)
![picker-view0](figures/picker-view0.gif)
2. 时间选择器
```html
<!-- xxx.hml -->
......@@ -179,22 +177,16 @@
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker {
width: 500px;
height: 400px;
margin-top: 20px;
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
......@@ -226,16 +218,16 @@
}
```
![](figures/pickerview2.gif)
![picker-view1](figures/picker-view1.gif)
3. 日期选择器
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{time}}
Selected：{{date}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
<picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
</div>
```
......@@ -245,20 +237,13 @@
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
font-size: 31px;
text-align: center;
margin-top: 20px;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
margin-top: 50%;
}
```
......@@ -273,8 +258,8 @@
},
}
```
![](figures/pickerview3.gif)
![picker-view2](figures/picker-view2.gif)
4. 日期时间选择器
```html
<!-- xxx.hml -->
......@@ -292,20 +277,13 @@
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 500px;
height: 454px;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
font-size: 31px;
text-align: center;
margin-top: 20px;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
margin-top: 50%;
}
```
......@@ -320,8 +298,8 @@
},
}
```
![](figures/pickerview4.gif)
![picker-view3](figures/picker-view3.gif)
5. 多列文本选择器
```html
......@@ -340,15 +318,13 @@
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 500px;
height: 454px;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
font-size: 31px;
text-align: center;
margin-top: 20px;
margin-top: 50%;
}
```
......@@ -368,4 +344,4 @@
},
}
```
![](figures/pickerview5.gif)
\ No newline at end of file
![picker-view4](figures/picker-view4.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @ a8b597fa
......@@ -74,7 +74,7 @@
}
.spanTxt{
color: chartreuse;
font-size: 100px;
font-size: 80px;
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ a8b597fa
......@@ -31,16 +31,16 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
| 名称 | 参数类型 | 描述 |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| type | InputType | 设置输入框类型。<br/>默认值：InputType.Normal |
| type | [InputType](#inputtype枚举说明) | 设置输入框类型。<br/>默认值：InputType.Normal |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder文本颜色。|
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
| enterKeyType | EnterKeyType | 设置输入法回车键类型，目前OpenHarmony输入法仅支持默认类型显示。<br/>默认值：EnterKeyType.Done |
| enterKeyType | [EnterKeyType](#enterkeytype枚举说明) | 设置输入法回车键类型，目前OpenHarmony输入法仅支持默认类型显示。<br/>默认值：EnterKeyType.Done |
| caretColor | [ResourceColor](ts-types.md#resourcecolor) | 设置输入框光标颜色。 |
| maxLength | number | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被过滤的内容。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 |
| showPasswordIcon<sup>9+</sup> | boolean | 密码输入模式时，输入框末尾的图标是否显示。<br/>默认值：true |
| style<sup>9+</sup> | TextInputStyle | 设置输入框为默认风格或内联输入风格。<br/>默认值：TextInputStyle.Default |
| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9枚举说明) | 设置输入框为默认风格或内联输入风格。<br/>默认值：TextInputStyle.Default |
| textAlign<sup>9+</sup> | [TextAlign](ts-appendix-enums.md#textalign) | 设置输入文本在输入框中的对齐方式。<br/>默认值：TextAlign.Start |
## EnterKeyType枚举说明
......@@ -74,12 +74,12 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入内容发生变化时，触发该回调。 |
| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。 |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated)</sup> | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 |
| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 输入状态变化时，触发该回调。isEditing为true表示正在输入。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入内容发生变化时，触发该回调。<br/>value：输入的文本内容。 |
| onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。<br/>enterKeyType：输入法回车键类型。具体类型见[EnterKeyType枚举说明](#enterkeytype枚举说明)。 |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated)</sup> | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 |
| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 输入状态变化时，触发该回调。isEditing为true表示正在输入。 |
| onCopy(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。<br/>value：复制的文本内容。 |
| onCut(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。<br/>value：剪切的文本内容。 |
| onPaste(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。<br/>value：粘贴的文本内容。 |
......
zh-cn/application-dev/ui/ui-js-animate-component.md
浏览文件 @ a8b597fa
......@@ -33,28 +33,28 @@
```js
/* xxx.js */
export default {
data: {
animation: '',
},
onInit() {
},
onShow() {
var options = {
duration: 1500,
};
var frames = [
{
width:200,height:200,
},
{
width:300,height:300,
}
];
this.animation = this.$element('content').animate(frames, options); //获取动画对象
},
Show() {
this.animation.play();
}
data: {
animation: '',
options: {},
frames: {}
},
onInit() {
this.options = {
duration: 1500,
};
this.frames = [
{
width: 200, height: 200,
},
{
width: 300, height: 300,
}
];
},
Show() {
this.animation = this.$element('content').animate(this.frames, this.options); //获取动画对象
this.animation.play();
}
}
```
......@@ -172,36 +172,36 @@ export default {
```js
/* xxx.js */
export default {
data: {
animation: '',
},
onInit() {
},
onShow() {
var options = {
duration: 1500,
easing: 'ease-in',
delay: 5,
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-150px -0px'
}
},
{
transform: {
translate: '150px 0px'
}
}
];
this.animation = this.$element('content').animate(frames, options);
},
Show() {
this.animation.play();
}
data: {
animation: '',
options: {},
frames: {}
},
onInit() {
this.options = {
duration: 1500,
easing: 'ease-in',
delay: 5,
iterations: 2,
direction: 'normal',
};
this.frames = [
{
transform: {
translate: '-150px -0px'
}
},
{
transform: {
translate: '150px 0px'
}
}
];
},
Show() {
this.animation = this.$element('content').animate(this.frames, this.options);
this.animation.play();
}
}
```
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ a8b597fa
......@@ -38,8 +38,8 @@
height: 428px;
background-color: #860303;
transform: rotate(45deg);
margin-top: 284px;
margin-left: 148px;
margin-top: 290px;
margin-left: 145px;
}
.content{
margin-top: 500px;
......@@ -52,7 +52,7 @@
width: 100px;
height: 150px;
background-color: #1033d9;
transform: translate(150px,-137px);
transform: translate(150px,-152px);
}
.window{
z-index: 1;
......@@ -85,7 +85,7 @@
height: 100px;
border-radius: 15px;
background-color: #9a7404;
transform: translate(200px,-710px) skewX(-5deg);
transform: translate(200px,-700px) skewX(-5deg);
}
```
......
zh-cn/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ a8b597fa
......@@ -60,6 +60,8 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
justify-content: center;
align-items: center;
background-color: #F1F3F5;
width: 100%;
height: 100%;
}
canvas{
width: 500px;
......
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ a8b597fa
......@@ -14,7 +14,7 @@
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
<grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left:
10%;"></grid-row>
10%; margin-right: 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>
......@@ -51,11 +51,11 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
<grid-container id="mygrid" columns="6" 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%;"></grid-row>
40%; margin-right: 40%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
25%;"></grid-row>
25%; margin-right: 25%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left:
10%;"></grid-row>
10%; margin-right: 10%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
</grid-container>
</div>
......
zh-cn/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
浏览文件 @ a8b597fa
......@@ -77,7 +77,7 @@ onPageHide?(): void
onBackPress?(): void
当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由，返回false表示使用默认的路由返回逻辑。不设置返回值按照false处理。
当用户点击返回按钮时触发，仅@Entry修饰的自定义组件生效。
**示例2：**
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或