flowbite-svelte icon indicating copy to clipboard operation
flowbite-svelte copied to clipboard

Pagination add slots for Beginning and End

Open solvingproblemswithtechnology opened this issue 1 year ago • 0 comments
trafficstars

Summary

Hi! I need to support additional buttons for going to the first page and to the last page.

Basic example

I would like to either have two new slots + its events for beginning and end

<Pagination {pages} ulClass="inline-flex -space-x-px items-center justify-center w-full" on:previous="{() => handle(-1)}" on:next="{() => handle(+1)}">
	<svelte:fragment slot="beginning">
		<span class="sr-only">Previous</span>
		<ChevronDoubleLeftOutlineclass="w-2.5 h-2.5" />
	</svelte:fragment>
	<svelte:fragment slot="prev">
		<span class="sr-only">Previous</span>
		<ChevronLeftOutline class="w-2.5 h-2.5" />
	</svelte:fragment>
	<svelte:fragment slot="next">
		<span class="sr-only">Next</span>
		<ChevronRightOutline class="w-2.5 h-2.5" />
	</svelte:fragment>
	<svelte:fragment slot="end">
		<span class="sr-only">Next</span>
		<ChevronDoubleRightOutline class="w-2.5 h-2.5" />
	</svelte:fragment>
</Pagination>

OR adding a "left" and "right" slot wrapping "prev" and "next", being able to modify the whole layout and not only the things inside the

  • <PaginationItem>
    <Pagination {pages} ulClass="inline-flex -space-x-px items-center justify-center w-full" on:previous="{() => handle(-1)}" on:next="{() => handle(+1)}">
    	<svelte:fragment slot="left">
    		<PaginationItem>
    			<span class="sr-only">Beggining</span>
    			<ChevronDoubleLeftOutline class="w-2.5 h-2.5" />
    		</PaginationItem>
    		<PaginationItem>
    			<span class="sr-only">Previous</span>
    			<ChevronLeftOutline class="w-2.5 h-2.5" />
    		</PaginationItem>
    	</svelte:fragment>
    	<svelte:fragment slot="right">
    		<PaginationItem>
    			<span class="sr-only">Next</span>
    			<ChevronRightOutline class="w-2.5 h-2.5" />
    		</PaginationItem>
    		<PaginationItem>
    			<span class="sr-only">End</span>
    			<ChevronDoubleRightOutline class="w-2.5 h-2.5" />
    		</PaginationItem>
    	</svelte:fragment>
    </Pagination>
    

    First approach is simple, second is more flexible. I'm fine with both.

    Motivation

    Why are we doing this? What use cases does it support? What is the expected outcome?