SushiVerticalPager

SushiVerticalPager allow users to swipe between pages of content. It provides a way to create carousels, image galleries, onboarding flows, or any UI that requires paging through content, and enables vertical swiping.

Example

// Create a PagerState for vertical paging
val pagerState = rememberPagerState(pageCount = { 5 })

// Create a vertical pager
SushiVerticalPager(
    state = pagerState,
    modifier = Modifier
        .fillMaxWidth()
        .height(400.dp)
) { page ->
    // Content for each page
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        SushiText(
            props = SushiTextProps(
                text = "Vertical Page ${page + 1}",
                type = SushiTextType.Bold700
            )
        )
    }
}

Programmatic Navigation

val scope = rememberCoroutineScope()
val pagerState = rememberPagerState(pageCount = { 5 })

// Navigate to a specific page with animation
SushiButton(
    props = SushiButtonProps(text = "Next Page"),
    onClick = {
        scope.launch {
            val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
            pagerState.animateScrollToPage(nextPage)
        }
    }
)

Auto-Scrolling Carousel

// Auto-scroll effect
var autoScrollEnabled by remember { mutableStateOf(true) }
val pagerState = rememberPagerState(pageCount = { items.size })

LaunchedEffect(autoScrollEnabled) {
    if (autoScrollEnabled) {
        while(true) {
            delay(3000) // Scroll every 3 seconds
            val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
            pagerState.animateScrollToPage(nextPage)
        }
    }
}

// The pager
SushiVerticalPager(
    state = pagerState,
    // other properties
) { page ->
    // Page content
}

Using with Page Indicators

Box(modifier = Modifier.fillMaxWidth()) {
    // The pager
    SushiVerticalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
    ) { page ->
        // Page content
    }

    // Page indicators at the bottom
    Box(
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .padding(16.dp)
    ) {
        SushiIndicator(
            dotCount = pagerState.pageCount,
            type = SushiIndicatorType.Balloon(
                dotsGraphic = DotGraphic(
                    color = Color.White,
                    size = 8.dp
                )
            ),
            pagerState = pagerState
        )
    }
}

Component API

SushiVerticalPager Parameters

Both components share most parameters, with slight differences due to orientation:

Parameter	Description
state	The state object to control and observe the pager's state
modifier	The modifier to be applied to the pager
contentPadding	Padding to be applied to the pager content
pageSize	Strategy defining how pages should be sized
beyondViewportPageCount	The number of pages to keep loaded beyond the visible viewport
pageSpacing	Spacing between each page
flingBehavior	The fling behavior that defines how the pager should handle fling gestures
userScrollEnabled	Whether user scrolling is enabled
reverseLayout	Whether the layout should be reversed
key	Optional lambda to provide a unique key for each page
pageNestedScrollConnection	Nested scroll connection to be applied to each page
snapPosition	Position to which the pages should snap
horizontalAlignment	Horizontal alignment of each page within the pager