# `LineaUI.Components.Pagination`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/pagination.ex#L1)

LineOne's pagination: a joined bar or `divided` buttons, `rounded` or `pill`, in three sizes.

    <.pagination page={@page} total_pages={10} patch={&"/orders?page=#{&1}"} />
    <.pagination page={@page} total_pages={10} navigate={&"/orders?page=#{&1}"} divided />
    <.pagination page={@page} total_pages={10} on_change="paginate" shape="pill" />

Each page is a link when `patch`, `navigate` or `href` is given: a function from the page
number to the path. Otherwise it is a button pushing `on_change` with `%{"page" => "3"}`
(to `target` when given). Pages far from the current one collapse into an ellipsis:
`siblings` pages are kept on each side of the current one and `boundaries` at each end.

# `pagination`

Renders the page links between a previous and a next arrow.

    <.pagination page={@page} total_pages={@total} patch={&"/orders?page=#{&1}"} />
    <.pagination page={@page} total_pages={@total} on_change="paginate" target={@myself} />

With `on_change="paginate"` every page and arrow is a button pushing
`"paginate"` with `%{"page" => "3"}` (the page as a string):

    def handle_event("paginate", %{"page" => page}, socket),
      do: {:noreply, assign(socket, page: String.to_integer(page))}

The arrow at either end and the ellipsis are inert `<span>`s.

## Attributes

* `page` (`:integer`) (required) - The current page, from 1.
* `total_pages` (`:integer`) (required) - How many pages there are.
* `siblings` (`:integer`) - Pages kept on each side of the current one. Defaults to `1`.
* `boundaries` (`:integer`) - Pages kept at each end. Defaults to `1`.
* `patch` (`:any`) - A function from a page number to a path to patch to. Defaults to `nil`.
* `navigate` (`:any`) - A function from a page number to a path to navigate to. Defaults to `nil`.
* `href` (`:any`) - A function from a page number to a URL. Defaults to `nil`.
* `on_change` (`:any`) - Used when no link function is given: an event name pushed with `%{"page" => "3"}`, or a
  `%JS{}` run on click (its `JS.push` carries the same `page` value).

  Defaults to `nil`.
* `target` (`:any`) - The `phx-target` of `on_change`. Defaults to `nil`.
* `divided` (`:boolean`) - Separate buttons instead of one joined bar. Defaults to `false`.
* `shape` (`:string`) - Defaults to `"rounded"`. Must be one of `"rounded"`, or `"pill"`.
* `size` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `arrows` (`:boolean`) - Show the previous and next arrows. Defaults to `true`.
* `prev_label` (`:string`) - Defaults to `"Previous page"`.
* `next_label` (`:string`) - Defaults to `"Next page"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.

# `window`

```elixir
@spec window(pos_integer(), pos_integer(), non_neg_integer(), non_neg_integer()) :: [
  pos_integer() | :gap
]
```

The pages to show around `page` out of `total`: numbers, with `:gap` where pages are left out.

    iex> LineaUI.Components.Pagination.window(5, 10, 1, 1)
    [1, :gap, 4, 5, 6, :gap, 10]

---

*Consult [api-reference.md](api-reference.md) for complete listing*