Infinite Scroll
Infinite Scroll allows to load additional content or do any other required action when page scroll is near to the bottom.
| Type | Resource |
|---|---|
| Design | Figma |
| Mobile | Mobile Storybook |
| Code | Gitlab |
Usage
import id.co.biofarma.binduiandroid.components.infinite_scroll.InfiniteScrollInfiniteScroll(
id = "preview",
contentItems = items,
isLoading = true,
loadMoreItems = {
isLoading = true
CoroutineScope(Dispatchers.IO).launch {
delay(2000) // Simulate network delay
val newItems: List<@Composable () -> Unit> = (items.size + 1..items.size + 20).map { index ->
{ SampleItemComponent("Item $index") }
}
withContext(Dispatchers.Main) {
items = items + newItems
isLoading = false
}
}
},
loadingType = "spinner",
loadingSize = "sm",
buffer = 5,
loadingText = "Loading Content"
)Examples
Loading Type
Use loading type spinner, dot or horizontal to use a loading type for infinite scroll.
Loading Size
Use loading size xs, sm, md, lg, or xl to use a loading size for infinite scroll.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | false | - | string | A unique identifier for the infinite scroll. |
| contentItems | false | - | List<@Composable () -> Unit> = listOf() | List of list content displayed for infinite scroll. |
| isLoading | false | false | boolean | If true, will display loading while scrolling. |
| loadMoreItems | false | - | List<@Composable () -> Unit> = listOf() | Function to load data when scrolling. |
| loadingType | false | spinner | spinner , dot , horizontal | The type variant of the loading (spinner, dot , horizontal). |
| loadingSize | false | md | xs, sm, md, lg, xl | The size of loading component (xs, sm, md, lg, xl). |
| loadingText | false | - | string | A unique identifier loading text for the infinite scroll. |
| buffer | false | 5 | int | The buffer value used for infinite scroll. |