docs: pagination

Author: segunadebayo

packages/solid/src/components/pagination/examples/link.tsx

@@ -0,0 +1,35 @@
+import { Pagination, usePagination } from '@ark-ui/solid/pagination'
+import { For } from 'solid-js'
+
+export const Link = () => {
+  const pagination = usePagination({
+    type: 'link',
+    count: 100,
+    pageSize: 10,
+    siblingCount: 2,
+  })
+
+  const getHref = (page: number | null) => (page != null ? `/page=${page}` : '/')
+
+  return (
+    <Pagination.RootProvider value={pagination}>
+      <a {...pagination().getPrevTriggerProps()} href={getHref(pagination().previousPage)}>
+        Previous
+      </a>
+      <For each={pagination().pages}>
+        {(page, index) =>
+          page.type === 'page' ? (
+            <a {...pagination().getItemProps(page)} href={getHref(page.value)}>
+              {page.value}
+            </a>
+          ) : (
+            <span {...pagination().getEllipsisProps({ index: index() })}>&#8230;</span>
+          )
+        }
+      </For>
+      <a {...pagination().getNextTriggerProps()} href={getHref(pagination().nextPage)}>
+        Next
+      </a>
+    </Pagination.RootProvider>
+  )
+}

packages/solid/src/components/pagination/pagination.stories.tsx

@@ -11,6 +11,7 @@ export { Context } from './examples/context'
 export { Controlled } from './examples/controlled'
 export { Customized } from './examples/customized'
 export { DataSlicing } from './examples/data-slicing'
+export { Link } from './examples/link'
 export { PageRange } from './examples/page-range'
 export { PageSizeControl } from './examples/page-size-control'
 export { RootProvider } from './examples/root-provider'

packages/svelte/src/lib/components/pagination/examples/link.svelte

@@ -4,19 +4,19 @@
   const id = $props.id()
   const pagination = usePagination({
     id,
-    count: 5000,
+    type: 'link',
+    count: 100,
     pageSize: 10,
     siblingCount: 2,
   })
 
   const getHref = (page: number | null) => (page != null ? `/page=${page}` : '/')
 </script>
 
-<button onclick={() => pagination().goToNextPage()}>Next Page</button>
-
 <Pagination.RootProvider value={pagination}>
-  <a {...pagination().getPrevTriggerProps()} href={getHref(pagination().previousPage)}>Previous</a>
-
+  <a {...pagination().getPrevTriggerProps()} href={getHref(pagination().previousPage)}>
+    Previous
+  </a>
   {#each pagination().pages as page, index (index)}
     {#if page.type === 'page'}
       <a {...pagination().getItemProps(page)} href={getHref(page.value)}>
@@ -26,6 +26,7 @@
       <span {...pagination().getEllipsisProps({ index })}>&#8230;</span>
     {/if}
   {/each}
-
-  <a {...pagination().getNextTriggerProps()} href={getHref(pagination().nextPage)}>Next</a>
+  <a {...pagination().getNextTriggerProps()} href={getHref(pagination().nextPage)}>
+    Next
+  </a>
 </Pagination.RootProvider>

packages/vue/src/components/pagination/examples/link.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Pagination, usePagination } from '@ark-ui/vue/pagination'
+
+const pagination = usePagination({
+  type: 'link',
+  count: 100,
+  pageSize: 10,
+  siblingCount: 2,
+})
+
+const getHref = (page: number | null) => (page != null ? `/page=${page}` : '/')
+</script>
+
+<template>
+  <Pagination.RootProvider :value="pagination">
+    <a v-bind="pagination.getPrevTriggerProps()" :href="getHref(pagination.previousPage)">Previous</a>
+    <template v-for="(page, index) in pagination.pages" :key="index">
+      <a v-if="page.type === 'page'" v-bind="pagination.getItemProps(page)" :href="getHref(page.value)">
+        {{ page.value }}
+      </a>
+      <span v-else v-bind="pagination.getEllipsisProps({ index })">&#8230;</span>
+    </template>
+    <a v-bind="pagination.getNextTriggerProps()" :href="getHref(pagination.nextPage)">Next</a>
+  </Pagination.RootProvider>
+</template>

packages/vue/src/components/pagination/pagination.stories.vue

@@ -3,6 +3,7 @@ import Basic from './examples/basic.vue'
 import Context from './examples/context.vue'
 import Customized from './examples/customized.vue'
 import DataSlicing from './examples/data-slicing.vue'
+import Link from './examples/link.vue'
 import PageRange from './examples/page-range.vue'
 import PageSizeControl from './examples/page-size-control.vue'
 import RootProvider from './examples/root-provider.vue'
@@ -21,6 +22,9 @@ import RootProvider from './examples/root-provider.vue'
     <Variant title="DataSlicing">
       <DataSlicing />
     </Variant>
+    <Variant title="Link">
+      <Link />
+    </Variant>
     <Variant title="PageRange">
       <PageRange />
     </Variant>

website/src/content/pages/components/pagination.mdx

@@ -63,6 +63,13 @@ select element to change the page size.
 
 <Example id="page-size-control" />
 
+### Link Pagination
+
+Create pagination with link navigation for better SEO and accessibility. This example shows how to use the pagination
+component with anchor links instead of buttons.
+
+<Example id="link" />
+
 ### Root Provider
 
 The `RootProvider` component provides a context for the pagination. It accepts the value of the `usePagination` hook.