Packages
moon
2.76.2
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/design/pagination.ex
defmodule Moon.Design.Pagination do
@moduledoc false
use Moon.StatelessComponent
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "The value of current page"
prop(value, :integer, default: 1)
@doc "The number of pages"
prop(total_pages, :integer, required: true)
@doc "The function to call when page is updated"
prop(on_change, :event, required: true)
@doc "Disabled state for the prev/next button when were reached the first/last page."
prop(disabled, :boolean)
@doc "Previous button of Pagination component, see Pagination.PrevButton"
slot(prev_button, required: true)
@doc "Pages of Pagination component, see Pagination.Pages"
slot(pages, required: true)
@doc "Next button of Pagination component, see Pagination.NextButton"
slot(next_button, required: true)
def render(assigns) do
~F"""
<div
{=@id}
class={merge(["flex justify-center items-center w-full select-none", @class])}
data-testid={@testid}
>
<#slot
{@prev_button}
context_put={
on_change: @on_change,
value: @value - 1,
disabled: @value <= 1
}
/>
<#slot
{@pages}
context_put={
on_change: @on_change,
total_pages: @total_pages,
value: @value
}
/>
<#slot
{@next_button}
context_put={
on_change: @on_change,
value: @value + 1,
disabled: @value >= @total_pages
}
/>
</div>
"""
end
end