Skip to main content

Paging Component

1. Introduction​

The Paging component is a navigation tool that allows users to browse through large sets of data or content by dividing it into smaller, more manageable pages. This component is essential for improving the user experience in applications with extensive content, such as tables, lists, or galleries.

Purpose and Use Cases​

  • Purpose: The Paging component is used to navigate between pages of content efficiently.
  • Primary Use Cases:
    • Paginating large datasets in tables or lists.
    • Navigating through multi-step forms or wizards.
    • Displaying content-heavy sections like blogs, product catalogs, or image galleries.

Benefits​

  • Improved Navigation: Simplifies browsing by breaking content into smaller chunks.
  • Customizable: Fully configurable properties and styles to match the application's design.
  • Enhanced User Experience: Reduces load times and improves content accessibility.
  • Cross-Platform Compatibility: Works seamlessly on desktop, tablet, and mobile devices.

2. Properties​

The Paging component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Amount of Pages​

  • Description: Specifies how many pages are displayed per step in the pagination.
  • Purpose: Controls the number of visible page links for better navigation.
  • Default: 10
  • Required/Optional: Optional

Current Page​

  • Description: Sets the starting page when the component is loaded.
  • Purpose: Determines the initial page displayed to the user.
  • Default: 1
  • Required/Optional: Optional

Page (Text)​

  • Description: The label displayed for the paging component.
  • Purpose: Provides context to the user about the current page.
  • Default: "Page"
  • Required/Optional: Optional

Of (Text)​

  • Description: The label shown between the current page and the total number of pages.
  • Purpose: Enhances clarity by indicating the total number of pages.
  • Default: "of"
  • Required/Optional: Optional

3. Style​

The Paging component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the paging component's dimensions.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the paging component (default: 0).
  • Fixed Position: Locks the paging component's position on the screen (default: OFF).
  • Hidden: Hides the paging component from view (default: OFF).

Border​

  • Reset: Resets border settings to default.
  • Normal:
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).
  • On Hover:
    • Same properties as "Normal" but applied when the paging component is hovered.

Padding​

  • Reset: Resets padding settings to default.
  • Normal:
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.
  • On Hover:
    • Same properties as "Normal" but applied when the paging component is hovered.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the paging component is hovered.

Shadow​

  • Reset: Resets shadow settings to default.
  • Normal:
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).
  • On Hover:
    • Same properties as "Normal" but applied when the paging component is hovered.

Cursor​

  • Reset: Resets cursor settings to default.
  • Options: Normal, On Hover, On Focus, When Active.
  • Cursor: Auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, wait, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, neswe-resize, nesw-resize, zoom-in, zoom-out.

Button Border​

  • Reset: Resets border settings for buttons to default.
  • Options: Normal, On Hover, On Focus, When Active.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Button Padding​

  • Options: Normal, On Hover, On Focus, When Active.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.

Button Background​

  • Reset: Resets background settings for buttons to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the button is hovered.

Button Shadow​

  • Reset: Resets shadow settings for buttons to default.
  • Normal:
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).
  • On Hover:
    • Same properties as "Normal" but applied when the button is hovered.

Button Margin​

  • Reset: Resets margin settings for buttons to default.
  • Options: Normal, On Hover, On Focus.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Margin size in pixels.

Button Icon​

  • Reset: Resets icon settings for buttons to default.
  • Options: Normal, On Hover, On Focus, When Active.
    • Icon Size: Size of the icon in pixels.

4. Best Practices for UI/UX​

When and Why to Use​

  • Use the Paging component to improve navigation in applications with large datasets or content-heavy sections.
  • Ideal for responsive designs where content needs to be divided into smaller, more manageable pages.

Effective Scenarios​

  • Desktop: Use for tables, lists, or multi-step forms.
  • Tablet/Smartphone: Ensure the paging component is responsive and easy to interact with on smaller screens.

Tips for Optimal Use​

  • Keep the number of visible pages manageable (e.g., 5-10) to avoid overwhelming users.
  • Use clear labels like "Page" and "of" to provide context.
  • Ensure the paging component is accessible and easy to use with keyboard navigation.

5. Security Considerations​

Potential Risks​

  • External Resources: Validate any external resources used for styling or functionality.
  • Data Exposure: Ensure that paginated data is securely loaded and does not expose sensitive information.

Best Practices​

  • Use HTTPS for secure communication when loading paginated data.
  • Validate and sanitize all user inputs related to pagination (e.g., page numbers).
  • Ensure the paging component is optimized for performance to prevent slow loading times.