mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
60a796ea48* Add `tooltipPosition` to `PaginationNav` per #1656 * Rebuild test * Update description in documentation Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com> * chore: update docs --------- Co-authored-by: Samuel Janda <hi@simpleprogramming.com.au> Co-authored-by: Enrico Sacchetti <esacchetti@gmail.com> Co-authored-by: Enrico Sacchetti <enrico@theetrain.ca>
51 lines
No EOL
1.1 KiB
Text
51 lines
No EOL
1.1 KiB
Text
<script>
|
|
import { PaginationNav } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
`PaginationNav` renders `10` items and does not loop by default.
|
|
|
|
<PaginationNav />
|
|
|
|
## Reactive example
|
|
|
|
Use the `page` prop to bind to the current page number.
|
|
|
|
<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
|
|
|
|
## Total
|
|
|
|
Use the `total` prop to specify the number of pages.
|
|
|
|
<PaginationNav total={3} />
|
|
|
|
## Loopable
|
|
|
|
Set `loop` to `true` for navigation to be looped.
|
|
|
|
<PaginationNav total={3} loop />
|
|
|
|
## Shown
|
|
|
|
If `total` is greater than `10`, the number of items shown will be truncated to `10`.
|
|
|
|
Use `shown` to override the number of items shown.
|
|
|
|
<PaginationNav total={100} shown={5} />
|
|
|
|
## Custom button text
|
|
|
|
Use the `forwardText` and `backwardText` props to customize the button text.
|
|
|
|
<PaginationNav
|
|
forwardText="Next"
|
|
backwardText="Previous"
|
|
/>
|
|
|
|
## Tooltip Position
|
|
|
|
Use the `tooltipPosition` prop to change the alignment of the tooltip.
|
|
|
|
<PaginationNav tooltipPosition="outside" total={3} loop /> |