Pagination Concecpt

A more complex pagination

Comments / requirements:

  • we use up to six items in the pagination
    • still visisble and usaable on mobile
    • matches the “up-to-seven-items-are-manageable-for-the-human-brain” rule
  • all pagination items use the highlightColor as background color
  • the current page is show with colot defined in a new config item pagination.currentBgColor

Config pagination

[Params.pagination]
  useComplex = true # use the complex pagination
  currentPageBgColor = "#5C7F07" # the background color of the current page

Examples ( current / total )

1 / 1

no pagination

1 / 2

1
2

2 / 2

1
2

1 / 3

1
2
3

2 / 3

1
2
3

3 / 3

1
2
3

2 / 4

1
2
3
4

4 / 4

1
2
3
4

1 / 5

1
2
3
4
5

3 / 5

1
2
3
4
5

5 / 5

1
2
3
4
5

5 / 6

1
2
3
4
5
6

1 / 7 (here it gets interesting)

1
2
3
..
7
>

2 / 7

<
1
2
..
7
>

3 / 7

<
..
3
..
7
>

4 / 7

<
..
4
..
7
>

5 / 7

<
..
5
..
7
>

6 / 7

<
..
5
6
7
>

7 / 7

<
1
..
5
6
7

1 / 23

1
2
3
..
23
>

2 / 23

<
1
2
..
23
>

3 / 23

<
..
3
..
23
>

4 / 23

<
..
4
..
23
>

17 / 23

<
..
17
..
23
>

20 / 23

<
..
20
..
23
>

21 / 23

<
..
21
22
23
>

22 / 23

<
..
21
22
23
>

23 / 23

<
1
..
21
22
23