Pagination

The pagination widget uses the <devsite-pagination> custom element to display paginated content or toggle the amount of content shown.

General usage

The following example uses the <devsite-pagination> custom element to specify a container element that paginates four <div> elements per page.

Div 1

Div 2

Div 3

Div 4

Div 5

Div 6

Div 7

Div 8

Div 9

Div 10

Div 11

Div 12

Div 13

Div 14

Div 15

Multiple HTML elements

The following example uses the <devsite-pagination> custom element to specify a container element that paginates both <p> and <div> elements in the same container.

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

This is paragraph 5.

This is paragraph 6.

This is div 1.

This is div 2.

This is div 3.

This is div 4.

This is div 5.

This is div 6.

Buttons UI

The following example uses the <devsite-pagination> custom element to specify a container element that loads eight initial <div> elements and can be toggled to display More.

Div 1

Div 2

Div 3

Div 4

Div 5

Div 6

Div 7

Div 8

Div 9

Div 10

Div 11

Div 12

Div 13

Div 14

Div 15

Start-expand

The following example uses the <devsite-pagination> custom element to specify a container element with a start-expanded attribute that loads all <div> elements and can be toggled to display Less.

Div 1

Div 2

Div 3

Div 4

Div 5

Div 6

Div 7

Div 8

Div 9

Div 10

Div 11

Div 12

Div 13

Div 14

Div 15