mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
docs(pagination-nav): add more examples (#1514)
Adds "Reactive example," "Total," "Shown," and "Custom button text."
This commit is contained in:
parent
d9255e7441
commit
b5b392963e
2 changed files with 49 additions and 0 deletions
|
@ -5,8 +5,41 @@
|
|||
|
||||
## 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"
|
||||
/>
|
Loading…
Add table
Add a link
Reference in a new issue