thaw/demo_markdown/docs/pagination/mod.md

50 lines
1.3 KiB
Markdown
Raw Normal View History

# 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. |