SushiIndicator¶

A composable that displays page indicators for carousel or pager components.

SushiIndicator integrates with Compose's PagerState to automatically reflect the current page and animate transitions between pages. It offers three distinct visual styles:

Balloon: Dots expand like a balloon when active
Shift: Active dots expand horizontally into a pill shape
Spring: A separate selector dot moves between fixed position dots

Example¶

The SushiIndicator component is used to display page indicators that integrate with pagers.

// Create a pager state
val pagerState = rememberPagerState { 5 }

// Basic Balloon Indicator
SushiIndicator(
    dotCount = 5,
    type = SushiIndicatorType.Balloon(),
    pagerState = pagerState,
    modifier = Modifier.padding(16.dp)
)

// Shift Indicator with custom color
SushiIndicator(
    dotCount = 5,
    type = SushiIndicatorType.Shift(
        dotsGraphic = DotGraphic(
            color = SushiTheme.colors.blue.v500.value
        )
    ),
    pagerState = pagerState,
    modifier = Modifier.padding(16.dp)
)

// Spring Indicator with custom dots
SushiIndicator(
    dotCount = 5,
    type = SushiIndicatorType.Spring(
        dotsGraphic = DotGraphic(
            color = Color.Transparent,
            borderColor = SushiTheme.colors.base.theme.v500.value,
            borderWidth = 2.dp,
            size = 12.dp
        ),
        selectorDotGraphic = DotGraphic(
            color = SushiTheme.colors.base.theme.v500.value,
            size = 10.dp
        )
    ),
    pagerState = pagerState,
    modifier = Modifier.padding(16.dp)
)

// Manual control version
SushiIndicator(
    dotCount = totalPages,
    type = SushiIndicatorType.Balloon(),
    currentPage = currentPage,
    currentPageOffsetFraction = { currentOffset },
    onDotClicked = { index -> 
        // Handle dot click to navigate to that page
    },
    modifier = Modifier.padding(16.dp)
)

Component API¶

SushiIndicator¶

Parameter	Description
`dotCount`	The total number of pages to display indicators for
`type`	The visual style of the indicators (Balloon, Shift, or Spring)
`pagerState`	The state of the associated pager component
`currentPage`	The current page index (for manual control version)
`currentPageOffsetFraction`	Function providing fractional offset (for manual control)
`dotSpacing`	Spacing between adjacent dots
`onDotClicked`	Optional callback for when a dot is clicked

Indicator Types¶

Balloon¶

Parameter	Description
`dotsGraphic`	The appearance configuration for the dots
`balloonSizeFactor`	The maximum size multiplication factor for the active dot

Shift¶

Parameter	Description
`dotsGraphic`	The appearance configuration for the dots
`shiftSizeFactor`	The maximum width multiplication factor for the active dot

Spring¶

Parameter	Description
`dotsGraphic`	The appearance configuration for the background dots
`selectorDotGraphic`	The appearance configuration for the moving selector dot

DotGraphic¶

Parameter	Description
`size`	The diameter/size of the dot
`color`	The fill color of the dot
`shape`	The shape of the dot (default is CircleShape)
`borderWidth`	Optional width of the border around the dot
`borderColor`	The color of the border (if borderWidth is specified)