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

update docs (7332)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 ed4eb212
...@@ -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
> **NOTE**<br> > **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
...@@ -44,12 +45,12 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: ...@@ -44,12 +45,12 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
Touch target configuration is not supported. Touch target configuration is not supported.
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ------------- | ------- | ------------- | -------------------------------------------------------------------- | | ------------- | ------- | ------------- | ---------------------------------------- |
| blockColor | Color | - | Color of the slider. | | blockColor | Color | - | Color of the slider. |
| trackColor | Color | - | Background color of the slider. | | trackColor | Color | - | Background color of the slider. |
| selectedColor | Color | - | Color of the slider rail that has been slid. | | selectedColor | Color | - | Color of the slider rail that has been slid. |
| showSteps | boolean | false | Whether to display the current step. | | showSteps | boolean | false | Whether to display the current step. |
| showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. | | showTips | boolean | false | Whether to display a bubble to indicate the percentage when sliding. |
...@@ -62,17 +63,18 @@ Among all the universal events, only **OnAppear** and **OnDisAppear** are suppor ...@@ -62,17 +63,18 @@ 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
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
......
# Scroll # Scroll
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - When a **\<List>** is nested in this component, you are advised to specify the width and height of the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
> **NOTE** The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
None None.
## Child Components ## Child Components
...@@ -25,41 +25,39 @@ Scroll(scroller?: Scroller) ...@@ -25,41 +25,39 @@ Scroll(scroller?: Scroller)
## Attributes ## Attributes
| 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) | ScrollDirection.Auto | Scrollbar status. | | scrollBar | [BarState](ts-appendix-enums.md#barstate-enums)| ScrollDirection.Auto | Scrollbar status. |
| scrollBarColor | Color | - | Color of the scrollbar. | | scrollBarColor | Color | - | Color of the scrollbar.|
| scrollBarWidth | Length | - | Width of the scrollbar. | | scrollBarWidth | Length | - | Width of the scrollbar.|
- ScrollDirection - ScrollDirection enums
| Name | Description | | Name | Description |
| -------- | -------- | | ---------- | ---------- |
| Horizontal | Only horizontal scrolling is supported. | | Horizontal | Only horizontal scrolling is supported.|
| Vertical | Only vertical scrolling is supported. | | Vertical | Only vertical scrolling is supported.|
| None | Scrolling is disabled. | | None | Scrolling is disabled. |
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | ---------------------------------------- | ----------------------------- |
| onScrollBegin<sup>9+</sup>(dx: number, dy: number)&nbsp;=&gt;&nbsp;{ dxRemain: number, dyRemain: number } | Called when scrolling starts.<br>Parameters<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.| | onScrollBegin<sup>9+</sup>(dx: number, dy: number)&nbsp;=&gt;&nbsp;{ dxRemain: number, dyRemain: number } | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
| onScroll(xOffset: number, yOffset: number) =&gt; void | Invoked when scrolling starts. It returns the horizontal and vertical offsets. | | onScroll(xOffset:&nbsp;number,&nbsp;yOffset:&nbsp;number)&nbsp;=&gt;&nbsp;void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.|
| onScrollEdge(side: Edge) =&gt; void | Invoked when scrolling reaches the edge. | | onScrollEdge(side:&nbsp;Edge)&nbsp;=&gt;&nbsp;void | Invoked when scrolling reaches the edge. |
| onScrollEnd() =&gt; void | Invoked when scrolling stops. | | onScrollEnd()&nbsp;=&gt;&nbsp;void | Invoked when scrolling stops. |
> **NOTE** > **NOTE**
> > If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
> If the **onScrollBegin** event and **scrollBy** method are used to implement nested scrolling, you must set **edgeEffect** of the child scrolling node to **None**. For example, if the **\<Scroll>** component is nested with the **\<List>** component, the **edgeEffect** attribute of the **\<List>** component must be set to **EdgeEffect.None**.
## 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 **\<List>** and **\<Scroll>** components. Controller of the scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this component can be bound to the **\<List>** and **\<Scroll>** components.
### Objects to Import ### Objects to Import
``` ```
scroller: Scroller = new Scroller() scroller: Scroller = new Scroller()
``` ```
...@@ -74,11 +72,11 @@ Scrolls to the specified position. ...@@ -74,11 +72,11 @@ Scrolls to the specified position.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| xOffset | Length | Yes | - | Horizontal scrolling offset. | | xOffset | Length | Yes | - | Horizontal scrolling offset. |
| yOffset | Length | Yes | - | Vertical scrolling offset. | | yOffset | Length | Yes | - | Vertical scrolling offset. |
| 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:&nbsp;number,<br>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;\|<br>CubicBezier&nbsp;\|<br>SpringCurve<br>} | No | | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
### scrollEdge ### scrollEdge
...@@ -90,10 +88,18 @@ Scrolls to the edge of the container. ...@@ -90,10 +88,18 @@ Scrolls to the edge of the container.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type| Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----- | ---- | ---- | ---- | --------- |
| value | Edge | Yes | - | Edge position to scroll to. | | value | Edge | Yes | - | Edge position to scroll to.|
- Edge enums
| Name | Value | Description |
| ------ | ---- | ---------- |
| Top | 0 | Top edge.|
| Bottom | 2 | Bottom edge.|
### scrollPage ### scrollPage
...@@ -102,43 +108,42 @@ scrollPage(value: { next: boolean, direction?: Axis }): void ...@@ -102,43 +108,42 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
Scrolls to the next or previous page. Scrolls to the next or previous page.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | --------- | ------- | ---- | ---- | ------------------------------ |
| 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 **false** means to scroll to the previous page.|
| direction | Axis | No | - | Scrolling direction: horizontal or vertical. | | direction | Axis | No | - | Scrolling direction: horizontal or vertical. |
### currentOffset ### currentOffset
scroller.currentOffset(): Object currentOffset(): Object
Obtains the scrolling offset. Obtains the scrolling offset.
- Return value - Return value
| Type | Description | | Type | Description |
| -------- | -------- | | ------------------------------------------------------- | ------------------------------------------------------------ |
| {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset. | | {<br>xOffset:&nbsp;number,<br>yOffset:&nbsp;number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset. |
### scroller.scrollToIndex ### scrollToIndex
scroller.scrollToIndex(value: number): void scrollToIndex(value: number): void
Scrolls to the specified index. Scrolls to the item with the specified index.
> **NOTE** > **NOTE**
>
> Only the **\<List>** 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.|
### scrollBy ### scrollBy
...@@ -150,8 +155,7 @@ Scrolls by the specified amount. ...@@ -150,8 +155,7 @@ Scrolls by the specified amount.
> **NOTE** > **NOTE**
> > Only the **\<Scroll>** component is supported.
> Only the **\<Scroll>** component is supported.
- Parameters - Parameters
...@@ -202,17 +206,17 @@ struct ScrollExample { ...@@ -202,17 +206,17 @@ struct ScrollExample {
}) })
Button('scroll 100') Button('scroll 100')
.onClick(() => {// Click to scroll down 100.0. .onClick(() => { // Click to scroll down 100.0.
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
}) })
.margin({ top: 10, left: 20 }) .margin({ top: 10, left: 20 })
Button('back top') Button('back top')
.onClick(() => {// Click to go back to the top. .onClick(() => { // Click to go back to the top.
this.scroller.scrollEdge(Edge.Top) this.scroller.scrollEdge(Edge.Top)
}) })
.margin({ top: 60, left: 20 }) .margin({ top: 60, left: 20 })
Button('next page') Button('next page')
.onClick(() => {// Click to scroll down to the bottom. .onClick(() => { // Click to scroll down to the bottom.
this.scroller.scrollPage({ next: true }) this.scroller.scrollPage({ next: true })
}) })
.margin({ top: 110, left: 20 }) .margin({ top: 110, left: 20 })
...@@ -222,6 +226,8 @@ struct ScrollExample { ...@@ -222,6 +226,8 @@ struct ScrollExample {
``` ```
![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif) ![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
```ts ```ts
@Entry @Entry
@Component @Component
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册