Etat Pur Design System

Pagination Simple: Large 

<div x-data="pagination()" class="flex items-center gap-2">
    <button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1" :class="[
            size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
            size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
            size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
        ]" class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> </button>

    <template x-for="page in totalPages" :key="page">
        <button @click="goToPage(page)" x-text="page" :class="[
                    currentPage === page ? 'bg-brand-500' : '',
                    size === 'small' ? 'min-h-8 px-2 py-1.5 rounded text-click-xs' : '',
                    size === 'medium' ? 'min-h-10 px-4 py-2 rounded text-click-sm' : '',
                    size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg text-click-base' : ''
                ]" class="transition-all inline-flex justify-start items-center hover:bg-brand-200"></button>
    </template>

    <button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages" :class="[
                size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
                size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
                size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
            ]" class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900">
        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> </button>
</div>

<script>
    function pagination() {
        return {
            currentPage: 1,
            totalPages: 8,
            size: 'large',
            goToPage(page) {
                if (page >= 1 && page <= this.totalPages) {
                    this.currentPage = page;
                }
            }
        }
    }
</script>
 
<div
        x-data="pagination()"
        class="flex items-center gap-2"
>
    <button
        @click="goToPage(currentPage - 1)"
        :disabled="currentPage === 1"
        :class="[
            size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
            size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
            size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
        ]"
        class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900"
    >
        {% render "@icons-heroicons--arrow-left-outline" with {
            size: size == "small" ? 16 : 24
        } %}
    </button>

    <template x-for="page in totalPages" :key="page">
        <button
                @click="goToPage(page)"
                x-text="page"
                :class="[
                    currentPage === page ? 'bg-brand-500' : '',
                    size === 'small' ? 'min-h-8 px-2 py-1.5 rounded text-click-xs' : '',
                    size === 'medium' ? 'min-h-10 px-4 py-2 rounded text-click-sm' : '',
                    size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg text-click-base' : ''
                ]"
                class="transition-all inline-flex justify-start items-center hover:bg-brand-200"
        ></button>
    </template>

    <button
            @click="goToPage(currentPage + 1)"
            :disabled="currentPage === totalPages"
            :class="[
                size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
                size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
                size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
            ]"
            class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900"
    >
        {% render "@icons-heroicons--arrow-right-outline" with {
            size: size == "small" ? 16 : 24
        } %}
    </button>
</div>

<script>
	function pagination() {
		return {
			currentPage: {{ currentPage }},
			totalPages: {{ totalPages }},
			size: '{{ size }}',
			goToPage(page) {
				if (page >= 1 && page <= this.totalPages) {
					this.currentPage = page;
				}
			}
		}
	}
</script>
 
{
  "size": "large",
  "currentPage": 1,
  "totalPages": 8,
  "showMore": true,
  "isLoading": false,
  "loadMoreLabel": "afficher plus"
}

No notes defined.