Pagination

Navigation between multiple pages of content.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 

Examples

Basic

winduum

<nav class="x-pagination" aria-label="pagination">
    <a class="x-button sm square muted pointer-events-none" href="#" aria-current="page">1</a>
    <a class="x-button sm square ghosted" href="#">2</a>
    <a class="x-button sm square ghosted" href="#">3</a>
    <a class="x-button sm square ghosted" href="#">4</a>
    <a class="x-button sm square ghosted">...</a>
    <a class="x-button sm square ghosted" href="#">30</a>
</nav>

winduum-vue

<script setup lang="ts">
    import { Pagination } from '@/components/pagination'
    import { Button } from '@/components/button'
</script>

<template>
    <Pagination>
        <Button as="a" class="sm square muted pointer-events-none" href="#" aria-current="page">1</Button>
        <Button as="a" class="sm square ghosted" href="#">2</Button>
        <Button as="a" class="sm square ghosted" href="#">3</Button>
        <Button as="a" class="sm square ghosted" href="#">4</Button>
        <Button as="a" class="sm square ghosted">...</Button>
        <Button as="a" class="sm square ghosted" href="#">30</Button>
    </Pagination>
</template>

winduum-react

import { Pagination } from '@/components/pagination'
import { Button } from '@/components/button'

export function Example() {
    return (
        <Pagination>
            <Button as="a" className="sm square muted pointer-events-none" href="#" aria-current="page">1</Button>
            <Button as="a" className="sm square ghosted" href="#">2</Button>
            <Button as="a" className="sm square ghosted" href="#">3</Button>
            <Button as="a" className="sm square ghosted" href="#">4</Button>
            <Button as="a" className="sm square ghosted">...</Button>
            <Button as="a" className="sm square ghosted" href="#">30</Button>
        </Pagination>
    )
}