Skip to content

D
Docs

Tonvia / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 0
Fork 0
D
Docs

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

提交 c6989c15 编写于 作者: W wangshuainan
浏览文件
操作

修改docs文档 

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>
上级 bdb74e0c
隐藏空白更改
内联 并排
Showing with 115 addition and 53 deletion
zh-cn/application-dev/reference/apis/js-apis-prompt.md
浏览文件 @ c6989c15
......@@ -35,6 +35,8 @@ prompt.showToast({
});
```
![zh-cn_image_0001](figures/zh-cn_image_0001.gif)
## ShowToastOptions
文本提示框的选项。
......@@ -92,6 +94,8 @@ prompt.showDialog({
})
```
![zh-cn_image_0002](figures/zh-cn_image_0002.gif)
## prompt.showDialog
showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSuccessResponse&gt;):void
......@@ -132,6 +136,8 @@ prompt.showDialog({
});
```
![zh-cn_image_0004](figures/zh-cn_image_0004.gif)
## ShowDialogOptions
对话框的选项。
......@@ -170,7 +176,6 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu
| options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 |
| callback | AsyncCallback&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | 是 | 菜单响应结果回调。 |
**示例：**
```js
......@@ -195,6 +200,8 @@ prompt.showActionMenu({
})
```
![zh-cn_image_0005](figures/zh-cn_image_0005.gif)
## prompt.showActionMenu
showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse&gt;
......@@ -238,6 +245,8 @@ prompt.showActionMenu({
console.info('showActionMenu error: ' + err);
})
```
![zh-cn_image_0006](figures/zh-cn_image_0006.gif)
## ActionMenuOptions
操作菜单的选项。
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md
浏览文件 @ c6989c15
# piece
一种块状的入口，可包含图片和文本，常用于展示收件人。例如，邮件收件人或信息收件人。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
## 子组件
......@@ -15,11 +15,11 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | ----- | ---- | ---------------------------------------- |
| content | string | - | 是 | 操作块文本内容。 |
| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 |
| icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | ------- | ---- | ------------------------------------------------------------ |
| content | string | 是 | 操作块文本内容。 |
| closable | boolean | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。<br/>默认值：false |
| icon | string | 否 | 操作块删除图标的url，支持本地路径。 |
## 样式
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ c6989c15
......@@ -27,7 +27,7 @@ Image(src: string | PixelMap | Resource)
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
## 属性
......@@ -348,3 +348,53 @@ struct ImageExample3 {
```
![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif)
### 渲染沙箱路径图片
```
import fileio from '@ohos.fileio';
import image from '@ohos.multimedia.image';
const EMPTY_PATH = 'file://';
@Entry
@Component
struct LoadImageExample {
@State fileContent: string = '';
@State path: string = EMPTY_PATH;
@State accountInfoHeadPic: any = '';
build() {
Column() {
Button('读取沙箱图片')
.margin({ bottom: 10 })
.onClick(() => {
try {
this.path = EMPTY_PATH;
let context = getContext(this);
let path = context.getApplicationContext().filesDir + '/icon.png';
console.log(`读取沙箱图片=========>${path}`);
let fd = fileio.openSync(path, 0o100, 0o666);
console.log(`create file========>${fd}`);
let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png';
fileio.copyFileSync(srcPath, path);
console.log(`error:=============>${e.message}`);
}
})
Button('读取资源图片')
.margin({ bottom: 10 })
.onClick(() => {
this.path = EMPTY_PATH;
this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png');
})
Text(`图片路径:${this.path}`)
.fontSize(20)
.margin({ bottom: 10 })
Image(this.path)
.width(100)
.height(100)
}
.width('100%').height('100%')
}
}
```
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ c6989c15
......@@ -56,7 +56,7 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。<br/>mode：拖动状态。 |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。<br/>mode：拖动状态。 |
## SliderChangeMode枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ c6989c15
......@@ -771,7 +771,7 @@ clearRect(x: number, y: number, w: number, h: number): void
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.backgroundColor('#ffffff')
.onReady(() =>{
this.context.fillStyle = 'rgb(0,0,255)'
this.context.fillRect(0,0,500,500)
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ c6989c15
......@@ -47,7 +47,6 @@ show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp
@Entry
@Component
struct ActionSheetExample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Click to Show ActionSheet')
......@@ -58,26 +57,26 @@ struct ActionSheetExample {
confirm: {
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled')
console.log('Get Alert Dialog handled');
}
},
sheets: [
{
title: 'apples',
action: () => {
console.error('apples')
console.log('apples');
}
},
{
title: 'bananas',
action: () => {
console.error('bananas')
console.log('bananas');
}
},
{
title: 'pears',
action: () => {
console.error('pears')
console.log('pears');
}
}
]
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ c6989c15
......@@ -23,7 +23,7 @@
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default |
| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。<br/>**说明：**<br/>当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 |
## AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ c6989c15
......@@ -28,18 +28,18 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
## DialogAlignment枚举说明
| 名称 | 描述 |
| ------------------------ | ------- |
| Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 |
| Default | 默认对齐。 |
| TopStart<sup>8+</sup> | 左上对齐。 |
| TopEnd<sup>8+</sup> | 右上对齐。 |
| CenterStart<sup>8+</sup> | 左中对齐。 |
| CenterEnd<sup>8+</sup> | 右中对齐。 |
| BottomStart<sup>8+</sup> | 左下对齐。 |
| BottomEnd<sup>8+</sup> | 右下对齐。 |
| 名称 | 描述 |
| ------------------------ | ------------------------------------------------------ |
| Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 |
| Default | 默认对齐。<br/>**说明：**<br/>与枚举值Center效果相同。 |
| TopStart<sup>8+</sup> | 左上对齐。 |
| TopEnd<sup>8+</sup> | 右上对齐。 |
| CenterStart<sup>8+</sup> | 左中对齐。 |
| CenterEnd<sup>8+</sup> | 右中对齐。 |
| BottomStart<sup>8+</sup> | 左下对齐。 |
| BottomEnd<sup>8+</sup> | 右下对齐。 |
## CustomDialogController
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ c6989c15
......@@ -17,13 +17,13 @@ show(options?: TimePickerDialogOptions)
定义时间滑动选择器弹窗并弹出。
- options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
| useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 |
| useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。<br/>默认值：false |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 |
## 示例
......@@ -33,22 +33,24 @@ show(options?: TimePickerDialogOptions)
@Entry
@Component
struct TimePickerDialogExample01 {
@State isUseMilitaryTime: boolean = true
@State isUseMilitaryTime: boolean = true;
private selectTime: Date = new Date('7/22/2022 12:45:00');
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
Button("TimePickerDialog").onClick(() => {
TimePickerDialog.show({
selected:this.selectTime,
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
console.info("TimePickerDialog:onCancel()");
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
}
})
})
......@@ -62,7 +64,7 @@ struct TimePickerDialogExample01 {
@Entry
@Component
struct TimePickerDialogExample02 {
@State isUseMilitaryTime: boolean = false
@State isUseMilitaryTime: boolean = false;
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
......@@ -74,10 +76,10 @@ struct TimePickerDialogExample02 {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
console.info("TimePickerDialog:onCancel()");
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
}
})
})
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ c6989c15
......@@ -14,14 +14,14 @@
## BorderImageOption对象说明
| 名称 | 类型 | 描述 |
| ---------- | ---------------------------------------- | --------------------------------------- |
| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。 |
| slice | [Length](ts-types.md#length)\| EdgeWidths | 设置图片边框切割宽度。<br/>默认值：0 |
| width | [Length](ts-types.md#length)\| EdgeWidths | 设置图片边框宽度。<br/>默认值：0 |
| outset | [Length](ts-types.md#length)\| EdgeWidths | 设置边框图片向外延伸距离。<br/>默认值：0 |
| RepeatMode | RepeatMode | 设置边框图片的重复方式。<br/>默认值：RepeatMode.Stretch |
| fill | boolean | 设置边框图片中心填充。<br/>默认值：false |
| 名称 | 类型 | 描述 |
| ---------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。 |
| slice | [Length](ts-types.md#length)\| EdgeWidths | 设置图片边框切割宽度。<br/>**说明：**<br/>切分过程会将图像分割为9个区域：四个角、四个边以及中心区域。四个角的区域，用于组成最终图片边框图像的四个角；四个边区域，在最终的边框图像中重复、缩放或修改它们以匹配元素的大小；中心区域默认情况下会被丢弃，不进行填充。<br/>默认值：0 |
| width | [Length](ts-types.md#length)\| EdgeWidths | 设置图片边框宽度。<br/>默认值：0 |
| outset | [Length](ts-types.md#length)\| EdgeWidths | 设置边框图片向外延伸距离。<br/>默认值：0 |
| RepeatMode | RepeatMode | 设置边框图片的重复方式。<br/>默认值：RepeatMode.Stretch |
| fill | boolean | 设置边框图片中心填充。<br/>默认值：false |
## EdgeWidths对象说明
......
zh-cn/application-dev/ui/ts-component-creation-re-initialization.md
浏览文件 @ c6989c15
......@@ -56,10 +56,10 @@ struct ParentComp {
Column() {
Text(this.isCountDown ? 'Count Down' : 'Stopwatch')
if (this.isCountDown) {
Image('countdown.png')
Image($r("app.media.countdown")).width(200).height(200)
TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red})
} else {
Image('stopwatch.png')
Image($r("app.media.stopwatch")).width(200).height(200)
TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
}
Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down')
......@@ -93,3 +93,5 @@ struct TimerComponent {
}
}
```
![](figures/zh-cn_image_0000001118642023.gif)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或