Pagination
v0.0.10
mix mishka.ui.gen.component pagination
Overview of the Phoenix LiveView Pagination Component
The Mishka Chelekom Pagination component is a highly flexible and customizable Phoenix LiveView tool designed for paginated navigation. It's perfect for large datasets or multi-page content, supporting both numerical and first/last, next/previous navigation.
Overview of the Phoenix LiveView Pagination Component
This Phoenix LiveView component offers dynamic pagination states such as current, disabled, and ellipses for skipped pages, making navigation intuitive and user-friendly, even with large datasets.
About LiveView JS module commands
In the pagination component, several attributes allow users to execute custom LiveView JS commands based on interactions. These attributes are:
- on_select: This attribute allows for a custom JavaScript module to run when an item is selected, enabling specific actions or animations.
- on_first: This attribute triggers a custom JS module when the first item is accessed, ideal for initializing states or actions.
- on_last: This attribute runs a custom JavaScript module when the last item is reached, enhancing user feedback or navigation.
- on_next: This attribute defines a JS module that executes when navigating to the next item, allowing for smooth transitions.
- on_previous: This attribute allows for a custom JavaScript module to run when navigating to the previous item, facilitating additional interactions.
These attributes empower developers to create dynamic, engaging experiences tailored to user needs.
Base variant
Base variant
<.pagination total={10} />Default variant of Phoenix LiveView pagination component
The default variant of the Mishka Chelekom pagination automatically applies a solid background and border that change on hover, ideal for primary actions. With just a single prop, you can choose from a variety of colors, making it easy to adapt to different design needs while offering a flexible, visually appealing solution for any interface.
Default variant of Phoenix LiveView pagination component
<.pagination total={10} variant="default" color="natural" />
<.pagination total={10} variant="default" color="primary" />
<.pagination total={10} variant="default" color="secondary" />
<.pagination total={10} variant="default" color="dark" />
<.pagination total={10} variant="default" color="success" />
<.pagination total={10} variant="default" color="warning" />
<.pagination total={10} variant="default" color="danger" />
<.pagination total={10} variant="default" color="info" />
<.pagination total={10} variant="default" color="silver" />
<.pagination total={10} variant="default" color="misc" />
<.pagination total={10} variant="default" color="dawn" />Outline variant of pagination component
With the variant="outline" prop, the pagination has a transparent background and a border available in various colors.
Outline variant of pagination component
<.pagination total={10} color="natural" variant="outline" />
<.pagination total={10} color="primary" variant="outline" />
<.pagination total={10} color="secondary" variant="outline" />
<.pagination total={10} color="success" variant="outline" />
<.pagination total={10} color="warning" variant="outline" />
<.pagination total={10} color="danger" variant="outline" />
<.pagination total={10} color="info" variant="outline" />
<.pagination total={10} color="silver" variant="outline" />
<.pagination total={10} color="misc" variant="outline" />
<.pagination total={10} color="dawn" variant="outline" />Transparent variant of pagination component
With the variant="transparent" prop, the pagination has a transparent background and border, providing a minimal look. On hover, only the text color changes, making it perfect for subtle actions in a modern and minimalist interface.
Transparent variant of pagination component
<.pagination total={10} color="natural" variant="transparent" />
<.pagination total={10} color="primary" variant="transparent" />
<.pagination total={10} color="secondary" variant="transparent" />
<.pagination total={10} color="success" variant="transparent" />
<.pagination total={10} color="warning" variant="transparent" />
<.pagination total={10} color="danger" variant="transparent" />
<.pagination total={10} color="info" variant="transparent" />
<.pagination total={10} color="silver" variant="transparent" />
<.pagination total={10} color="misc" variant="transparent" />
<.pagination total={10} color="dawn" variant="transparent" />Gradient variant of pagination component
Gradient variant of pagination component
<.pagination total={10} color="natural" variant="gradient" />
<.pagination total={10} color="primary" variant="gradient" />
<.pagination total={10} color="secondary" variant="gradient" />
<.pagination total={10} color="success" variant="gradient" />
<.pagination total={10} color="warning" variant="gradient" />
<.pagination total={10} color="danger" variant="gradient" />
<.pagination total={10} color="info" variant="gradient" />
<.pagination total={10} color="silver" variant="gradient" />
<.pagination total={10} color="misc" variant="gradient" />
<.pagination total={10} color="dawn" variant="gradient" />Subtle variant of pagination component
With the variant="subtle" prop, the pagination has a transparent background and border, creating a minimal and clean look. On hover, the background and text colors change.
Subtle variant of pagination component
<.pagination total={10} color="natural" variant="subtle" />
<.pagination total={10} color="primary" variant="subtle" />
<.pagination total={10} color="secondary" variant="subtle" />
<.pagination total={10} color="success" variant="subtle" />
<.pagination total={10} color="warning" variant="subtle" />
<.pagination total={10} color="danger" variant="subtle" />
<.pagination total={10} color="info" variant="subtle" />
<.pagination total={10} color="silver" variant="subtle" />
<.pagination total={10} color="misc" variant="subtle" />
<.pagination total={10} color="dawn" variant="subtle" />Shadow variant of pagination component
With the variant="shadow" prop, the pagination resembles the default style but includes a shadow effect, adding depth while keeping a clean, transparent background and border. On hover, the background and text colors change, making it perfect for adding subtle emphasis to your design.
Shadow variant of pagination component
<.pagination total={10} color="natural" variant="shadow" />
<.pagination total={10} color="primary" variant="shadow" />
<.pagination total={10} color="secondary" variant="shadow" />
<.pagination total={10} color="success" variant="shadow" />
<.pagination total={10} color="warning" variant="shadow" />
<.pagination total={10} color="danger" variant="shadow" />
<.pagination total={10} color="info" variant="shadow" />
<.pagination total={10} color="silver" variant="shadow" />
<.pagination total={10} color="misc" variant="shadow" />
<.pagination total={10} color="dawn" variant="shadow" />Inverted variant of pagination component
With the variant="inverted" prop, the pagination is like the outline variant, featuring a border without a background. On hover, it adds a background color.
Inverted variant of pagination component
<.pagination total={10} color="natural" variant="inverted" />
<.pagination total={10} color="primary" variant="inverted" />
<.pagination total={10} color="secondary" variant="inverted" />
<.pagination total={10} color="success" variant="inverted" />
<.pagination total={10} color="warning" variant="inverted" />
<.pagination total={10} color="danger" variant="inverted" />
<.pagination total={10} color="info" variant="inverted" />
<.pagination total={10} color="silver" variant="inverted" />
<.pagination total={10} color="misc" variant="inverted" />
<.pagination total={10} color="dawn" variant="inverted" />Grouped props
The grouped prop helps create grouped buttons in a shape similar to pagination controls. all the props also apply to this mode.
Grouped props
<.pagination total={10} color="natural" grouped />
<.pagination total={10} color="primary" grouped />
<.pagination total={10} color="secondary" variant="shadow" grouped />
<.pagination total={10} color="success" variant="inverted" grouped />
<.pagination total={10} color="warning" variant="inverted" grouped />
<.pagination total={10} color="danger" variant="subtle" grouped />
<.pagination total={10} color="info" variant="subtle" grouped />
<.pagination total={10} color="silver" variant="transparent" grouped />
<.pagination total={10} color="misc" variant="transparent" grouped />
<.pagination total={10} color="dawn" variant="bordered" grouped />Radius prop
With the Mishka Chelekom pagination component, you can customize the pagination's border radius using different size options. Available sizes include extra_small, small, medium, large, extra_large, full, and none, allowing you to adjust the roundness of the pagination’s corners to fit your design needs. Whether you prefer sharp edges or fully rounded paginations, these options offer flexibility for any interface.
Radius prop
<.pagination total={10} rounded="full" />
<.pagination total={10} rounded="extra_small" />
<.pagination total={10} rounded="small" />
<.pagination total={10} rounded="medium" />
<.pagination total={10} rounded="large" />
<.pagination total={10} rounded="extra_large" />
<.pagination total={10} rounded="none" />Size prop
The size prop offers values such as extra_small, small, medium, large, and extra_large. These values control the elements' size within the pagination contents.
Size prop
<.pagination total={10} size="extra_small" />
<.pagination total={10} size="small" />
<.pagination total={10} size="medium" />
<.pagination total={10} size="large" />
<.pagination total={10} size="extra_large" />Space prop
The space prop lets you control the spacing between items using predefined options like "extra_small", "small", "medium", "large", or "extra_large". You can also provide a custom value as a string for more flexibility. If no value is specified, the default is "small".
Space prop
<.pagination total={10} space="extra_small" />
<.pagination total={10} space="small" />
<.pagination total={10} space="medium" />
<.pagination total={10} space="large" />
<.pagination total={10} space="extra_large" />Separator prop
The separator prop accepts a map with two keys: type which can be either :icon or :text, and value which is either a Hero icon name or text content. By default, it uses %{type: :icon, value: "hero-ellipsis-horizontal"}.
Separator prop
<.pagination total={10} separator={%{type: :icon, value: "hero-hashtag"}} />
<.pagination total={10} separator={%{type: :text, value: "..."}} />Previous and Next label props
The next_label and previous_label attributes accept a map with two keys: type which can be either :icon or :text, and value which specifies either a Hero icon name or text content. For example, %{type: :icon, value: "hero-chevron-double-right"} for the next button and %{type: :icon, value: "hero-chevron-double-left"} for the previous button.
Previous and Next label props
<.pagination total={10}
next_label={%{type: :icon, value: "hero-chevron-double-right"}}
previous_label={%{type: :icon, value: "hero-chevron-double-left"}}
/>
<.pagination total={10}
next_label={%{type: :text, value: "next"}}
previous_label={%{type: :text, value: "prev"}}
/>First and Last label props
The first_label and last_label attributes accept a map with two keys: type which can be either :icon or :text, and value which is either a Hero icon name or text content. By default, these use Hero icons with %{type: :icon, value: "hero-chevron-double-left"} for first_label and %{type: :icon, value: "hero-chevron-double-right"} for last_label.
First and Last label props
<!--Set show_edges to control first and last pagination visibility-->
<.pagination total={10}
show_edges
first_label={%{type: :icon, value: "hero-chevron-left"}}
last_label={%{type: :icon, value: "hero-chevron-right"}}
/>
<.pagination total={10}
show_edges
first_label={%{type: :text, value: "first"}}
last_label={%{type: :text, value: "last"}}
/>Show Edges props
The show_edges prop allows you to control the visibility of the first and last pagination controls, providing an option to either display or hide these edges for a cleaner navigation experience. When enabled, the following attributes are used with their default values: first_label, defaulting to "hero-chevron-double-left", determines the icon or label for the first pagination control. last_label, defaulting to "hero-chevron-double-right", determines the icon or label for the last pagination control. You can customize these attributes to use any hero icons or labels instead of the default ones, offering flexibility in tailoring the navigation controls to your design preferences.
Show Edges props
<.pagination total={10} show_edges />Hide controls props
The hide_controls prop allows you to hide the pagination controls, providing a cleaner interface when you only need to display page numbers without navigation buttons.
Hide controls props
<.pagination total={10} hide_controls />Total props
The total prop specifies the total number of items or pages available in the pagination component. It is essential for calculating the number of pagination links that need to be displayed, ensuring users can navigate through all available content effectively.
Total props
<.pagination total={10}/>
<.pagination total={posts.total}/>Active props
The active prop represents the currently active data in the pagination component, with a default value of 1. This integer value is crucial for indicating which data the user is currently viewing, allowing for proper highlighting and navigation within the pagination controls.
Active props
<.pagination total={10} active={5} />
<.pagination total={posts.total} active={@posts.active} />Siblings props
The siblings prop specifies the number of sibling page links displayed around the active button in the pagination component. This helps create a clearer navigation experience by showing users which buttons are adjacent to the currently active button.
Siblings props
<.pagination total={10} active={5} siblings={2} />Boundaries props
The boundaries prop allows you to control the number of items displayed before the next button and after the previous button in the pagination component. By specifying this value, you can determine how many page links appear in these boundary areas.
Boundaries props
<.pagination total={10} active={5} boundaries={2} />
<.pagination total={10} active={5} boundaries={10} />start and end items
The start_items and end_items slots provide a dynamic way to insert text or elements directly, serving as a more adaptable alternative to the first_label and last_label attributes. By allowing you to customize these slots with descriptive text or other elements, such as buttons, you can improve clarity and usability for users navigating pagination. This approach ensures that your pagination controls are not only visually engaging but also highly informative, guiding users effectively through the beginning and end of the pagination sequence.
start and end items
<.pagination total={@posts.total} active={@posts.active} siblings={1}>
<:start_items>First</:start_items>
<:end_items>Last</:end_items>
</.pagination>
<.pagination
grouped
total={@posts.total}
active={@posts.active}
siblings={3}
>
<:start_items>First</:start_items>
<:end_items>Last</:end_items>
</.pagination>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
total
|
integer
| — | — | Yes | — |
active
|
integer
|
1
| — | No | — |
siblings
|
integer
|
1
| — | No | — |
boundaries
|
integer
|
1
| — | No | — |
on_select
|
JS
| — | — | No | Custom JS module for on_select action |
on_first
|
JS
| — | — | No | Custom JS module for on_first action |
on_last
|
JS
| — | — | No | Custom JS module for on_last action |
on_next
|
JS
| — | — | No | Custom JS module for on_next action |
on_previous
|
JS
| — | — | No | Custom JS module for on_previous action |
size
|
string
|
medium
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
space
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Space between items |
color
|
string
|
base
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdawndarkwhite
| No | Determines color theme |
rounded
|
string
|
small
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
border
|
string
|
extra_small
| — | No | Determines the border radius |
variant
|
string
|
base
|
defaultoutlinetransparentsubtleshadowinvertedgradientborderedbase
| No | Determines the style |
separator
|
map
|
%{":type" => ":icon", ":value" => "hero-ellipsis-horizontal"}
| — | No | Separator between page groups |
first_label
|
map
|
%{":type" => ":icon", ":value" => "hero-chevron-double-left"}
| — | No | Label for the 'first' button |
last_label
|
map
|
%{":type" => ":icon", ":value" => "hero-chevron-double-right"}
| — | No | Label for the 'last' button |
next_label
|
map
|
%{":type" => ":icon", ":value" => "hero-chevron-right"}
| — | No | Label for the 'next' button |
previous_label
|
map
|
%{":type" => ":icon", ":value" => "hero-chevron-left"}
| — | No | Label for the 'previous' button |
class
|
any
| — | — | No | Custom CSS class for additional styling |
first_label_class
|
string
| — | — | No | Custom CSS class for additional styling to first button |
next_label_class
|
string
| — | — | No | Custom CSS class for additional styling to next button |
last_label_class
|
string
| — | — | No | Custom CSS class for additional styling to last button |
prev_label_class
|
string
| — | — | No | Custom CSS class for additional styling to previous button |
pages_label_class
|
string
| — | — | No | Custom CSS class for additional styling to pages buttons |
separator_class
|
string
| — | — | No | Custom CSS class for additional styling to pages buttons |
separator_icon_class
|
string
| — | — | No | Custom CSS class for additional styling to icon of separator |
separator_text_class
|
string
| — | — | No | Custom CSS class for additional styling to text of separator |
params
|
map
|
%{}
| — | No | A map of additional parameters used for element configuration |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
start_items
| No | Determines the start items which accept heex |
end_items
| No | Determines the end items which accept heex |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultoutlinetransparentsubtleshadowinvertedgradientborderedbase
|
--color
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdawndarkwhite
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component pagination