Pagination experimental
Ark UI Pagination 기반 wrapper입니다. Root, RootProvider, Context, Ellipsis, FirstTrigger, PrevTrigger, Item, NextTrigger, LastTrigger anatomy를 제공합니다.
Preview
<script lang="ts">
import * as Pagination from '@odbd/svelte/pagination'
</script>
<Pagination.Root
count={128}
defaultPage={3}
defaultPageSize={10}
siblingCount={1}
style="max-width: 30rem;"
>
<Pagination.PrevTrigger aria-label="이전 페이지">
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path
d="M10 4l-4 4 4 4"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</Pagination.PrevTrigger>
<Pagination.Context>
{#snippet render(api)}
{#each api().pages as page, index}
{#if page.type === 'page'}
<Pagination.Item type="page" value={page.value}>{page.value}</Pagination.Item>
{:else}
<Pagination.Ellipsis {index}>…</Pagination.Ellipsis>
{/if}
{/each}
{/snippet}
</Pagination.Context>
<Pagination.NextTrigger aria-label="다음 페이지">
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path
d="M6 4l4 4-4 4"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</Pagination.NextTrigger>
</Pagination.Root>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Pagination from '@odbd/svelte/pagination' import { Pagination } from '@odbd/react/pagination'