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,38 +120,37 @@ ...@@ -120,38 +120,37 @@
## 示例 ## 示例
1. 文本选择器 ### 文本选择器
```html
<!-- xxx.hml --> ```html
<div class="container"> <!-- xxx.hml -->
<div class="container">
<text class="title"> <text class="title">
选中值：{{value}} 选中下标： {{index}} 选中值：{{value}} 选中下标： {{index}}
</text> </text>
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view> <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @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 {
}
.title {
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
} }
``` ```
```js ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
options: ['选项1', '选项2', '选项3'], options: ['选项1', '选项2', '选项3'],
value: "选项1", value: "选项1",
...@@ -161,46 +160,41 @@ ...@@ -161,46 +160,41 @@
this.value = data.newValue; this.value = data.newValue;
this.index = data.newSelected; this.index = data.newSelected;
}, },
} }
``` ```
![](figures/pickerview1.gif) ![picker-view0](figures/pickerview1.gif)
2. 时间选择器 ### 时间选择器
```html
<!-- xxx.hml --> ```html
<div class="container"> <!-- xxx.hml -->
<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 {
font-size: 30px;
text-align: center; text-align: center;
} margin-top: 50%;
.time-picker { }
width: 500px; ```
height: 400px;
margin-top: 20px; ```js
} /* xxx.js */
``` export default {
```js
/* xxx.js */
export default {
data: { data: {
defaultTime: "", defaultTime: "",
time: "", time: "",
...@@ -223,138 +217,124 @@ ...@@ -223,138 +217,124 @@
concat(hours, minutes) { concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`; return `${this.fill(hours)}:${this.fill(minutes)}`;
}, },
} }
``` ```
![](figures/pickerview2.gif) ![picker-view1](figures/pickerview2.gif)
3. 日期选择器 ### 日期选择器
```html
<!-- xxx.hml --> ```html
<div class="container"> <!-- xxx.hml -->
<div class="container">
<text class="title"> <text class="title">
Selected：{{time}} Selected：{{date}}
</text> </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> </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 {
font-size: 30px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
} }
.date-picker { ```
width: 500px;
height: 400px; ```js
margin-top: 50px; /* xxx.js */
} export default {
```
```js
/* xxx.js */
export default {
data: { data: {
date: "", date: "",
}, },
handleChange(data) { handleChange(data) {
this.date = data.year + "年" + data.month + "月" + data.day + "日"; this.date = data.year + "年" + data.month + "月" + data.day + "日";
}, },
} }
``` ```
![](figures/pickerview3.gif) ![picker-view2](figures/pickerview3.gif)
4. 日期时间选择器 ### 日期时间选择器
```html
<!-- xxx.hml --> ```html
<div class="container"> <!-- xxx.hml -->
<div class="container">
<text class="title"> <text class="title">
Selected：{{datetime}} Selected：{{datetime}}
</text> </text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view> <picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @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: 500px; }
height: 454px; .title {
} font-size: 31px;
.title {
font-size: 30px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
} }
.date-picker { ```
width: 500px;
height: 400px; ```js
margin-top: 50px; /* xxx.js */
} export default {
```
```js
/* xxx.js */
export default {
data: { data: {
datetime: "", datetime: "",
}, },
handleChange(data) { handleChange(data) {
this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分"; this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分";
}, },
} }
``` ```
![](figures/pickerview4.gif) ![picker-view3](figures/pickerview4.gif)
5. 多列文本选择器 ### 多列文本选择器
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
Selected：{{ value }} Selected：{{ value }}
</text> </text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view> <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="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: 500px; }
height: 454px; .title {
} font-size: 31px;
.title {
font-size: 30px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
} }
``` ```
```js ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
multitext: [ multitext: [
[1, 2, 3], [1, 2, 3],
...@@ -366,6 +346,6 @@ ...@@ -366,6 +346,6 @@
handleChange(data) { handleChange(data) {
this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected; this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected;
}, },
} }
``` ```
![](figures/pickerview5.gif) ![picker-view4](figures/pickerview5.gif)
\ No newline at end of file \ 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
...@@ -151,10 +151,14 @@ export default { ...@@ -151,10 +151,14 @@ export default {
}) })
}, },
collapseAll(e) { collapseAll(e) {
this.$element('mylist').collapseGroup() this.$element('mylist').collapseGroup({
groupid: ''
})
}, },
expandAll(e) { expandAll(e) {
this.$element('mylist').expandGroup() this.$element('mylist').expandGroup({
groupid: ''
})
}, },
collapse(e) { collapse(e) {
promptAction.showToast({ promptAction.showToast({
...@@ -167,6 +171,9 @@ export default { ...@@ -167,6 +171,9 @@ export default {
}) })
} }
} }
``` ```
![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
...@@ -20,7 +20,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -20,7 +20,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: 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/>默认值：当前系统日期 |
...@@ -30,7 +30,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -30,7 +30,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date})
除支持[通用属性](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 |
...@@ -39,13 +39,13 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -39,13 +39,13 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date})
除支持[通用事件](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
...@@ -22,7 +22,7 @@ Navigation() ...@@ -22,7 +22,7 @@ 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个图标，多余的图标会被放入自动生成的更多图标。 |
...@@ -34,14 +34,14 @@ Navigation() ...@@ -34,14 +34,14 @@ Navigation()
| 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 | 否 | 当前选项被选中的事件回调。 |
...@@ -49,7 +49,7 @@ Navigation() ...@@ -49,7 +49,7 @@ Navigation()
## object类型说明 ## object类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ | | ------ | ----------------------- | ---- | --------------- |
| value | string | 是 | 工具栏单个选项的显示文本。 | | value | string | 是 | 工具栏单个选项的显示文本。 |
| icon | string | 否 | 工具栏单个选项的图标资源路径。 | | icon | string | 否 | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 | | action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
...@@ -65,28 +65,28 @@ Navigation() ...@@ -65,28 +65,28 @@ Navigation()
## 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模式显示。 |
...@@ -94,7 +94,7 @@ Navigation() ...@@ -94,7 +94,7 @@ Navigation()
## TitleHeight枚举说明 ## TitleHeight枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ---- | ---------------------------------------- | | ----------- | -------------------------- |
| MainOnly | 只有主标题时标题栏的推荐高度（56vp）。 | | MainOnly | 只有主标题时标题栏的推荐高度（56vp）。 |
| MainWithSub | 同时有主标题和副标题时标题栏的推荐高度（82vp）。 | | MainWithSub | 同时有主标题和副标题时标题栏的推荐高度（82vp）。 |
...@@ -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
...@@ -21,7 +21,7 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -21,7 +21,7 @@ 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。 |
...@@ -29,7 +29,7 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -29,7 +29,7 @@ Rating(options?: { rating: number, indicator?: boolean })
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| 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会选择加载系统默认星型图源。 |
...@@ -44,7 +44,7 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -44,7 +44,7 @@ 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
...@@ -21,7 +21,7 @@ TimePicker(options?: {selected?: Date}) ...@@ -21,7 +21,7 @@ TimePicker(options?: {selected?: Date})
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | ---- | ---- | ------------------------ |
| selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 | | selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 |
## 属性 ## 属性
...@@ -29,7 +29,7 @@ TimePicker(options?: {selected?: Date}) ...@@ -29,7 +29,7 @@ TimePicker(options?: {selected?: Date})
除支持[通用属性](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
...@@ -13,13 +13,13 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -13,13 +13,13 @@ 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 | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
...@@ -28,7 +28,7 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -28,7 +28,7 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------------------------ |
| 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
...@@ -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
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ---------- | ------------------------------------- | --------------------------------------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| 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;点击主按钮的回调函数。 |
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
## 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) | 否 | 提示气泡的颜色。 |
...@@ -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.
先完成此消息的编辑！
想要评论请 注册 或