flowbite-svelte
flowbite-svelte copied to clipboard
Pagination add slots for Beginning and End
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
<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?