提交 b8e613aa 编写于 作者: E ester.zhou

update docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 57fcfaab
...@@ -91,7 +91,11 @@ struct ProgressExample { ...@@ -91,7 +91,11 @@ struct ProgressExample {
Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) { Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50) Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100).height(50) Progress({ value: 20, total: 150, type: ProgressType.Capsule })
.color(Color.Grey)
.value(50)
.width(100)
.height(50)
} }
}.width('100%').margin({ top: 30 }) }.width('100%').margin({ top: 30 })
} }
......
# Slider # Slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Slider&gt;** component is used to quickly adjust settings, such as the volume and brightness. The *\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
## Required Permissions ## Required Permissions
...@@ -15,7 +16,7 @@ None ...@@ -15,7 +16,7 @@ None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
...@@ -62,11 +63,11 @@ Among all the universal events, only **OnAppear** and **OnDisAppear** are suppor ...@@ -62,11 +63,11 @@ Among all the universal events, only **OnAppear** and **OnDisAppear** are suppor
| onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Callback invoked when the slider slides.<br/>**value**: current progress.<br/>**mode**: dragging state. | | onChange(callback: (value: number, mode: SliderChangeMode) =&gt; void) | Callback invoked when the slider slides.<br/>**value**: current progress.<br/>**mode**: dragging state. |
- SliderChangeMode enums - SliderChangeMode enums
| Name | Description | | Name | Value | Description |
| ------ | ----------------------------------- | | ------ | ----- | ----------------------------------- |
| Begin | The user starts to drag the slider. | | Begin | 0 | The user starts to drag the slider. |
| Moving | The user is dragging the slider. | | Moving | 1 | The user is dragging the slider. |
| End | The user stops dragging the slider. | | End | 2 | The user stops dragging the slider. |
## Example ## Example
......
# Scroll # Scroll
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Scroll&gt;** component scrolls the content when the layout size of a component exceeds the viewport of its parent component. The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
## Required Permissions ## Required Permissions
...@@ -28,8 +28,8 @@ Scroll(scroller?: Scroller) ...@@ -28,8 +28,8 @@ Scroll(scroller?: Scroller)
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. | | scrollable | ScrollDirection | ScrollDirection.Vertical | Scroll method. |
| scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | Auto | Scroll bar status. | | scrollBar | [BarState](ts-appendix-enums.md#barstate-enums) | ScrollDirection.Auto | Scrollbar status. |
| scrollBarColor | Color | - | Color of the scroll bar. | | scrollBarColor | Color | - | Color of the scrollbar. |
| scrollBarWidth | Length | - | Width of the scrollbar. | | scrollBarWidth | Length | - | Width of the scrollbar. |
- ScrollDirection - ScrollDirection
...@@ -39,10 +39,18 @@ Scroll(scroller?: Scroller) ...@@ -39,10 +39,18 @@ Scroll(scroller?: Scroller)
| Vertical | Only vertical scrolling is supported. | | Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. | | None | Scrolling is disabled. |
## Events
| Name | Description |
| -------- | -------- |
| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked when scrolling starts. It returns the horizontal and vertical offsets. |
| onScrollEdge(side: Edge) =&gt; void | Invoked when scrolling reaches the edge. |
| onScrollEnd() =&gt; void | Invoked when scrolling stops. |
## Scroller ## Scroller
Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **&lt;List&gt;** and **&lt;Scroll&gt;** components. Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **\<List>** and **\<Scroll>** components.
### Objects to Import ### Objects to Import
...@@ -53,7 +61,7 @@ scroller: Scroller = new Scroller() ...@@ -53,7 +61,7 @@ scroller: Scroller = new Scroller()
``` ```
### scroller.scrollTo ### scrollTo
scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve } }): void scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve } }): void
...@@ -69,7 +77,7 @@ Scrolls to the specified position. ...@@ -69,7 +77,7 @@ Scrolls to the specified position.
| animation | {<br/>duration: number,<br/>curve: Curve \|<br/>CubicBezier \|<br/>SpringCurve<br/>} | No | | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. | | animation | {<br/>duration: number,<br/>curve: Curve \|<br/>CubicBezier \|<br/>SpringCurve<br/>} | No | | Animation configuration, which includes the following:<br/>- **duration**: scrolling duration.<br/>- **curve**: scrolling curve. |
### scroller.scrollEdge ### scrollEdge
scrollEdge(value: Edge): void scrollEdge(value: Edge): void
...@@ -83,7 +91,7 @@ Scrolls to the edge of the container. ...@@ -83,7 +91,7 @@ Scrolls to the edge of the container.
| value | Edge | Yes | - | Edge position to scroll to. | | value | Edge | Yes | - | Edge position to scroll to. |
### scroller.scrollPage ### scrollPage
scrollPage(value: { next: boolean, direction?: Axis }): void scrollPage(value: { next: boolean, direction?: Axis }): void
...@@ -95,7 +103,7 @@ Scrolls to the next or previous page. ...@@ -95,7 +103,7 @@ Scrolls to the next or previous page.
| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. | | next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
### scroller.currentOffset ### currentOffset
scroller.currentOffset(): Object scroller.currentOffset(): Object
...@@ -117,24 +125,17 @@ scroller.scrollToIndex(value: number): void ...@@ -117,24 +125,17 @@ scroller.scrollToIndex(value: number): void
Scrolls to the specified index. Scrolls to the specified index.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> Only the **&lt;List&gt;** component is supported. >
> Only the **\<List>** component is supported.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Index of the item to be scrolled to in the list. | | value | number | Yes | - | Index of the item to be scrolled to in the list. |
## Events
| Name | Description |
| -------- | -------- |
| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(side: Edge) =&gt; void | Callback for the event of scrolling to the edge. |
| onScrollEnd() =&gt; void | Invoked when scrolling stops. |
## Example ## Example
...@@ -152,14 +153,20 @@ struct ScrollExample { ...@@ -152,14 +153,20 @@ struct ScrollExample {
Column() { Column() {
ForEach(this.arr, (item) => { ForEach(this.arr, (item) => {
Text(item.toString()) Text(item.toString())
.width('90%').height(150).backgroundColor(0xFFFFFF) .width('90%')
.borderRadius(15).fontSize(16).textAlign(TextAlign.Center) .height(150)
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 10 }) .margin({ top: 10 })
}, item => item) }, item => item)
}.width('100%') }.width('100%')
} }
.scrollable(ScrollDirection.Vertical).scrollBar(BarState.On) .scrollable(ScrollDirection.Vertical)
.scrollBarColor(Color.Gray).scrollBarWidth(30) .scrollBar(BarState.On)
.scrollBarColor(Color.Gray)
.scrollBarWidth(30)
.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.
先完成此消息的编辑!
想要评论请 注册