提交 0905edb2 编写于 作者: W wangshuainan

整改docs文档

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>
上级 6a0cb9a3
......@@ -23,14 +23,14 @@
除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性:
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ----------- | -------- | ---- | ---------------------------------------- |
| placement | string | rightTop | 否 | 事件提醒的数字标记或者圆点标记的位置,可选值为:<br/>-&nbsp;right:位于组件右边框。<br/>-&nbsp;rightTop:位于组件边框右上角。<br/>-&nbsp;left:位于组件左边框。 |
| count | number | 0 | 否 | 设置提醒的消息数,默认为0。当设置相应的提醒消息数大于0时,消息提醒会变成数字标记类型,未设置消息数或者消息数不大于0时,消息提醒将采用圆点标记<br/>当数字设置大于maxcount时,将使用maxcount显示。count属性最大支持整数值为2147483647。 |
| visible | boolean | false | 否 | 是否显示消息提醒,当收到新信息提醒时可以设置该属性为true,显示相应的消息提醒,如果需要使用数字标记类型,同时需要设置相应的count属性。 |
| maxcount | number | 99 | 否 | 最大消息数限制,当收到新信息提醒大于该限制时,标识数字会进行省略,仅显示maxcount+。<br/>maxcount属性支持的最大整数值为2147483647。 |
| config | BadgeConfig | - | 否 | 设置新事件标记相关配置属性。 |
| label<sup>6+</sup> | string | - | 否 | 设置新事件提醒的文本值。<br/>使用该属性时,count和maxcount属性不生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ----------- | -------- | ---- | ------------------------------------------------------------ |
| placement | string | rightTop | 否 | 事件提醒的数字标记或者圆点标记的位置,可选值为:<br/>-&nbsp;right:位于组件右边框。<br/>-&nbsp;rightTop:位于组件边框右上角。<br/>-&nbsp;left:位于组件左边框。 |
| count | number | 0 | 否 | 设置提醒的消息数,默认为0,为0时不显示。当设置相应的提醒消息数大于0时,消息提醒会变成数字标记类型<br/>当数字设置大于maxcount时,将使用maxcount显示。count属性最大支持整数值为2147483647。 |
| visible | boolean | false | 否 | 是否显示消息提醒,当收到新信息提醒时可以设置该属性为true,显示相应的消息提醒,如果需要使用数字标记类型,同时需要设置相应的count属性。 |
| maxcount | number | 99 | 否 | 最大消息数限制,当收到新信息提醒大于该限制时,标识数字会进行省略,仅显示maxcount+。<br/>maxcount属性支持的最大整数值为2147483647。 |
| config | BadgeConfig | - | 否 | 设置新事件标记相关配置属性。 |
| label<sup>6+</sup> | string | - | 否 | 设置新事件提醒的文本值。<br/>使用该属性时,count和maxcount属性不生效。 |
**表1** BadgeConfig
......@@ -107,4 +107,4 @@ export default {
}
```
![zh-cn_image_0000001177265268](figures/zh-cn_image_0000001177265268.png)
![zh-cn_image_000000117726526811](figures/zh-cn_image_000000117726526811.png)
......@@ -61,27 +61,35 @@ struct RectExample {
Column({ space: 10 }) {
Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
// 绘制90% * 50的矩形
Rect({ width: '90%', height: 50 })
.fill(Color.Pink)
// 绘制90% * 50的矩形框
Rect()
.width('90%')
.height(50)
.fillOpacity(0)
.stroke(Color.Red)
.strokeWidth(3)
Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
// 绘制90% * 80的矩形, 圆角宽高分别为40、20
Rect({ width: '90%', height: 80 })
.radiusHeight(20)
.radiusWidth(40)
.fill(Color.Pink)
// 绘制90% * 80的矩形, 圆角宽高为20
Column({ space: 5 }) {
Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
// 绘制90% * 50矩形
Rect({ width: '90%', height: 50 })
.fill(Color.Pink)
// 绘制90% * 50的矩形框
Rect()
.width('90%')
.height(50)
.fillOpacity(0)
.stroke(Color.Red)
.strokeWidth(3)
Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
// 绘制90% * 80的矩形, 圆角宽高分别为40、20
Rect({ width: '90%', height: 80 })
.radiusHeight(20)
.radiusWidth(40)
.fill(Color.Pink)
// 绘制90% * 80的矩形, 圆角宽高为20
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
}.width('100%').margin({ top: 10 })
// 绘制90% * 50矩形, 左上圆角宽高40,右上圆角宽高20,右下圆角宽高40,左下圆角宽高20
Rect({ width: '90%', height: 80 })
.radius(20)
.radius([[40, 40], [20, 20], [40, 40], [20, 20]])
.fill(Color.Pink)
}.width('100%').margin({ top: 10 })
}.width('100%').margin({ top: 5 })
}
}
```
......
......@@ -6,7 +6,7 @@
页面路由router根据页面的uri找到目标页面,从而实现跳转。以最基础的两个页面之间的跳转为例,具体实现步骤如下:
1. 在“Project“窗口,打开entry &gt; src &gt; mainjsdefault,右键点击pages文件夹,选择NewJS Page,创建一个详情页。
1. 在“Project“窗口,打开src &gt; main &gt;js &gt;MainAbility,右键点击pages文件夹,选择NewJS Page,创建一个详情页。
2. 调用router.push()路由到详情页。
......@@ -42,6 +42,8 @@ index和detail这两个页面均包含一个text组件和button组件:text组
/* index.css */
/* detail.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -60,11 +62,11 @@ index和detail这两个页面均包含一个text组件和button组件:text组
```js
// index.js
import router from '@system.router';
import router from '@ohos.router';
export default {
launch() {
router.push ({
uri: 'pages/detail/detail',
url: 'pages/detail/detail',
});
},
}
......@@ -72,7 +74,7 @@ export default {
```js
// detail.js
import router from '@system.router';
import router from '@ohos.router';
export default {
launch() {
router.back();
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册