mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 14:29:22 -05:00
50 lines
1.3 KiB
Markdown
50 lines
1.3 KiB
Markdown
|
# Pagination
|
||
|
|
||
|
```rust demo
|
||
|
let page = create_rw_signal(1);
|
||
|
|
||
|
view! {
|
||
|
<Space vertical=true>
|
||
|
<div>"Page: " {move || page.get()}</div>
|
||
|
<Pagination page count=10 />
|
||
|
</Space>
|
||
|
}
|
||
|
```
|
||
|
|
||
|
### Size
|
||
|
|
||
|
```rust demo
|
||
|
view! {
|
||
|
<Space vertical=true>
|
||
|
<Pagination count=100 size=ButtonSize::Tiny />
|
||
|
<Pagination count=100 size=ButtonSize::Small />
|
||
|
<Pagination count=100 size=ButtonSize::Medium />
|
||
|
<Pagination count=100 size=ButtonSize::Large />
|
||
|
</Space>
|
||
|
}
|
||
|
```
|
||
|
|
||
|
### Pagination ranges
|
||
|
|
||
|
```rust demo
|
||
|
view! {
|
||
|
<Space vertical=true>
|
||
|
<Pagination count=100 sibling_count=0 />
|
||
|
<Pagination count=100 sibling_count=1 />
|
||
|
<Pagination count=100 sibling_count=2 />
|
||
|
<Pagination count=100 sibling_count=3 />
|
||
|
</Space>
|
||
|
}
|
||
|
```
|
||
|
|
||
|
### Pagination Props
|
||
|
|
||
|
| Name | Type | Default | Description |
|
||
|
| --- | --- | --- | --- |
|
||
|
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes. |
|
||
|
| page | `Model<usize>` | `1` | The current page starts from 1. |
|
||
|
| count | `MaybeSignal<usize>` | | The total numbers of pages. |
|
||
|
| sibling_count | `MaybeSignal<usize>` | `1` | Number of visible pages after and before the current page. |
|
||
|
| size | `MaybeSignal<ButtonSize>` | `ButtonSize::Medium` | Button size. |
|
||
|
| on_change | `Option<Callback<usize>>` | `None` | Callback fired when the page is changed. |
|