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.

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="white" />
<.pagination color="primary" />
<.pagination color="secondary" />
<.pagination color="dark" />
<.pagination color="success" />
<.pagination color="warning" />
<.pagination color="danger" />
<.pagination color="info" />
<.pagination color="light" />
<.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="white" 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="light" 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="white" 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="light" variant="transparent" />
<.pagination color="misc" variant="transparent" />
<.pagination color="dawn" variant="transparent" />

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="white" variant="subtle" />
<.pagination color="primary" variant="subtle" />
<.pagination color="secondary" variant="subtle" />
<.pagination color="dark" variant="subtle" />
<.pagination color="success" variant="subtle" />
<.pagination color="warning" variant="subtle" />
<.pagination color="danger" variant="subtle" />
<.pagination color="info" variant="subtle" />
<.pagination color="light" 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="white" variant="shadow" />
<.pagination color="primary" variant="shadow" />
<.pagination color="secondary" variant="shadow" />
<.pagination color="dark" variant="shadow" />
<.pagination color="success" variant="shadow" />
<.pagination color="warning" variant="shadow" />
<.pagination color="danger" variant="shadow" />
<.pagination color="info" variant="shadow" />
<.pagination color="light" 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="white" variant="inverted" />
<.pagination color="primary" variant="inverted" />
<.pagination color="secondary" variant="inverted" />
<.pagination color="dark" variant="inverted" />
<.pagination color="success" variant="inverted" />
<.pagination color="warning" variant="inverted" />
<.pagination color="danger" variant="inverted" />
<.pagination color="info" variant="inverted" />
<.pagination color="light" 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="white" grouped />
<.pagination color="primary" grouped />
<.pagination color="secondary" variant="shadow" grouped />
<.pagination color="dark" 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="light" variant="transparent" grouped />
<.pagination color="misc" variant="transparent" grouped />
<.pagination color="dawn" variant="unbordered" 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 allows you to specify a Tailwind CSS gap class, such as gap-3 , which controls the spacing between items.

<.pagination space="gap-1" />
<.pagination space="gap-2" />
<.pagination space="gap-3" />
<.pagination space="gap-4" />
<.pagination space="gap-5" />

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.

<.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 slots

The start_items and last_items slots allow you to insert text directly, providing a flexible alternative to the first_label and last_label attributes. Instead of using icons, you can customize these slots with descriptive text, enhancing clarity for users navigating through pagination. This approach ensures that your pagination controls are not only functional but also informative, making it easier for users to understand their options at 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>