Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/components/pagination.md
# Pagination Component
Page navigation with customizable controls, siblings, and boundaries.
**Documentation**: https://mishka.tools/chelekom/docs/pagination
> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.
## Generate
```bash
mix mishka.ui.gen.component pagination
```
## Dependencies
| Type | Components |
|------|------------|
| **Necessary** | `icon` |
| **Optional** | None |
| **JavaScript** | None |
## Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `variant` | `:string` | `"base"` | Style variant |
| `color` | `:string` | `"base"` | Color theme |
| `size` | `:string` | `"medium"` | Button size |
| `rounded` | `:string` | `"medium"` | Border radius |
| `space` | `:string` | `"small"` | Space between buttons |
| `total` | `:integer` | **required** | Total pages |
| `current` | `:integer` | `1` | Current page |
| `siblings` | `:integer` | `1` | Pages on each side |
| `boundaries` | `:integer` | `1` | Pages at edges |
| `show_edges` | `:boolean` | `true` | Show first/last |
| `show_controls` | `:boolean` | `true` | Show prev/next |
| `on_change` | `:string` | `nil` | Change event |
## Available Options
| Option | Values |
|--------|--------|
| `variant` | `base`, `default`, `outline`, `transparent`, `subtle`, `shadow`, `inverted`, `gradient`, `bordered` |
| `color` | `base`, `natural`, `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `silver`, `misc`, `dawn`, `dark`, `white` |
| `size` | `extra_small`, `small`, `medium`, `large`, `extra_large` |
| `rounded` | `extra_small`, `small`, `medium`, `large`, `extra_large`, `full`, `none` |
## Usage Examples
```heex
<%!-- Basic --%>
<.pagination total={10} current={@page} on_change="page_changed" />
<%!-- Variants / colors --%>
<.pagination variant="outline" color="primary" total={10} current={1} />
<.pagination variant="shadow" color="success" total={10} current={1} />
<%!-- More siblings/boundaries --%>
<.pagination total={20} current={10} siblings={2} boundaries={2} />
<%!-- Without edge controls (first/last) --%>
<.pagination total={10} current={5} show_edges={false} />
<%!-- Compact: no prev/next controls --%>
<.pagination total={5} current={3} show_controls={false} />
<%!-- Rounded full --%>
<.pagination total={10} current={1} rounded="full" variant="default" />
```
## Common Patterns
### Table Pagination
```heex
<div class="flex items-center justify-between mt-4">
<p class="text-sm text-gray-600">
Showing {(@page - 1) * @per_page + 1} to {min(@page * @per_page, @total_count)} of {@total_count} results
</p>
<.pagination
total={@total_pages}
current={@page}
on_change="paginate"
variant="outline"
color="primary"
/>
</div>
```
### Blog Post Pagination
```heex
<.pagination
total={@total_pages}
current={@page}
on_change="page_changed"
variant="default"
color="primary"
rounded="full"
size="large"
/>
```