1# SwipeRefresher
2
3
4The swipe refresher is a component used to obtain and load content, typically with a pull-down gesture.
5
6> **NOTE**
7>
8> This component and its child components are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
9
10
11## Modules to Import
12
13```
14import { SwipeRefresher } from '@kit.ArkUI'
15```
16
17
18## Child Components
19
20Not supported
21
22## Attributes
23The [universal attributes](ts-universal-attributes-size.md) are supported.
24
25
26## SwipeRefresher
27
28SwipeRefresher ({content?: string, isLoading: boolean})
29
30**Decorator**: \@Component
31
32**Atomic service API**: This API can be used in atomic services since API version 11.
33
34**System capability**: SystemCapability.ArkUI.ArkUI.Full
35
36**Parameters**
37
38| Name| Type| Mandatory| Decorator| Description|
39| -------- | -------- | -------- | -------- | -------- |
40| content | string | No| \@Prop | Text displayed when the content is loaded.|
41| isLoading | boolean | If yes, | \@Prop | Whether content is being loaded.<br> The value **true** means that content is being loaded, and **false** means the opposite.|
42
43## Events
44The [universal events](ts-universal-events-click.md) are supported.
45
46## Example
47This example demonstrates how setting the **content** parameter to empty or non-empty strings and toggling the **isLoading** parameter between **true** and **false** affects the loading effect.
48```ts
49import { SwipeRefresher } from '@kit.ArkUI';
50
51@Entry
52@Component
53struct Index {
54  build() {
55    Column() {
56      SwipeRefresher({
57        content: 'Loading',
58        isLoading: true
59      })
60      SwipeRefresher({
61        content: '',
62        isLoading: true
63      })
64      SwipeRefresher({
65        content: 'Loading',
66        isLoading: false
67      })
68    }
69  }
70}
71```
72
73![Snipaste_2023-07-24_11-35-40](figures/Snipaste_2023-07-24_11-35-40.gif)
74