Pagination communicates the number of other content loaded within a given context. It shows the user where they are and enables access to the previous and next content.

Figma

The Pagination component is used to show that several elements are aligned horizontally. You can switch between these elements with a swipe.

1. Reference

This component inherits props from the Pagination.

Prop

Type

Default

count

state

default

selected

default

mode

dark

light

dark

2. Count

You can edit the count with the 2, 3, 4 or 5 parameter.

Image 2.1 : Count 2

Image 2.2 : Count 3

Image 2.3 : Count 4

Image 2.4 : Count 5

3. State

You can edit the state with the default or selected parameter.

Image 3.1 : State selected

Image 3.2 : State default

4. Mode

You can edit the mode with the light or dark parameter.

Image 4.1 : Mode dark

Image 4.2 : Mode light

Jetpack Compose

The Pagination component is used to show that several elements are aligned horizontally. You can switch between these elements with a swipe.

1. Reference

This component inherits props from the Pagination.

Prop

Type

Default

count

"number"

mode

.dark

.light

.dark

selected

2. Count

You can edit the count with the "number" parameter.

Pagination(
count = 2,
mode = PaginationMode.dark,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
‍
}
)

Pagination(
count = 5,
mode = PaginationMode.dark,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
‍
}
)

3. Mode

You can edit the mode with the .light or .dark parameter.

Pagination(
count = 5,
mode = PaginationMode.dark,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
‍
}
)

Pagination(
count = 5,
mode = PaginationMode.light,
currentPage = remember {
mutableIntStateOf(0)
},
onDotClicked = {
‍
}
)

Preview

Code

const DlPagination(
  count: 3,
)

Copy

Usage

Add this code example to your project to see how the component works.

const DlPagination(
  count: 3,
)

Copy

API Reference

DlPagination is a compact dot-based selector that renders a configurable number of 12x12 tap targets with centered 8x8 indicators and automatically updates the active item on tap.

Prop

Type

Default

count

int

initialIndex

int

onChanged

ValueChanged<int>?

null

key

Key?