# GlimmerHorizontalPager

## 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/xr/glimmer/pager/GlimmerHorizontalPager.composable#GlimmerHorizontalPager(androidx.xr.glimmer.pager.GlimmerPagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function0,kotlin.Function2)( state: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerPagerState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, beyondViewportPageCount: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, pageSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, key: ((page: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)?, pageIndicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, pageContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerPagerScope.(page: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerHorizontalPager.composable#GlimmerHorizontalPager(androidx.xr.glimmer.pager.GlimmerPagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function0,kotlin.Function2)` is a lazily-composed, horizontally scrollable layout that arranges its pages sequentially. |

## Functions

### GlimmerHorizontalPager

Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/pager/GlimmerPager.kt+function:GlimmerHorizontalPager)

```
@Composable
fun GlimmerHorizontalPager(
    state: GlimmerPagerState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    beyondViewportPageCount: Int = 0,
    pageSpacing: Dp = 0.dp,
    verticalAlignment: Alignment.Vertical = Alignment.Bottom,
    userScrollEnabled: Boolean = true,
    reverseLayout: Boolean = false,
    key: ((page: Int) -> Any)? = null,
    pageIndicator: @Composable () -> Unit = { GlimmerHorizontalPagerDefaults.PageIndicator(state) },
    pageContent: @Composable GlimmerPagerScope.(page: Int) -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerHorizontalPager.composable#GlimmerHorizontalPager(androidx.xr.glimmer.pager.GlimmerPagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function0,kotlin.Function2)` is a lazily-composed, horizontally scrollable layout that arranges its pages sequentially. It is similar to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/HorizontalPager.composable#HorizontalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)`, but contains Glimmer behaviors and default values. Only one page is prominently displayed at a time, and the pager uses snap animations to ensure that a page always settles exactly into the viewport boundaries after a user's scrolling gesture ends.

Note: When displaying text within a `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerHorizontalPager.composable#GlimmerHorizontalPager(androidx.xr.glimmer.pager.GlimmerPagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function0,kotlin.Function2)`, it is strongly recommended to set `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle#textMotion()` to `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextMotion#Animated()`. This ensures smooth rendering during layout animations or scaling transitions, preventing pixel-snapping artifacts.

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextMotion
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.LocalTextStyle
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.pager.GlimmerHorizontalPager
import androidx.xr.glimmer.pager.GlimmerPagerState
import androidx.xr.glimmer.pager.rememberGlimmerPagerState

val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(state = pagerState, modifier = Modifier.fillMaxSize()) { page ->
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerPagerState` | the state object to be used to control or observe the pager's state. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the modifier to apply to this layout. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = PaddingValues(0.dp)` | a padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/package-summary#GlimmerHorizontalPager(androidx.xr.glimmer.pager.GlimmerPagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function0,kotlin.Function2)` param. You can use it to add a padding before the first page or after the last one. Use `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/package-summary#GlimmerHorizontalPager(androidx.xr.glimmer.pager.GlimmerPagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function0,kotlin.Function2)` to add spacing between the pages. |
| `beyondViewportPageCount: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = 0` | Pages to compose and layout before and after the list of visible pages. Note: Be aware that using a large value for `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/package-summary#GlimmerHorizontalPager(androidx.xr.glimmer.pager.GlimmerPagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function0,kotlin.Function2)` will cause a lot of pages to be composed, measured and placed which will defeat the purpose of using lazy loading. This should be used as an optimization to pre-load a couple of pages before and after the visible ones. This does not include the pages automatically composed and laid out by the pre-fetcher in the direction of the scroll during scroll events. |
| `pageSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | The amount of space to be used to separate the pages in this Pager |
| `verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = Alignment.Bottom` | how pages are aligned vertically within the pager's viewport. |
| `userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerPagerState#scroll(androidx.compose.foundation.MutatePriority,kotlin.coroutines.SuspendFunction1)` even when it is disabled. |
| `reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling and layout. |
| `key: ((page: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)? = null` | a stable and unique key representing the item. When specified, the scroll position will be maintained based on the key. If null, the position in the pager will represent the key. |
| `pageIndicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { GlimmerHorizontalPagerDefaults.PageIndicator(state) }` | a page indicator that represents the currently selected page to the user. |
| `pageContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/xr/glimmer/pager/GlimmerPagerScope.(page: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | a block that describes the content of a single page. |