提交 ce855ac8 编写于 作者: S sienna1128

update docs

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