未验证 提交 ee70edb0 编写于 作者: O openharmony_ci 提交者: Gitee

!7305 update docs

Merge pull request !7305 from 关明月/OpenHarmony-3.1-Release
......@@ -38,11 +38,7 @@ matchMedia(condition: string): MediaQueryList
**示例:**
```
export default {
matchMedia() {
var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');
},
}
var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');
```
## MediaQueryEvent
......@@ -100,6 +96,11 @@ addListener(callback: (event: MediaQueryEvent) => void): void
**示例:**
```
function maxWidthMatch(){
if(e.mathes){
// do something
}
}
mMediaQueryList.addListener(maxWidthMatch);
```
......@@ -121,6 +122,11 @@ removeListener(callback: (event: MediaQueryEvent) => void): void
**示例:**
```
function maxWidthMatch(){
if(e.mathes){
// do something
}
}
mMediaQueryList.removeListener(maxWidthMatch);
```
......
......@@ -22,9 +22,9 @@
Text(content?: string)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| content | string | 否 | '' | 文本内容,包含子组件Span时不生效,显示Span内容。 |
| content | string | 否 | '' | 文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。 |
## 属性
......@@ -40,33 +40,33 @@ Text(content?: string)
| textCase | TextCase | TextCase.Normal | 设置文本大小写。 |
- TextAlign枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| Center | 文本居中对齐。 |
| Start | 根据文字书写相同的方向对齐。 |
| End | 根据文字书写相反的方向对齐。 |
| Center | 文本居中对齐。 |
| Start | 根据文字书写相同的方向对齐。 |
| End | 根据文字书写相反的方向对齐。 |
- TextOverflow枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| Clip | 文本超长时进行裁剪显示。 |
| Ellipsis | 文本超长时显示不下的文本用省略号代替。 |
| None | 文本超长时不进行裁剪。 |
| Clip | 文本超长时进行裁剪显示。 |
| Ellipsis | 文本超长时显示不下的文本用省略号代替。 |
| None | 文本超长时不进行裁剪。 |
- TextDecorationType枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| Underline | 文字下划线修饰。 |
| LineThrough | 穿过文本的修饰线。 |
| Overline | 文字上划线修饰。 |
| None | 不使用文本装饰线。 |
| Underline | 文字下划线修饰。 |
| LineThrough | 穿过文本的修饰线。 |
| Overline | 文字上划线修饰。 |
| None | 不使用文本装饰线。 |
- TextCase枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| Normal | 保持文本原有大小写。 |
| LowerCase | 文本采用全小写。 |
| UpperCase | 文本采用全大写。 |
| Normal | 保持文本原有大小写。 |
| LowerCase | 文本采用全小写。 |
| UpperCase | 文本采用全大写。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 不支持Text内同时存在文本内容和Span子组件。(如果同时存在,只显示Span内的内容)。
......
......@@ -251,7 +251,7 @@ struct MiterLimit {
```
@Entry
@Component
struct Font {
struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
......
......@@ -20,18 +20,18 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | 是 | - | 可变长参数,1个或者多个基础手势类型,这些手势会被组合识别。 |
- GestureMode枚举说明
| 名称 | 描述 |
| 名称 | 描述 |
| -------- | -------- |
| Sequence | 顺序识别,按照手势的注册顺序识别手势,直到所有手势识别成功。当有一个手势识别失败时,所有手势识别失败。 |
| Parallel | 并发识别,注册的手势同时识别,直到所有手势识别结束,手势识别互相不影响。 |
| Exclusive | 互斥识别,注册的手势同时识别,若有一个手势识别成功,则结束手势识别。 |
| Sequence | 顺序识别,按照手势的注册顺序识别手势,直到所有手势识别成功。当有一个手势识别失败时,所有手势识别失败。 |
| Parallel | 并发识别,注册的手势同时识别,直到所有手势识别结束,手势识别互相不影响。 |
| Exclusive | 互斥识别,注册的手势同时识别,若有一个手势识别成功,则结束手势识别。 |
## 事件
| 名称 | 功能描述 |
| 名称 | 功能描述 |
| -------- | -------- |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势(GestureMode.Sequence)取消后触发回调。 |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势(GestureMode.Sequence)取消后触发回调。 |
## 示例
......@@ -43,13 +43,13 @@ struct GestureGroupExample {
@State count: number = 0
@State offsetX: number = 0
@State offsetY: number = 0
@State borderStyle: BorderStyle = BorderStyle.Solid
@State borderStyles: BorderStyle = BorderStyle.Solid
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle })
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles })
.gesture(
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
......@@ -62,7 +62,7 @@ struct GestureGroupExample {
}),
PanGesture({})
.onActionStart(() => {
this.borderStyle = BorderStyle.Dashed
this.borderStyles = BorderStyle.Dashed
console.log('pan start')
})
.onActionUpdate((event: GestureEvent) => {
......
......@@ -259,7 +259,7 @@ struct MiterLimit {
```
@Entry
@Component
struct Font {
struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
......@@ -1877,12 +1877,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
### getImageData
......
......@@ -68,8 +68,8 @@ PageTransitionEnter和PageTransitionExit组件支持的事件:
@Entry
@Component
struct PageTransitionExample1 {
@State scale: number = 1
@State opacity: number = 1
@State scale1: number = 1
@State opacity1: number = 1
@State active: boolean = false
build() {
Column() {
......@@ -79,19 +79,19 @@ struct PageTransitionExample1 {
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale }).opacity(this.opacity)
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
// 自定义方式1:完全自定义转场过程的效果
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale = 1
this.opacity = progress
this.scale1 = 1
this.opacity1 = progress
}) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress
this.opacity = 1
this.scale1 = 1 - progress
this.opacity1 = 1
}) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
}
}
......@@ -102,27 +102,27 @@ struct PageTransitionExample1 {
@Entry
@Component
struct AExample {
@State scale: number = 1
@State opacity: number = 1
@State scale2: number = 1
@State opacity2: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/index' ,type: NavigationType.Push}) {
Image($r('app.media.bg2')).width("100%").height("100%")
}
}.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity)
}.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2)
}
// 自定义方式1:完全自定义转场过程的效果
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale = 1
this.opacity = progress
this.scale2 = 1
this.opacity2 = progress
}) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress
this.opacity = 1
this.scale2 = 1 - progress
this.opacity2 = 1
}) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
}
}
......@@ -137,8 +137,8 @@ struct AExample {
@Entry
@Component
struct PageTransitionExample {
@State scale: number = 1
@State opacity: number = 1
@State scale1: number = 1
@State opacity1: number = 1
@State active: boolean = false
build() {
......@@ -149,7 +149,7 @@ struct PageTransitionExample {
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale }).opacity(this.opacity)
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
// 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等)
......@@ -168,8 +168,8 @@ struct PageTransitionExample {
@Entry
@Component
struct PageTransitionExample1 {
@State scale: number = 1
@State opacity: number = 1
@State scale2: number = 1
@State opacity2: number = 1
@State active: boolean = false
build() {
......@@ -180,7 +180,7 @@ struct PageTransitionExample1 {
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale }).opacity(this.opacity)
}.scale({ x: this.scale2 }).opacity(this.opacity2)
}
// 自定义方式2:使用系统提供的多种默认效果(平移、缩放、透明度等)
......
......@@ -11,9 +11,9 @@
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| -------- | -------- | -------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 |
| 名称 | 支持冒泡 | 功能描述 |
| -------- | -------- | -------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 |
## 示例
......@@ -23,7 +23,7 @@
@Component
struct AreaExample {
@State value: string = 'Text'
@State size: string = ''
@State size1: string = ''
build() {
Column() {
......@@ -34,7 +34,7 @@ struct AreaExample {
})
.onAreaChange((oldValue: Area, newValue: Area) => {
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.size = JSON.stringify(newValue)
this.size1 = JSON.stringify(newValue)
})
Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册