Skip to content

D
Docs

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

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

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 6e5ee1c3
显示空白变更内容
内联 并排
Showing with 661 addition and 709 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ e6c471bc
...@@ -120,36 +120,37 @@ ...@@ -120,36 +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;
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.title { .title {
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
margin-top: 50%; 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",
...@@ -159,40 +160,41 @@ ...@@ -159,40 +160,41 @@
this.value = data.newValue; this.value = data.newValue;
this.index = data.newSelected; this.index = data.newSelected;
}, },
} }
``` ```
![picker-view0](figures/picker-view0.gif) ![picker-view0](figures/picker-view0.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;
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.title { .title {
font-size: 31px; font-size: 31px;
text-align: center; text-align: center;
margin-top: 50%; margin-top: 50%;
} }
``` ```
```js ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
defaultTime: "", defaultTime: "",
time: "", time: "",
...@@ -215,122 +217,124 @@ ...@@ -215,122 +217,124 @@
concat(hours, minutes) { concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`; return `${this.fill(hours)}:${this.fill(minutes)}`;
}, },
} }
``` ```
![picker-view1](figures/picker-view1.gif) ![picker-view1](figures/picker-view1.gif)
3. 日期选择器 ### 日期选择器
```html
<!-- xxx.hml --> ```html
<div class="container"> <!-- xxx.hml -->
<div class="container">
<text class="title"> <text class="title">
Selected：{{date}} Selected：{{date}}
</text> </text>
<picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></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;
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.title { .title {
font-size: 31px; font-size: 31px;
text-align: center; text-align: center;
margin-top: 50%; margin-top: 50%;
} }
``` ```
```js ```js
/* xxx.js */ /* xxx.js */
export default { 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 + "日";
}, },
} }
``` ```
![picker-view2](figures/picker-view2.gif) ![picker-view2](figures/picker-view2.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;
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.title { .title {
font-size: 31px; font-size: 31px;
text-align: center; text-align: center;
margin-top: 50%; margin-top: 50%;
} }
``` ```
```js ```js
/* xxx.js */ /* xxx.js */
export default { 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 + "分";
}, },
} }
``` ```
![picker-view3](figures/picker-view3.gif) ![picker-view3](figures/picker-view3.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;
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.title { .title {
font-size: 31px; font-size: 31px;
text-align: center; text-align: center;
margin-top: 50%; margin-top: 50%;
} }
``` ```
```js ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
multitext: [ multitext: [
[1, 2, 3], [1, 2, 3],
...@@ -342,6 +346,6 @@ ...@@ -342,6 +346,6 @@
handleChange(data) { handleChange(data) {
this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected; this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected;
}, },
} }
``` ```
![picker-view4](figures/picker-view4.gif) ![picker-view4](figures/picker-view4.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
浏览文件 @ e6c471bc
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
## 示例 ## 示例
1. 1. ​
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
...@@ -137,5 +137,5 @@ ...@@ -137,5 +137,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-container-list-item-group.md
浏览文件 @ e6c471bc
...@@ -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
浏览文件 @ e6c471bc
...@@ -21,7 +21,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -21,7 +21,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/>默认值：当前系统日期 |
...@@ -31,7 +31,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -31,7 +31,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 |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 |
| textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 |
...@@ -40,7 +40,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -40,7 +40,7 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date})
## PickerTextStyle<sup>10+</sup>类型说明 ## PickerTextStyle<sup>10+</sup>类型说明
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------ | ---- | -------------------------------------------- | | ----- | ---------------------------------------- | ---- | ------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文本颜色。 | | color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文本颜色。 |
| font | [Font](ts-types.md#font) | 否 | 文本样式，picker只支持字号、字体粗细的设置。 | | font | [Font](ts-types.md#font) | 否 | 文本样式，picker只支持字号、字体粗细的设置。 |
...@@ -49,13 +49,13 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -49,13 +49,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 | 选中日期的日。 |
...@@ -75,7 +75,7 @@ struct DatePickerExample { ...@@ -75,7 +75,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
浏览文件 @ e6c471bc
...@@ -22,7 +22,7 @@ Navigation() ...@@ -22,7 +22,7 @@ Navigation()
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | | ----------------------------- | ---------------------------------------- | ---------------------------------------- |
| title | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup>&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>&nbsp;\|&nbsp;[NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup>&nbsp;\|&nbsp;[NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。<br/>**说明：** <br/>使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。<br/>字符串超长时，如果不设置副标题，先缩小再换行（2行）最后...截断。如果设置副标题，先缩小最后...截断。 | | title | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup>&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>&nbsp;\|&nbsp;[NavigationCommonTitle](#navigationcommontitle类型说明)<sup>9+</sup>&nbsp;\|&nbsp;[NavigationCustomTitle](#navigationcustomtitle类型说明)<sup>9+</sup> | 页面标题。<br/>**说明：** <br/>使用NavigationCustomTitle类型设置height高度时，titleMode属性不会生效。<br/>字符串超长时，如果不设置副标题，先缩小再换行（2行）最后...截断。如果设置副标题，先缩小最后...截断。 |
| 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
浏览文件 @ e6c471bc
...@@ -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
浏览文件 @ e6c471bc
...@@ -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 |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ e6c471bc
...@@ -13,14 +13,14 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -13,14 +13,14 @@ 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 | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
...@@ -29,7 +29,7 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -29,7 +29,7 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ------------------------------------ |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 | | onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 |
...@@ -50,6 +50,7 @@ struct GestureGroupExample { ...@@ -50,6 +50,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
浏览文件 @ e6c471bc
...@@ -240,7 +240,7 @@ struct FlexExample4 { ...@@ -240,7 +240,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
浏览文件 @ e6c471bc
...@@ -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;点击主按钮的回调函数。 |
...@@ -32,13 +32,13 @@ ...@@ -32,13 +32,13 @@
## PopupMessageOptions<sup>10+</sup>类型说明 ## PopupMessageOptions<sup>10+</sup>类型说明
| 名称 | 类型 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| --------- | ------------------------------------------ | ---- | ---------------------- | | --------- | ---------------------------------------- | ---- | ----------- |
| textColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置弹窗信息文本颜色。 | | textColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置弹窗信息文本颜色。 |
| font | [Font](ts-types.md#Font) | 否 | 设置弹窗信息字体属性。 | | font | [Font](ts-types.md#Font) | 否 | 设置弹窗信息字体属性。 |
## 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) | 否 | 提示气泡的颜色。 |
...@@ -111,7 +111,7 @@ struct PopupExample { ...@@ -111,7 +111,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
浏览文件 @ e6c471bc
...@@ -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)
}) })
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ e6c471bc
...@@ -38,8 +38,8 @@ ...@@ -38,8 +38,8 @@
height: 428px; height: 428px;
background-color: #860303; background-color: #860303;
transform: rotate(45deg); transform: rotate(45deg);
margin-top: 290px; margin-top: 284px;
margin-left: 145px; margin-left: 148px;
} }
.content{ .content{
margin-top: 500px; margin-top: 500px;
...@@ -50,9 +50,9 @@ ...@@ -50,9 +50,9 @@
} }
.door{ .door{
width: 100px; width: 100px;
height: 150px; height: 135px;
background-color: #1033d9; background-color: #1033d9;
transform: translate(150px,-152px); transform: translate(150px,-137px);
} }
.window{ .window{
z-index: 1; z-index: 1;
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
height: 100px; height: 100px;
border-radius: 15px; border-radius: 15px;
background-color: #9a7404; background-color: #9a7404;
transform: translate(200px,-700px) skewX(-5deg); transform: translate(200px,-710px) skewX(-5deg);
} }
``` ```
...@@ -209,19 +209,19 @@ ...@@ -209,19 +209,19 @@
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate 3s infinite; animation: rotate 3s infinite;
margin-left: 100px; margin-left: 30px;
} }
.rect1 { .rect1 {
background-color: #f76160; background-color: #f76160;
} }
.rect2 { .rect2 {
background-color: #60f76f; background-color: #60f76f;
/* 改变原点位置*/ /* 改变原点位置*/
transform-origin: 10% 10px; transform-origin: 10% 10px;
} }
.rect3 { .rect3 {
background-color: #6081f7; background-color: #6081f7;
/* 改变原点位置*/ /* 改变原点位置*/
transform-origin: right bottom; transform-origin: right bottom;
} }
@keyframes rotate { @keyframes rotate {
...@@ -255,14 +255,14 @@ ...@@ -255,14 +255,14 @@
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 1000ms infinite; animation: rotate3d1 1000ms infinite;
background: linear-gradient(#e6c4ec, #be15d9) background-color: darkmagenta;
} }
.rect5 { .rect5 {
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 1000ms infinite; animation: rotate3d1 1000ms infinite;
margin-left: 100px; margin-left: 100px;
background: linear-gradient(#e6c4ec, #be15d9) background-color: darkmagenta;
} }
.mouse { .mouse {
margin-top: 150px; margin-top: 150px;
...@@ -342,7 +342,7 @@ ...@@ -342,7 +342,7 @@
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50px; border-radius: 50px;
background:linear-gradient(#dcaec1, #d3a8e3); background-color: mediumpurple;
z-index: 1; position: absolute; z-index: 1; position: absolute;
} }
.ripple{ .ripple{
...@@ -352,7 +352,7 @@ ...@@ -352,7 +352,7 @@
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50px; border-radius: 50px;
background:linear-gradient(#dcaec1,#d3a8e3); background-color: blueviolet;
animation: ripple 5s infinite; animation: ripple 5s infinite;
} }
/* 设置不同的动画时间 */ /* 设置不同的动画时间 */
...@@ -385,8 +385,7 @@ text{ ...@@ -385,8 +385,7 @@ text{
width: 200px; width: 200px;
height: 100px; height: 100px;
animation:rubberBand 1s infinite; animation:rubberBand 1s infinite;
/* 设置渐变色 */ background-color: darkmagenta;
background:linear-gradient(#e276aa,#ec0d66);
position: absolute; position: absolute;
} }
@keyframes rubberBand { @keyframes rubberBand {
...@@ -492,21 +491,21 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 ...@@ -492,21 +491,21 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
.rect1{ .rect1{
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#e77070,#ee0202); background-color: red;
animation: change1 3s infinite forwards; animation: change1 3s infinite forwards;
} }
.rect2{ .rect2{
margin-top: 50px; margin-top: 50px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#95a6e8, #2739de); background-color: darkblue;
animation: change2 3s infinite forwards; animation: change2 3s infinite forwards;
} }
.rect3{ .rect3{
margin-top: 50px; margin-top: 50px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#142ee2, #8cb1e5); background-color: darkblue;
animation: change3 3s infinite; animation: change3 3s infinite;
} }
.rect4{ .rect4{
...@@ -515,14 +514,14 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 ...@@ -515,14 +514,14 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
margin-top: 200px; margin-top: 200px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3); background-color: darkmagenta;
animation: change4 3s infinite; animation: change4 3s infinite;
} }
.rect5{ .rect5{
margin-top: 300px; margin-top: 300px;
width: 100px; width: 100px;
height: 100px; height: 100px;
background:linear-gradient(#e7ded7, #486ccd, #94b4d2); background-color: cadetblue;
animation: change5 3s infinite; animation: change5 3s infinite;
} }
/* change1 change2 对比 */ /* change1 change2 对比 */
......
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ e6c471bc
...@@ -50,57 +50,6 @@ tabs是一种常见的界面导航结构。通过页签容器，用户可以快 ...@@ -50,57 +50,6 @@ tabs是一种常见的界面导航结构。通过页签容器，用户可以快
![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif) ![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif)
## 设置tabs方向
tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true">
<tab-bar >
<text>item1</text>
<text style="margin-top: 50px;">item2</text>
</tab-bar>
<tab-content>
<div>
<image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
</div>
<div>
<image src="common/images/img1.jpg" style="object-fit: contain;"> </image>
</div>
</tab-content>
</tabs>
</div>
```
![zh-cn_image_0000001208908643](figures/zh-cn_image_0000001208908643.gif)
设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。
```html
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;">
<tab-bar mode="fixed">
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content scrollable="false">
<div>
<image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
</div>
<div>
<image src="common/images/img2.jpg" style="object-fit: contain;"> </image>
</div>
</tab-content>
</tabs>
</div>
```
![zh-cn_image_0000001209028575](figures/zh-cn_image_0000001209028575.gif)
## 设置样式 ## 设置样式
设置tabs背景色及边框和tab-content布局。 设置tabs背景色及边框和tab-content布局。
......
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ e6c471bc
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
```html ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> <grid-container id="mygrid" gutter="20px" style="background-color: pink;">
<grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left: <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left:
10%; margin-right: 10%;"></grid-row> 10%;"></grid-row>
<grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row> <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row> <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
</grid-container> </grid-container>
...@@ -27,8 +27,7 @@ ...@@ -27,8 +27,7 @@
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; margin-top: 500px;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -48,14 +47,14 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方 ...@@ -48,14 +47,14 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
```html ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" <grid-container id="mygrid" gutter="20px" style="background-color: pink;padding-top: 100px;"
onclick="getColumns" onlongpress="getSizeType"> onclick="getColumns" onlongpress="getSizeType">
<grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left: <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left:
40%; margin-right: 40%;"></grid-row> 40%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left: <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
25%; margin-right: 25%;"></grid-row> 25%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left: <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left:
10%; margin-right: 10%;"></grid-row> 10%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row> <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
</grid-container> </grid-container>
</div> </div>
...@@ -67,8 +66,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方 ...@@ -67,8 +66,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
.container{ .container{
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; margin-top: 400px;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -163,7 +161,7 @@ export default { ...@@ -163,7 +161,7 @@ export default {
text{ text{
color: white; color: white;
font-size: 40px; font-size: 40px;
}
``` ```
![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png) ![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png)
......
zh-cn/application-dev/ui/ui-js-components-marquee.md
浏览文件 @ e6c471bc
...@@ -12,7 +12,7 @@ marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用 ...@@ -12,7 +12,7 @@ marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee> <marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">It's a racing lamp.</marquee>
</div> </div>
``` ```
......
zh-cn/application-dev/ui/ui-js-components-menu.md
浏览文件 @ e6c471bc
...@@ -183,7 +183,7 @@ export default { ...@@ -183,7 +183,7 @@ export default {
<toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle> <toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle>
</div> </div>
<text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text> <text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text>
<div style="width: {{width}}'px';height: {{height}}px;background:linear-gradient(to right,#FF0000,#0000FF);"></div> <div style="width: {{width}}px;height: {{height}}px; background-color: cornflowerblue;"></div>
<text id="menuId" class="text">change size</text> <text id="menuId" class="text">change size</text>
<menu onselected="select" oncancel="cancel" target="menuId"> <menu onselected="select" oncancel="cancel" target="menuId">
<option value="{{item.value}}" for="item in optionList">{{item.text}}</option> <option value="{{item.value}}" for="item in optionList">{{item.text}}</option>
...@@ -242,7 +242,6 @@ option{ ...@@ -242,7 +242,6 @@ option{
```js ```js
// xxx.js // xxx.js
import promptAction from '@ohos.promptAction';
export default { export default {
data:{ data:{
fresh: false, fresh: false,
......
zh-cn/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ e6c471bc
...@@ -132,13 +132,13 @@ text{ ...@@ -132,13 +132,13 @@ text{
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container"> <div class="container">
<swiper index="1" autoplay="true" interval="2000" duration="500" > <swiper index="1" autoplay="true" interval="2000" duration="500" >
<div class="item" style="background: linear-gradient(to right,#806dd9,#5d44ea,#2eb9d5)"> <div class="item" style="background-color: bisque;">
<text>item1</text> <text>item1</text>
</div> </div>
<div class="item" style="background: linear-gradient( to right,#2eb9d5,#0e7db4,#2673d9)"> <div class="item" style="background-color: darkkhaki;">
<text>item2</text> <text>item2</text>
</div> </div>
<div class="item" style="background: linear-gradient( to right,#2673d9,#0c89af,#806dd9)"> <div class="item" style="background-color: cadetblue;">
<text>item3</text> <text>item3</text>
</div> </div>
</swiper> </swiper>
......
zh-cn/application-dev/ui/ui-js-components-toolbar.md
浏览文件 @ e6c471bc
...@@ -108,10 +108,6 @@ toolbar-item{ ...@@ -108,10 +108,6 @@ toolbar-item{
toolbar-item{ toolbar-item{
font-size: 35px; font-size: 35px;
} }
.toolbarActive{
color: red;
background-color: #daebef;
}
``` ```
...@@ -186,8 +182,7 @@ export default { ...@@ -186,8 +182,7 @@ export default {
<div class="container"> <div class="container">
<image src="{{imgList[active]}}"></image> <image src="{{imgList[active]}}"></image>
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;"> <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active <toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
</toolbar> </toolbar>
</div> </div>
``` ```
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或