CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Pagination

Use pagination to separate long sets of data so that it is easier for a user to consume information.
  • Examples
  • Properties
  • Accessibility

Examples

loading...

Web Component

Chi Vue

Props

Property
Description
Type
Default
ariaLabel
To define aria label of pagination
string
'Pagination'
compact
To define compact style of pagination
boolean
false
currentPage
To define current page of pagination
number
1
firstLast
To add First page / Last page icon buttons
boolean
false
inverse
To render inverse styled pagination
boolean
false
pageJumper
To add jump to page text input
boolean
false
pageSize
To allow use select number of items to show per page
boolean
false
pages
To define number of pages to render
number
undefined
results
To show number of result items
number
0
size
To define size of pagination elements
string
'md'

Events

Event
Description
Type
chiPageChange
Triggered when the user navigates to another page by clicking pagination item buttons or changing value of Page Jumper input
CustomEvent<number>
chiPageSizeChange
Triggered when the user changes items per page value
CustomEvent<number>

Accessibility

Accessibility guidelines coming soon