提交 ce855ac8 编写于 作者: S sienna1128

update docs

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 41380548
......@@ -15,20 +15,26 @@
方法1:Badge(value: { count: number, maxCount?: number, position?: BadgePosition, style: BadgeStyle})
创建数字标记组件。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| count | number | 是 | 设置提醒消息数。 |
| maxCount | number | 否 | 最大消息数,超过最大消息时仅显示maxCount+。<br> 默认值:99 |
| position | [BadgePosition](#badgeposition枚举说明) | 否 | 设置提示点显示位置。<br>默认值:BadgePosition.RightTop |
| style | [BadgeStyle](#badgestyle对象说明) | 是 | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
方法2:Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
根据字符串创建标记组件。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| count | number | 是 | 设置提醒消息数。 |
| maxCount | number | 否 | 最大消息数,超过最大消息时仅显示maxCount+。<br> 默认值:99 |
| -------- | -------- | -------- | -------- |
| value | string | 是 | 提示内容的文本字符串。 |
| position | [BadgePosition](#badgeposition枚举说明) | 否 | 设置提示点显示位置。<br>默认值:BadgePosition.RightTop |
| style | [BadgeStyle](#badgestyle对象说明) | 是 | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
## BadgePosition枚举说明
## BadgePosition枚举说明
| 名称 | 描述 |
| -------- | -------- |
| RightTop | 圆点显示在右上角。 |
......@@ -50,8 +56,8 @@
@Entry
@Component
struct BadgeExample {
@State counts: number = 1
@State message: string = 'new'
@State counts: number = 1;
@State message: string = 'new';
build() {
Column() {
......@@ -66,7 +72,7 @@ struct BadgeExample {
}) {
Button('message')
.onClick(() => {
this.counts++
this.counts++;
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
......@@ -80,7 +86,7 @@ struct BadgeExample {
}) {
Button('message')
.onClick(() => {
this.counts++
this.counts++;
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
......@@ -95,7 +101,7 @@ struct BadgeExample {
}) {
Button('message')
.onClick(() => {
this.counts++
this.counts++;
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
......
......@@ -28,8 +28,8 @@ Column(value?:&nbsp;{space?: string&nbsp;|&nbsp;number})
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时无效<br/>默认值:HorizontalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时无效<br/>默认值:FlexAlign.Start |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时,子组件占满父组件宽度空间,效果不明显<br/>默认值:HorizontalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时,子组件占满父组件高度空间,效果不明显<br/>默认值:FlexAlign.Start |
## 示例
......
......@@ -20,7 +20,7 @@ Navigator(value?: {target: string, type?: NavigationType})
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------------- | ---- | ---------------------------------------------- |
| target | string | 是 | 指定跳转目标页面的路径。目标页面需加入main_pages.json文件中。 |
| target | string | 是 | 指定跳转目标页面的路径。 |
| type | [NavigationType](#navigationtype枚举说明) | 否 | 指定路由方式。<br/>默认值:NavigationType.Push |
## NavigationType枚举说明
......
......@@ -12,7 +12,6 @@
* 容器内子组件区分水平方向,垂直方向:
* 水平方向为left, middle, right,对应容器的HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End。
* 垂直方向为top, center, bottom,对应容器的VerticalAlign.Top, VerticalAlign.Center, VerticalAlign.Bottom。
* 子组件使用[alignRules](ts-universal-attributes-location.md)属性设置其上中下,左中右边界与外层容器或者设置了id的其他子组件的上中下,左中右对齐方式,具体参考示例。
* 子组件可以将容器或者其他子组件设为锚点:
* 参与相对布局的容器内组件必须设置id,容器RelativeContainer的id固定为'__container__'。
* 无id的子组件位置设置默认为容器左上方。
......
......@@ -27,8 +27,8 @@ Row(value?:{space?: number&nbsp;|&nbsp;string })
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时无效<br/>默认值:VerticalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时无效<br/>FlexAlign.Start |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时,子组件占满父组件高度空间,效果不明显<br/>默认值:VerticalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时,子组件占满父组件宽度空间,效果不明显<br/>FlexAlign.Start |
## 示例
......
......@@ -167,8 +167,8 @@ scrollBy(dx: Length, dy: Length): void
@Entry
@Component
struct ScrollExample {
scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
scroller: Scroller = new Scroller();
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
build() {
Stack({ alignContent: Alignment.TopStart }) {
......@@ -192,33 +192,33 @@ struct ScrollExample {
.scrollBarWidth(30) // 滚动条宽度
.edgeEffect(EdgeEffect.None)
.onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset)
console.info(xOffset + ' ' + yOffset);
})
.onScrollEdge((side: Edge) => {
console.info('To the edge')
console.info('To the edge');
})
.onScrollEnd(() => {
console.info('Scroll Stop')
console.info('Scroll Stop');
})
Button('scroll 150')
.onClick(() => { // 点击后下滑指定距离150.0vp
this.scroller.scrollBy(0,150)
this.scroller.scrollBy(0,150);
})
.margin({ top: 10, left: 20 })
Button('scroll 100')
.onClick(() => { // 点击后滑动到指定位置,即下滑100.0vp的距离
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 });
})
.margin({ top: 60, left: 20 })
Button('back top')
.onClick(() => { // 点击后回到顶部
this.scroller.scrollEdge(Edge.Top)
this.scroller.scrollEdge(Edge.Top);
})
.margin({ top: 110, left: 20 })
Button('next page')
.onClick(() => { // 点击后滑到下一页
this.scroller.scrollPage({ next: true })
this.scroller.scrollPage({ next: true });
})
.margin({ top: 170, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC)
......@@ -233,9 +233,9 @@ struct ScrollExample {
@Entry
@Component
struct NestedScroll {
@State listPosition: number = 0 // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
private scroller: Scroller = new Scroller()
@State listPosition: number = 0; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
private scroller: Scroller = new Scroller();
build() {
Flex() {
......@@ -256,18 +256,18 @@ struct NestedScroll {
}
.width("100%").height("50%").edgeEffect(EdgeEffect.None)
.onReachStart(() => {
this.listPosition = 0
this.listPosition = 0;
})
.onReachEnd(() => {
this.listPosition = 2
this.listPosition = 2;
})
.onScrollBegin((dx: number, dy: number) => {
if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
this.scroller.scrollBy(0, -dy)
return { dxRemain: dx, dyRemain: 0 }
this.scroller.scrollBy(0, -dy);
return { dxRemain: dx, dyRemain: 0 };
}
this.listPosition = 1;
return { dxRemain: dx, dyRemain: dy }
return { dxRemain: dx, dyRemain: dy };
})
Text("Scroll Area")
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册