LayX
Download
Getting started
Introduction Installation Quick Start CLI
Core Concepts
Overview
Customize
Customize
Layout System
Breakpoints Container Component Layout Component
Main
Base Typography
Components
Accordion Alert Breadcrumb Button Card Carousel Chart Dialog Draggable Form Footer Media Navbar Pagination Popover Sheet Section Tab Tooltip Window
Helpers
Flex and Grid Layout
Utilities
Border Color Display Flex Grid Height Margin Opacity Padding Position Shadow Width Z-index
Others
Background Dynamic Render Icon PWA Partial Render Scroll Driven Animation Smooth Scroll Syntax Highlighter Theme View Transition
About
Contributing License
Pagination

The Pagination component allows users to navigate through multiple pages of content, such as search results or a list of items. It supports dynamic rendering, customization, and accessibility.

Examples

Below is an example of a basic Pagination component:

1
2
3
<nav class="pagination"> <div class="item prev"><a href="#"></a></div> <div class="item"><a href="#">1</a></div> <div class="item active"><a href="#">2</a></div> <div class="item"><a href="#">3</a></div> <div class="item next"><a href="#"></a></div> </nav>
Useful Info

Key details for customizing and utilizing the Pagination component:

  • CSS variables allow for easy customization:
    • --gap: Space between pagination items.
    • --color: Text color of pagination links.
    • --bg: Background color of pagination.
    • --item-bg: Background color of pagination items.
    • --item-hover-bg: Color of the hovered pagination item.
    • --item-active-bg: Color of the active pagination item.
  • Add the .active class to the current page's .item.
  • Use semantic HTML with <nav> and proper ARIA attributes for accessibility.
  • Icons can be used instead of text for "Previous" and "Next" buttons.
See Example