mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
53 lines
1.3 KiB
Text
53 lines
1.3 KiB
Text
---
|
|
components: ["Pagination", "PaginationSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import { Pagination, PaginationSkeleton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />
|
|
|
|
## Current page
|
|
|
|
<Pagination totalItems={102} page={4} />
|
|
|
|
## Custom page sizes
|
|
|
|
<Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />
|
|
|
|
## Unknown pages
|
|
|
|
If the total number of pages is unknown, set `pagesUnknown` to `true`.
|
|
|
|
This will render the item range text without factoring in the total number of pages.
|
|
|
|
<Pagination pagesUnknown />
|
|
|
|
## Page window
|
|
|
|
The number of native select items rendered is derived from the value of `totalItems`.
|
|
|
|
If `totalItems` is a very large number, this can impact rendering performance since
|
|
thousands of elements may be rendered. By default, the window of rendered items is
|
|
capped at 1,000. For example, if `totalItems=100_000` and the `pageSize=10`,
|
|
1,000 select options are rendered.
|
|
|
|
Use the `pageWindow` prop to increase this value.
|
|
|
|
<Pagination totalItems={100_000} pageSizes={[10, 15, 20]} />
|
|
|
|
## Hidden page input
|
|
|
|
<Pagination totalItems={102} pageInputDisabled />
|
|
|
|
## Hidden page size
|
|
|
|
<Pagination totalItems={102} pageSizeInputDisabled />
|
|
|
|
## Skeleton
|
|
|
|
<PaginationSkeleton />
|