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> This component is not supported on wearables. 11 12 13## Modules to Import 14 15``` 16import { SwipeRefresher } from '@kit.ArkUI'; 17``` 18 19 20## Child Components 21 22Not supported 23 24## Attributes 25The [universal attributes](ts-component-general-attributes.md) are not supported. 26 27 28## SwipeRefresher 29 30SwipeRefresher ({content?: ResourceStr, isLoading: boolean}) 31 32**Decorator**: @Component 33 34**Atomic service API**: This API can be used in atomic services since API version 11. 35 36**System capability**: SystemCapability.ArkUI.ArkUI.Full 37 38**Parameters** 39 40| Name| Type| Mandatory| Decorator| Description | 41| -------- | -------- | -------- | -------- |--------------------------------------------------------------------| 42| content | [ResourceStr](ts-types.md#resourcestr) | No| @Prop | Text displayed when the content is loaded.<br>The default value is an empty string.<br>**NOTE**<br>If the text length exceeds the column width, it will be truncated. The Resource type is supported since API version 20. | 43| isLoading | boolean | Yes | \@Prop | Whether content is being loaded.<br> The value **true** means that content is being loaded,<br> and **false** means the opposite.| 44 45## Events 46The [universal events](ts-component-general-events.md) are not supported. 47 48## Example 49This 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. 50```ts 51import { SwipeRefresher } from '@kit.ArkUI'; 52 53@Entry 54@Component 55struct Index { 56 build() { 57 Column() { 58 SwipeRefresher({ 59 content: 'Loading', 60 isLoading: true 61 }) 62 SwipeRefresher({ 63 content: '', 64 isLoading: true 65 }) 66 SwipeRefresher({ 67 content: 'Loading', 68 isLoading: false 69 }) 70 } 71 } 72} 73``` 74 75 76
