mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 14:29:22 -05:00
96f74a122e
* feat: Pagination * feat: optimize Pagination component * fix: build nightly --------- Co-authored-by: luoxiao <luoxiaozero@163.com>
49 lines
1.3 KiB
Markdown
49 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. |
|