# VerticalPageIndicator

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/VerticalPageIndicator.composable#VerticalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)( pagerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/PagerState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, selectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, unselectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` Vertical page indicator for use with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`, representing the currently active page and the approximate number of pages. |

## Functions

### VerticalPageIndicator

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/PageIndicator.kt+function:VerticalPageIndicator) Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.6.0)

```
@Composable
fun VerticalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor
): Unit
```

Vertical page indicator for use with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`, representing the currently active page and the approximate number of pages. Pages are indicated as a Circle shape. The indicator shows up to six pages individually - if there are more than six pages, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/VerticalPageIndicator.composable#VerticalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` shows a smaller indicator to the top and/or bottom to indicate that more pages are available.

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using `Alignment.CenterEnd`, such as by setting `modifier = Modifier.align(Alignment.CenterEnd)`. This way, the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/VerticalPageIndicator.composable#VerticalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` will appear on the right in Ltr orientation and on the left in Rtl orientation. If `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/VerticalPageIndicator.composable#VerticalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` is used through `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/VerticalPagerScaffold.composable#VerticalPagerScaffold(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.animation.core.AnimationSpec,kotlin.Function0)`, then alignment is implicitly set by `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/VerticalPagerScaffold.composable#VerticalPagerScaffold(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.animation.core.AnimationSpec,kotlin.Function0)`.

Example usage with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPageIndicator
import androidx.wear.compose.material3.VerticalPagerScaffold

val pageCount = 9
val pagerState = rememberPagerState { pageCount }

Box {
    VerticalPagerScaffold(
        pagerState = pagerState,
        pageIndicator = { VerticalPageIndicator(pagerState = pagerState) },
    ) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe up and down")
                }
            }
        }
    }
}
```

| Parameters |
|---|---|
| `pagerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/PagerState` | State of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/pager/VerticalPager.composable#VerticalPager(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` used to control this indicator |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/VerticalPageIndicator.composable#VerticalPageIndicator(androidx.wear.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` |
| `selectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PageIndicatorDefaults.selectedColor` | The color which will be used for a selected indicator item. |
| `unselectedColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PageIndicatorDefaults.unselectedColor` | The color which will be used for an unselected indicator item. |
| `backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = PageIndicatorDefaults.backgroundColor` | The color which will be used for an indicator background. |