Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 57198acd 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 aba5d9c1
隐藏空白更改
内联 并排
Showing with 406 addition and 422 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ 57198acd
...@@ -120,252 +120,232 @@ ...@@ -120,252 +120,232 @@
## 示例 ## 示例
1. 文本选择器 ### 文本选择器
```html
<!-- xxx.hml --> ```html
<div class="container"> <!-- xxx.hml -->
<text class="title"> <div class="container">
选中值：{{value}} 选中下标： {{index}} <text class="title">
</text> 选中值：{{value}} 选中下标： {{index}}
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view> </text>
</div> <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
``` </div>
```
```css
/* xxx.css */ ```css
.container { /* xxx.css */
flex-direction: column; .container {
justify-content: center; flex-direction: column;
align-items: center; justify-content: center;
left: 0px; align-items: center;
top: 0px; width: 100%;
width: 454px; height: 50%;
height: 454px; }
} .title {
.title { font-size: 30px;
font-size: 30px; text-align: center;
text-align: center; margin-top: 50%;
margin-top: 20px; }
} ```
```
```js
```js /* xxx.js */
/* xxx.js */ export default {
export default { data: {
data: { options: ['选项1', '选项2', '选项3'],
options: ['选项1', '选项2', '选项3'], value: "选项1",
value: "选项1", index: 0
index: 0 },
}, handleChange(data) {
handleChange(data) { this.value = data.newValue;
this.value = data.newValue; this.index = data.newSelected;
this.index = data.newSelected; },
}, }
} ```
``` ![picker-view0](figures/pickerview1.gif)
![](figures/pickerview1.gif)
### 时间选择器
2. 时间选择器
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
Selected：{{time}} Selected：{{time}}
</text> </text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; width: 100%;
top: 0px; height: 50%;
width: 454px; }
height: 454px; .title {
} font-size: 31px;
.title { text-align: center;
font-size: 30px; margin-top: 50%;
text-align: center; }
} ```
.time-picker {
width: 500px; ```js
height: 400px; /* xxx.js */
margin-top: 20px; export default {
} data: {
``` defaultTime: "",
time: "",
```js },
/* xxx.js */ onInit() {
export default { this.defaultTime = this.now();
data: { },
defaultTime: "", handleChange(data) {
time: "", this.time = this.concat(data.hour, data.minute);
}, },
onInit() { now() {
this.defaultTime = this.now(); const date = new Date();
}, const hours = date.getHours();
handleChange(data) { const minutes = date.getMinutes();
this.time = this.concat(data.hour, data.minute); return this.concat(hours, minutes);
}, },
now() { fill(value) {
const date = new Date(); return (value > 9 ? "" : "0") + value;
const hours = date.getHours(); },
const minutes = date.getMinutes(); concat(hours, minutes) {
return this.concat(hours, minutes); return `${this.fill(hours)}:${this.fill(minutes)}`;
}, },
fill(value) { }
return (value > 9 ? "" : "0") + value; ```
},
concat(hours, minutes) { ![picker-view1](figures/pickerview2.gif)
return `${this.fill(hours)}:${this.fill(minutes)}`;
}, ### 日期选择器
}
``` ```html
<!-- xxx.hml -->
![](figures/pickerview2.gif) <div class="container">
<text class="title">
3. 日期选择器 Selected：{{date}}
```html </text>
<!-- xxx.hml --> <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
<div class="container"> </div>
<text class="title"> ```
Selected：{{time}}
</text> ```css
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> /* xxx.css */
</div> .container {
``` flex-direction: column;
justify-content: center;
```css align-items: center;
/* xxx.css */ width: 100%;
.container { height: 50%;
flex-direction: column; }
justify-content: center; .title {
align-items: center; font-size: 31px;
left: 0px; text-align: center;
top: 0px; margin-top: 50%;
width: 454px; }
height: 454px; ```
}
.title { ```js
font-size: 30px; /* xxx.js */
text-align: center; export default {
margin-top: 20px; data: {
} date: "",
.date-picker { },
width: 500px; handleChange(data) {
height: 400px; this.date = data.year + "年" + data.month + "月" + data.day + "日";
margin-top: 50px; },
} }
``` ```
![picker-view2](figures/pickerview3.gif)
```js
/* xxx.js */ ### 日期时间选择器
export default {
data: { ```html
date: "", <!-- xxx.hml -->
}, <div class="container">
handleChange(data) { <text class="title">
this.date = data.year + "年" + data.month + "月" + data.day + "日"; Selected：{{datetime}}
}, </text>
} <picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
``` </div>
![](figures/pickerview3.gif) ```
4. 日期时间选择器 ```css
```html /* xxx.css */
<!-- xxx.hml --> .container {
<div class="container"> flex-direction: column;
<text class="title"> justify-content: center;
Selected：{{datetime}} align-items: center;
</text> width: 100%;
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view> height: 50%;
</div> }
``` .title {
font-size: 31px;
```css text-align: center;
/* xxx.css */ margin-top: 50%;
.container { }
flex-direction: column; ```
justify-content: center;
align-items: center; ```js
left: 0px; /* xxx.js */
top: 0px; export default {
width: 500px; data: {
height: 454px; datetime: "",
} },
.title { handleChange(data) {
font-size: 30px; this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分";
text-align: center; },
margin-top: 20px; }
} ```
.date-picker { ![picker-view3](figures/pickerview4.gif)
width: 500px;
height: 400px; ### 多列文本选择器
margin-top: 50px;
} ```html
``` <!-- xxx.hml -->
<div class="container">
```js <text class="title">
/* xxx.js */ Selected：{{ value }}
export default { </text>
data: { <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
datetime: "", </div>
}, ```
handleChange(data) {
this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分"; ```css
}, /* xxx.css */
} .container {
``` flex-direction: column;
![](figures/pickerview4.gif) justify-content: center;
align-items: center;
5. 多列文本选择器 width: 100%;
height: 50%;
```html }
<!-- xxx.hml --> .title {
<div class="container"> font-size: 31px;
<text class="title"> text-align: center;
Selected：{{ value }} margin-top: 50%;
</text> }
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view> ```
</div>
``` ```js
/* xxx.js */
```css export default {
/* xxx.css */ data: {
.container { multitext: [
flex-direction: column; [1, 2, 3],
justify-content: center; [4, 5, 6],
align-items: center; [7, 8, 9],
left: 0px; ],
top: 0px; value: ""
width: 500px; },
height: 454px; handleChange(data) {
} this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected;
.title { },
font-size: 30px; }
text-align: center; ```
margin-top: 20px; ![picker-view4](figures/pickerview5.gif)
} \ No newline at end of file
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected;
},
}
```
![](figures/pickerview5.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 57198acd
...@@ -75,8 +75,7 @@ ...@@ -75,8 +75,7 @@
支持[通用方法](../arkui-js/js-components-common-methods.md)。 支持[通用方法](../arkui-js/js-components-common-methods.md)。
## 示例 ## 示例​
1.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -137,5 +136,5 @@ ...@@ -137,5 +136,5 @@
``` ```
![zh-cn_image_0000001167823076](figures/text.png) ![zh-cn_image_0000001167823076](figures/js-text.png)
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 57198acd
...@@ -1025,7 +1025,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1025,7 +1025,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div> </div>
``` ```
......
zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md
浏览文件 @ 57198acd
# list-item-group # list-item-group
> **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
&lt;[list](../arkui-js/js-components-container-list.md)&gt;的子组件，用来展示分组，宽度默认充满list组件。 &lt;[list](../arkui-js/js-components-container-list.md)&gt;的子组件，用来展示分组，宽度默认充满list组件。
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
> **说明：** > **说明：**
> >
> - 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。 > - 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。
## 样式 ## 样式
...@@ -125,48 +125,55 @@ ...@@ -125,48 +125,55 @@
// xxx.js // xxx.js
import promptAction from '@ohos.promptAction'; import promptAction from '@ohos.promptAction';
export default { export default {
data: { data: {
direction: 'column', direction: 'column',
list: [], list: [],
listAdd: [] listAdd: []
}, },
onInit() { onInit() {
this.list = [] this.list = []
this.listAdd = [] this.listAdd = []
for (var i = 1; i <= 3; i++) { for (var i = 1; i <= 3; i++) {
var dataItem = { var dataItem = {
value: 'GROUP' + i, value: 'GROUP' + i,
}; };
this.list.push(dataItem); this.list.push(dataItem);
}
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup({
groupid: ''
})
},
expandAll(e) {
this.$element('mylist').expandGroup({
groupid: ''
})
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
} }
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup()
},
expandAll(e) {
this.$element('mylist').expandGroup()
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
}
} }
``` ```
![zh-cn_image_0000001127284978](figures/zh-cn_image_0000001127284978.gif) ![zh-cn_image_0000001127284978](figures/zh-cn_image_0000001127284978.gif)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 57198acd
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
> **说明：** > **说明：**
> >
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件 ## 子组件
...@@ -19,36 +19,36 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -19,36 +19,36 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date})
根据指定范围的Date创建可以选择日期的滑动选择器。 根据指定范围的Date创建可以选择日期的滑动选择器。
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ------------- | -------- | | -------- | ---- | ---- | -------------------------------------- |
| start | Date | 否 | 指定选择器的起始日期。<br/>默认值：Date('1970-1-1') | | start | Date | 否 | 指定选择器的起始日期。<br/>默认值：Date('1970-1-1') |
| end | Date | 否 | 指定选择器的结束日期。<br/>默认值：Date('2100-12-31') | | end | Date | 否 | 指定选择器的结束日期。<br/>默认值：Date('2100-12-31') |
| selected | Date | 否 | 设置选中项的日期。<br/>默认值：当前系统日期 | | selected | Date | 否 | 设置选中项的日期。<br/>默认值：当前系统日期 |
## 属性 ## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ------| -------------- | -------- | | ----- | ------- | ---------------------------------------- |
| lunar | boolean | 日期是否显示农历。<br/>-&nbsp;true：展示农历。<br/>-&nbsp;false：不展示农历。<br/>默认值：false | | lunar | boolean | 日期是否显示农历。<br/>-&nbsp;true：展示农历。<br/>-&nbsp;false：不展示农历。<br/>默认值：false |
## 事件 ## 事件
除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ----------- |
| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期时触发该事件。 | | onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期时触发该事件。 |
## DatePickerResult对象说明 ## DatePickerResult对象说明
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | ----- | ------ | --------------------------- |
| year | number | 选中日期的年。 | | year | number | 选中日期的年。 |
| month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 | | month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 |
| day | number | 选中日期的日。 | | day | number | 选中日期的日。 |
## 示例 ## 示例
...@@ -65,7 +65,7 @@ struct DatePickerExample { ...@@ -65,7 +65,7 @@ struct DatePickerExample {
build() { build() {
Column() { Column() {
Button('切换公历农历') Button('切换公历农历')
.margin({ top: 30 }) .margin({ top: 30 ,bottom: 30})
.onClick(() => { .onClick(() => {
this.isLunar = !this.isLunar this.isLunar = !this.isLunar
}) })
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 57198acd
...@@ -21,86 +21,86 @@ Navigation() ...@@ -21,86 +21,86 @@ Navigation()
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | | ----------------------------- | ---------------------------------------- | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>&nbsp;\|&nbsp;[NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup>&nbsp;\|&nbsp;[NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。 | | title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>&nbsp;\|&nbsp;[NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup>&nbsp;\|&nbsp;[NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。 |
| subTitle<sup>deprecated</sup> | string | 页面副标题。从API Version 9开始废弃，建议使用title代替。 | | subTitle<sup>deprecated</sup> | string | 页面副标题。从API Version 9开始废弃，建议使用title代替。 |
| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 | | menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。使用Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 |
| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free | | titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
| toolBar | [object](#object类型说明)&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>items:&nbsp;工具栏所有项。<br/>**说明：** <br/>items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。 | | toolBar | [object](#object类型说明)&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。不设置时不显示工具栏。<br/>items:&nbsp;工具栏所有项。<br/>**说明：** <br/>items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，最后...截断。 |
| hideToolBar | boolean | 隐藏工具栏。<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 | | hideToolBar | boolean | 隐藏工具栏。<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false<br/>true:&nbsp;隐藏标题栏。<br/>false:&nbsp;显示标题栏。 | | hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false<br/>true:&nbsp;隐藏标题栏。<br/>false:&nbsp;显示标题栏。 |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false<br/>true:&nbsp;隐藏返回键。<br/>false:&nbsp;显示返回键。 <br>不支持隐藏NavDestination组件标题栏中的返回图标。<br/>**说明：** <br/>返回键键仅针对titleMode为NavigationTitleMode.Mini时才生效。 | | hideBackButton | boolean | 隐藏返回键。<br/>默认值：false<br/>true:&nbsp;隐藏返回键。<br/>false:&nbsp;显示返回键。 <br>不支持隐藏NavDestination组件标题栏中的返回图标。<br/>**说明：** <br/>返回键键仅针对titleMode为NavigationTitleMode.Mini时才生效。 |
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | 导航栏宽度。<br/>默认值：200<br/>单位：vp<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 | | navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | 导航栏宽度。<br/>默认值：200<br/>单位：vp<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 |
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。<br/>默认值：NavBarPosition.Start<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 | | navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition枚举说明) | 导航栏位置。<br/>默认值：NavBarPosition.Start<br/>**说明：** <br/>仅在Navigation组件分栏时生效。 |
| mode<sup>9+</sup> | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。<br/>默认值：NavigationMode.Auto<br/>自适应：基于组件宽度自适应单栏和双栏。 | | mode<sup>9+</sup> | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。<br/>默认值：NavigationMode.Auto<br/>自适应：基于组件宽度自适应单栏和双栏。 |
| backButtonIcon<sup>9+</sup> | string&nbsp;\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。| | backButtonIcon<sup>9+</sup> | string&nbsp;\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。 |
| hideNavBar<sup>9+</sup> | boolean | 是否显示导航栏（仅在mode为NavigationMode.Split时生效）。 | | hideNavBar<sup>9+</sup> | boolean | 是否显示导航栏（仅在mode为NavigationMode.Split时生效）。 |
## NavigationMenuItem类型说明 ## NavigationMenuItem类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ | | ------ | ----------------------- | ---- | --------------- |
| value | string | 是 | 菜单栏单个选项的显示文本。 | | value | string | 是 | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | | icon | string | 否 | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 | | action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## object类型说明 ## object类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ | | ------ | ----------------------- | ---- | --------------- |
| value | string | 是 | 工具栏单个选项的显示文本。 | | value | string | 是 | 工具栏单个选项的显示文本。 |
| icon | string | 否 | 工具栏单个选项的图标资源路径。 | | icon | string | 否 | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 | | action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## NavigationTitleMode枚举说明 ## NavigationTitleMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---- | ---------------------------------------- | | ---- | ---------------------------------------- |
| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
| Mini | 固定为小标题模式。 | | Mini | 固定为小标题模式。 |
| Full | 固定为大标题模式。 | | Full | 固定为大标题模式。 |
## NavigationCommonTitle类型说明 ## NavigationCommonTitle类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | --------- | ---- | -------- | | ---- | ------ | ---- | ------ |
| main | string | 是 | 设置主标题。 | | main | string | 是 | 设置主标题。 |
| sub | string | 是 | 设置副标题。 | | sub | string | 是 | 设置副标题。 |
## NavigationCustomTitle类型说明 ## NavigationCustomTitle类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ | | ------- | ---------------------------------------- | ---- | -------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | | builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 |
| height | [TitleHeight](#titleheight枚举说明)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 是 | 设置标题栏高度。 | | height | [TitleHeight](#titleheight枚举说明)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 是 | 设置标题栏高度。 |
## NavBarPosition枚举说明 ## NavBarPosition枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---- | ---------------------------------------- | | ----- | ---------------- |
| Start | 双栏显示时，主列在主轴方向首部。 | | Start | 双栏显示时，主列在主轴方向首部。 |
| End | 双栏显示时，主列在主轴方向尾部。 | | End | 双栏显示时，主列在主轴方向尾部。 |
## NavigationMode枚举说明 ## NavigationMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---- | ---------------------------------------- | | ----- | ---------------------------------------- |
| Stack | 导航栏与内容区独立显示，相当于两个页面。 | | Stack | 导航栏与内容区独立显示，相当于两个页面。 |
| Split | 导航栏与内容区分两栏显示。 | | Split | 导航栏与内容区分两栏显示。 |
| Auto | 窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。 | | Auto | 窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。 |
## TitleHeight枚举说明 ## TitleHeight枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---- | ---------------------------------------- | | ----------- | -------------------------- |
| MainOnly | 只有主标题时标题栏的推荐高度（56vp）。 | | MainOnly | 只有主标题时标题栏的推荐高度（56vp）。 |
| MainWithSub | 同时有主标题和副标题时标题栏的推荐高度（82vp）。 | | MainWithSub | 同时有主标题和副标题时标题栏的推荐高度（82vp）。 |
> **说明：** > **说明：**
> 目前可滚动组件只支持List。 > 目前可滚动组件只支持List。
## 事件 ## 事件
...@@ -147,7 +147,7 @@ struct NavigationExample { ...@@ -147,7 +147,7 @@ struct NavigationExample {
.fontSize(14) .fontSize(14)
.lineHeight(19) .lineHeight(19)
.opacity(0.4) .opacity(0.4)
.margin({ top: 2 }) .margin({ top: 2, bottom: 20 })
}.alignItems(HorizontalAlign.Start) }.alignItems(HorizontalAlign.Start)
} }
...@@ -192,7 +192,7 @@ struct NavigationExample { ...@@ -192,7 +192,7 @@ struct NavigationExample {
Column() { Column() {
Navigation() { Navigation() {
TextInput({ placeholder: 'search...' }) TextInput({ placeholder: 'search...' })
.width(336) .width('90%')
.height(40) .height(40)
.backgroundColor('#FFFFFF') .backgroundColor('#FFFFFF')
.margin({ top: 8 }) .margin({ top: 8 })
...@@ -201,7 +201,7 @@ struct NavigationExample { ...@@ -201,7 +201,7 @@ struct NavigationExample {
ForEach(this.arr, (item) => { ForEach(this.arr, (item) => {
ListItem() { ListItem() {
Text('' + item) Text('' + item)
.width(336) .width('90%')
.height(72) .height(72)
.backgroundColor('#FFFFFF') .backgroundColor('#FFFFFF')
.borderRadius(24) .borderRadius(24)
...@@ -212,8 +212,8 @@ struct NavigationExample { ...@@ -212,8 +212,8 @@ struct NavigationExample {
}, item => item) }, item => item)
} }
.height(324) .height(324)
.width(336) .width('100%')
.margin({ top: 12 }) .margin({ top: 12, left: '10%' })
} }
.title(this.NavigationTitle) .title(this.NavigationTitle)
.menus(this.NavigationMenus) .menus(this.NavigationMenus)
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md
浏览文件 @ 57198acd
...@@ -20,18 +20,18 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -20,18 +20,18 @@ Rating(options?: { rating: number, indicator?: boolean })
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | --------- | ------- | ---- | ---------------------------------------- |
| rating | number | 是 | 设置并接收评分值。<br/>默认值：0<br/>取值范围： [0, stars]<br/>小于0取0，大于stars取最大值stars。 | | rating | number | 是 | 设置并接收评分值。<br/>默认值：0<br/>取值范围： [0, stars]<br/>小于0取0，大于stars取最大值stars。 |
| indicator | boolean | 否 | 设置评分组件作为指示器使用，不可改变评分。<br/>默认值：false, 可进行评分<br/>**说明：** <br/>indicator=true时，默认组件高度height=12.0vp，组件width=height*stars。<br/>indicator=false时，默认组件高度height=28.0vp，组件width=height*stars。 | | indicator | boolean | 否 | 设置评分组件作为指示器使用，不可改变评分。<br/>默认值：false, 可进行评分<br/>**说明：** <br/>indicator=true时，默认组件高度height=12.0vp，组件width=height*stars。<br/>indicator=false时，默认组件高度height=28.0vp，组件width=height*stars。 |
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| stars | number | 设置评分总数。<br/>默认值：5 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按默认值显示。 | | stars | number | 设置评分总数。<br/>默认值：5 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按默认值显示。 |
| stepSize | number | 操作评级的步长。<br/>默认值：0.5 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按默认值显示。<br/>取值范围为[0.1, stars]。 | | stepSize | number | 操作评级的步长。<br/>默认值：0.5 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按默认值显示。<br/>取值范围为[0.1, stars]。 |
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。<br/>foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>secondaryUir：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>startStyle属性所支持的图片类型能力参考[Image](ts-basic-components-image.md)组件。<br/>支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。<br/>默认图片加载方式为异步，暂不支持同步加载。<br/>设置值为undefined或者空字符串时，rating会选择加载系统默认星型图源。 | | starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。<br/>foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>secondaryUir：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>startStyle属性所支持的图片类型能力参考[Image](ts-basic-components-image.md)组件。<br/>支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。<br/>默认图片加载方式为异步，暂不支持同步加载。<br/>设置值为undefined或者空字符串时，rating会选择加载系统默认星型图源。 |
> **说明：** > **说明：**
...@@ -43,8 +43,8 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -43,8 +43,8 @@ Rating(options?: { rating: number, indicator?: boolean })
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onChange(callback:(value:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 操作评分条的评星发生改变时触发该回调。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | | onChange(callback:(value:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 操作评分条的评星发生改变时触发该回调。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
## 示例 ## 示例
...@@ -86,7 +86,7 @@ struct RatingExample { ...@@ -86,7 +86,7 @@ struct RatingExample {
.fontColor('#182431') .fontColor('#182431')
.fontWeight(500) .fontWeight(500)
Row() { Row() {
Rating({ rating: 3.5, indicator: true }).margin({ top: 1, right: 8 }) Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
Text('2021/06/02') Text('2021/06/02')
.fontSize(10) .fontSize(10)
.fontColor('#182431') .fontColor('#182431')
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 57198acd
...@@ -20,16 +20,16 @@ TimePicker(options?: {selected?: Date}) ...@@ -20,16 +20,16 @@ TimePicker(options?: {selected?: Date})
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | ---- | ---- | ------------------------ |
| selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 | | selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 |
## 属性 ## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | --------------- | ------- | ----------------------------------- |
| useMilitaryTime | boolean | 展示时间是否为24小时制，不支持动态修改。<br/>默认值：false | | useMilitaryTime | boolean | 展示时间是否为24小时制，不支持动态修改。<br/>默认值：false |
## 事件 ## 事件
...@@ -50,9 +50,6 @@ TimePicker(options?: {selected?: Date}) ...@@ -50,9 +50,6 @@ TimePicker(options?: {selected?: Date})
## 示例 ## 示例
### 时间选择器
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 57198acd
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
> **说明：** > **说明：**
> >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 接口 ## 接口
...@@ -12,23 +12,23 @@ ...@@ -12,23 +12,23 @@
GestureGroup(mode: GestureMode, ...gesture: GestureType[]) GestureGroup(mode: GestureMode, ...gesture: GestureType[])
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
| mode | [GestureMode](#gesturemode枚举说明) | 是 | - | 设置组合手势识别模式。 | | mode | [GestureMode](#gesturemode枚举说明) | 是 | - | 设置组合手势识别模式。 |
| 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个或者多个基础手势类型，这些手势会被组合识别。 | | 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枚举说明 ## GestureMode枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | --------- | ---------------------------------------- |
| Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 | | Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 |
| Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 | | Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 |
| Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 | | Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------------------------ |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 | | onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 |
...@@ -49,6 +49,7 @@ struct GestureGroupExample { ...@@ -49,6 +49,7 @@ struct GestureGroupExample {
build() { build() {
Column() { Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
.fontSize(15)
} }
.translate({ x: this.offsetX, y: this.offsetY, z: 0 }) .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(150) .height(150)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 57198acd
...@@ -30,10 +30,10 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle ...@@ -30,10 +30,10 @@ Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: Fle
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- | | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 | | direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。<br/>**说明：** <br/>在多行布局时，通过交叉轴方向，确认新行堆叠方向。 | | wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。<br/>**说明：** <br/>在多行布局时，通过交叉轴方向，确认新行堆叠方向。 |
| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 所有子组件在Flex容器主轴上的对齐格式。 | | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 所有子组件在Flex容器主轴上的对齐格式。 |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | 否 | ItemAlign.Start | 所有子组件在Flex容器交叉轴上的对齐格式。 | | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | 否 | ItemAlign.Start | 所有子组件在Flex容器交叉轴上的对齐格式。 |
| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 | | alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
...@@ -244,7 +244,7 @@ struct FlexExample4 { ...@@ -244,7 +244,7 @@ struct FlexExample4 {
} }
``` ```
![zh-cn_image_0000001174422904](figures/zh-cn_image_0000001174422904.jpg) ![zh-cn_image_0000001174422904](figures/zh-cn_image_0000001174422904.png)
```ts ```ts
// xxx.ets // xxx.ets
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 57198acd
...@@ -10,34 +10,34 @@ ...@@ -10,34 +10,34 @@
## 接口 ## 接口
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ---------- | ------------------------------------- | --------------------------------------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;[PopupOptions](#popupoptions类型说明)&nbsp;\|&nbsp;[CustomPopupOptions](#custompopupoptions8类型说明)<sup>8+</sup> | 给组件绑定Popup弹窗，设置参数show为true弹出弹框。<br/>show:&nbsp;弹窗显示状态，默认值为false，隐藏弹窗。<br/>popup:&nbsp;配置当前弹窗提示的参数。 | | bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;[PopupOptions](#popupoptions类型说明)&nbsp;\|&nbsp;[CustomPopupOptions](#custompopupoptions8类型说明)<sup>8+</sup> | 给组件绑定Popup弹窗，设置参数show为true弹出弹框。<br/>show:&nbsp;弹窗显示状态，默认值为false，隐藏弹窗。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
## PopupOptions类型说明 ## PopupOptions类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| -------------------------| ------------------------------------------------| -----| ----------------------------------------- | | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| message | string | 是 | 弹窗信息内容。 | | message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 | | placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 | | primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 | | secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | | onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。 | | arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 | | showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 |
## CustomPopupOptions<sup>8+</sup>类型说明 ## CustomPopupOptions<sup>8+</sup>类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| -------------------------| ------------------------- | ---- | ---------------------------------------------------- | | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 | | builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom | | placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 | | popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，此时如果气泡高度小于箭头的宽度（32vp）与气泡圆角两倍（48vp）之和（80vp），则实际不会显示箭头。<br/>默认值：true | | enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，此时如果气泡高度小于箭头的宽度（32vp）与气泡圆角两倍（48vp）之和（80vp），则实际不会显示箭头。<br/>默认值：true |
| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。<br/>默认值：true | | autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。<br/>默认值：true |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | | onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。 | | arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 | | showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡，默认值为false。 |
## 示例 ## 示例
...@@ -101,7 +101,7 @@ struct PopupExample { ...@@ -101,7 +101,7 @@ struct PopupExample {
.bindPopup(this.customPopup, { .bindPopup(this.customPopup, {
builder: this.popupBuilder, builder: this.popupBuilder,
placement: Placement.Top, placement: Placement.Top,
mask: {color: 0x33000000}, maskColor: '0x33000000',
popupColor: Color.Yellow, popupColor: Color.Yellow,
enableArrow: true, enableArrow: true,
showInSubWindow: false, showInSubWindow: false,
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md
浏览文件 @ 57198acd
...@@ -98,7 +98,7 @@ struct ScrollExample { ...@@ -98,7 +98,7 @@ struct ScrollExample {
.scrollable(ScrollDirection.Vertical) .scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On) .scrollBar(BarState.On)
.scrollBarColor(Color.Gray) .scrollBarColor(Color.Gray)
.scrollBarWidth(30) .scrollBarWidth(10)
.onScroll((xOffset: number, yOffset: number) => { .onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset) console.info(xOffset + ' ' + yOffset)
}) })
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或