mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
docs(pagination-nav): add more examples
This commit is contained in:
parent
d9255e7441
commit
f851fbbcc9
1 changed files with 27 additions and 0 deletions
|
@ -5,8 +5,35 @@
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
|
`PaginationNav` renders `10` items and does not loop by default.
|
||||||
|
|
||||||
<PaginationNav />
|
<PaginationNav />
|
||||||
|
|
||||||
|
## Total
|
||||||
|
|
||||||
|
Use the `total` prop to specify the number of pages.
|
||||||
|
|
||||||
|
<PaginationNav total={3} />
|
||||||
|
|
||||||
## Loopable
|
## Loopable
|
||||||
|
|
||||||
|
Set `loop` to `true` for navigation to be looped.
|
||||||
|
|
||||||
<PaginationNav total={3} loop />
|
<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"
|
||||||
|
/>
|
Loading…
Add table
Add a link
Reference in a new issue