Spectre Pagination
Spectre Pagination is used to create a pagination, it’s basically is used to enable navigation between pages in a website. The pagination used in spectre has a large block of connected links that are hard to miss and are easily scalable.
To create a pagination you need to add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted. You can add the disabled class to the page-item to have unclickable page links.
Spectre Pagination Class:
- pagination: This class is used to create pagination.
- page-item: This class is used to set the numbers or page item of pagination.
Note: The active and disabled class can be used to make the page-item active and disabled.
Syntax:
<ul class="pagination"> <li class="page-item disabled"> <a href="#">...</a> </li> <li class="page-item active"> <a href="#">...</a> </li> </ul>
Below examples illustrate Spectre Pagination:
Example 1:
HTML
<!DOCTYPE html> < html > < head > < title >SPECTRE Nav Class</ title > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 >w3wiki</ h1 > < strong >SPECTRE Pagination Class</ strong > </ center > < strong >Numeric Pagination:</ strong > < ul class = "pagination" > < li class = "page-item disabled" > < a href = "#" tabindex = "-1" >Previous</ a > </ li > < li class = "page-item " > < a href = "#" >1</ a > </ li > < li class = "page-item" > < a href = "#" >2</ a > </ li > < li class = "page-item" > < a href = "#" >3</ a > </ li > < li class = "page-item" > < span >...</ span > </ li > < li class = "page-item active" > < a href = "#" >12</ a > </ li > < li class = "page-item" > < a href = "#" >Next</ a > </ li > </ ul > < br >< br > < strong >Alphabetic Pagination:</ strong > < ul class = "pagination" > < li class = "page-item disabled" > < a href = "#" tabindex = "-1" >Previous</ a > </ li > < li class = "page-item " > < a href = "#" >A</ a > </ li > < li class = "page-item" > < a href = "#" >B</ a > </ li > < li class = "page-item" > < a href = "#" >C</ a > </ li > < li class = "page-item" > < span >...</ span > </ li > < li class = "page-item active" > < a href = "#" >Z</ a > </ li > < li class = "page-item" > < a href = "#" >Next</ a > </ li > </ ul > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < title >SPECTRE Pagination Class</ title > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 >w3wiki</ h1 > < strong >SPECTRE Pagination Class</ strong > </ center > < ul class = "pagination" > < li class = "page-item page-prev" > < a href = "#" > < div class = "page-item-subtitle" > Previous </ div > < div class = "page-item-title h5" > Spectre Nav </ div > </ a > </ li > < li class = "page-item page-next" > < a href = "#" > < div class = "page-item-subtitle" > Next </ div > < div class = "page-item-title h5" > Spectre Panel </ div > </ a > </ li > </ ul > </ body > </ html > |
Output:
Reference: https://picturepan2.github.io/spectre/components/pagination.html
Contact Us