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. With various options for colors, sizes, and layouts, it seamlessly integrates into your app’s design while enhancing user interaction.
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.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
About LiveView JS module commands
In the padination 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.
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.
<.pagination color="natural" /> <.pagination color="primary" /> <.pagination color="secondary" /> <.pagination color="dark" /> <.pagination color="success" /> <.pagination color="warning" /> <.pagination color="danger" /> <.pagination color="info" /> <.pagination color="silver" /> <.pagination color="misc" /> <.pagination 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.
<.pagination color="natural" variant="outline" /> <.pagination color="primary" variant="outline" /> <.pagination color="secondary" variant="outline" /> <.pagination color="dark" variant="outline" /> <.pagination color="success" variant="outline" /> <.pagination color="warning" variant="outline" /> <.pagination color="danger" variant="outline" /> <.pagination color="info" variant="outline" /> <.pagination color="silver" variant="outline" /> <.pagination color="misc" variant="outline" /> <.pagination 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.
<.pagination color="natural" variant="transparent" /> <.pagination color="primary" variant="transparent" /> <.pagination color="secondary" variant="transparent" /> <.pagination color="dark" variant="transparent" /> <.pagination color="success" variant="transparent" /> <.pagination color="warning" variant="transparent" /> <.pagination color="danger" variant="transparent" /> <.pagination color="info" variant="transparent" /> <.pagination color="silver" variant="transparent" /> <.pagination color="misc" variant="transparent" /> <.pagination color="dawn" variant="transparent" />
Gradient variant of pagination component
<.pagination color="natural" variant="gradient" /> <.pagination color="primary" variant="gradient" /> <.pagination color="secondary" variant="gradient" /> <.pagination color="dark" variant="gradient" /> <.pagination color="success" variant="gradient" /> <.pagination color="warning" variant="gradient" /> <.pagination color="danger" variant="gradient" /> <.pagination color="info" variant="gradient" /> <.pagination color="silver" variant="gradient" /> <.pagination color="misc" variant="gradient" /> <.pagination 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.
<.pagination color="natural" variant="subtle" /> <.pagination color="primary" variant="subtle" /> <.pagination color="secondary" variant="subtle" /> <.pagination color="success" variant="subtle" /> <.pagination color="warning" variant="subtle" /> <.pagination color="danger" variant="subtle" /> <.pagination color="info" variant="subtle" /> <.pagination color="silver" variant="subtle" /> <.pagination color="misc" variant="subtle" /> <.pagination 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.
<.pagination color="natural" variant="shadow" /> <.pagination color="primary" variant="shadow" /> <.pagination color="secondary" variant="shadow" /> <.pagination color="success" variant="shadow" /> <.pagination color="warning" variant="shadow" /> <.pagination color="danger" variant="shadow" /> <.pagination color="info" variant="shadow" /> <.pagination color="silver" variant="shadow" /> <.pagination color="misc" variant="shadow" /> <.pagination 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.
<.pagination color="natural" variant="inverted" /> <.pagination color="primary" variant="inverted" /> <.pagination color="secondary" variant="inverted" /> <.pagination color="success" variant="inverted" /> <.pagination color="warning" variant="inverted" /> <.pagination color="danger" variant="inverted" /> <.pagination color="info" variant="inverted" /> <.pagination color="silver" variant="inverted" /> <.pagination color="misc" variant="inverted" /> <.pagination 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.
<.pagination color="natural" grouped /> <.pagination color="primary" grouped /> <.pagination color="secondary" variant="shadow" grouped /> <.pagination color="success" variant="inverted" grouped /> <.pagination color="warning" variant="inverted" grouped /> <.pagination color="danger" variant="subtle" grouped /> <.pagination color="info" variant="subtle" grouped /> <.pagination color="silver" variant="transparent" grouped /> <.pagination color="misc" variant="transparent" grouped /> <.pagination 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.
<.pagination rounded="full" /> <.pagination rounded="extra_small" /> <.pagination rounded="small" /> <.pagination rounded="medium" /> <.pagination rounded="large" /> <.pagination rounded="extra_large" /> <.pagination rounded="none" />
Size prop
The
size
prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control elemnts size within the pagination contents.
<.pagination size="extra_small" /> <.pagination size="small" /> <.pagination size="medium" /> <.pagination size="large" /> <.pagination 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"
.
<.pagination space="extra_small" /> <.pagination space="small" /> <.pagination space="medium" /> <.pagination space="large" /> <.pagination space="extra_large" />
Seperator prop
The
separator
prop accepts a Hero icon, with the default being
hero-ellipsis-horizontal
.
<.pagination separator="hero-hashtag" />
Previous and Next label props
The
next_label
and
previous_label
attributes allow you to customize the icons or labels for the next and previous navigation controls in the pagination component. By default, these attributes use Hero icons, with
hero-chevron-right
for the next button and
hero-chevron-left
for the previous button.
<.pagination next_label="hero-chevron-double-right" previous_label="hero-chevron-double-left" />
First and Last label props
The
first_label
and
last_label
attributes provide the ability to customize the icons or labels for the first and last navigation controls in the pagination component. By default, these attributes utilize Hero icons, with
hero-chevron-double-left
for the first_label and
hero-chevron-double-right
for the last_label.
<!--Set show_edges to control first and last pagination visibility--> <.pagination show_edges last_label="hero-chevron-double-right" first_label="hero-chevron-double-left" />
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.
<.pagination 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.
<.pagination 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.
<.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.
<.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.
<.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.
<.pagination total={10} active={5} boundaries={2} /> <.pagination total={10} active={5} boundaries={10} />
start and last items
The
start_items
and
last_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.
<.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>