CSS Pagination

Last updated: 4 months ago

Category: Navigation

Pagination is not packaged as a component because different systems use pagination in various ways. Designing pagination with native HTML and CSS allows flexible combination of pagination elements for different scenarios. These elements include 'previous page/next page/first page/last page/page number statistics/page numbers', etc.

Simple Usage

Wrap with _pagination class. Use:

• selected attribute for current page
• rep=total for total pages count
• rep=prev for previous page
• rep=next for next page
• rep=first for first page
• rep=last for last page

By default centered. Combine with:

• align=start for left alignment
• align=end for right alignment

Multiple Variations

Navigation icons can be:

• Plain text
• Special characters
• Font icons

Using Form Fields

Pagination often includes page jump and items per page selection, which may require select and input fields.

Default pagination height (32px) is smaller than form fields (40px), so use CSS variables to align them.

We typically use the framework's custom form fields for items per page and page jump.

Sizes

Default pagination height is 32px. Set size with:

• size=sm: 24px height
• size=md: 32px height (default)
• size=lg: 40px height (matches default form field height)

Button Group Style

Standard structure includes:

• rep=main: Contains page numbers and all navigation buttons
• rep=pages: Contains only page numbers

Add type=group attribute to implement button group style.

Minimalist Style

Use type=plain attribute for simplest minimalist style. This removes borders from navigation buttons and page numbers.

Special Characters

When using special characters in pagination, add _char class to increase their font size since default size is small.