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 reactive example
This commit is contained in:
parent
f851fbbcc9
commit
9c5e52b162
2 changed files with 22 additions and 0 deletions
|
@ -9,6 +9,12 @@
|
||||||
|
|
||||||
<PaginationNav />
|
<PaginationNav />
|
||||||
|
|
||||||
|
## Reactive example
|
||||||
|
|
||||||
|
Use the `page` prop to bind to the current page number.
|
||||||
|
|
||||||
|
<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
|
||||||
|
|
||||||
## Total
|
## Total
|
||||||
|
|
||||||
Use the `total` prop to specify the number of pages.
|
Use the `total` prop to specify the number of pages.
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script>
|
||||||
|
import { PaginationNav, Button } from "carbon-components-svelte";
|
||||||
|
|
||||||
|
let page = 2;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<PaginationNav bind:page />
|
||||||
|
|
||||||
|
<div style="margin: var(--cds-layout-01) 0">
|
||||||
|
<Button on:click="{() => (page = 0)}" disabled="{page === 0}">
|
||||||
|
Set page to 0
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>page:</strong>
|
||||||
|
{page}
|
Loading…
Add table
Add a link
Reference in a new issue