Cuttlefish Docs
  • English

    • spz-pagination

    Supported layouts: container fixed fixed-height

    When to Use

    • When loading/rendering all data takes a long time;
    • To switch between pages to view data.

    Code Demonstration

    Basic Usage

    The pagination component must be used in conjunction with the spz-list component to be effective. It allows customization of previous and next page icons, placing the icons inside the pagination component with the role="arrow" attribute.

    <spz-list id="collection-list" manual ...><!-- ... --></spz-list>

<spz-pagination layout="container" list-id="collection-list">
  <svg role="arrow" ...><!-- ... --></svg>
</spz-pagination>

    Properties

    Property NameDescriptionTypeDefault ValueRequired
    list-idID of spz-list elementstring-Yes
    num-display-activeMaximum number of pages displayed before and after the current pagenumber2No

    AI Summary (LLM Ready)

    • Component ID: spz-pagination
    • One-line purpose: Paginate long lists, loading one page at a time.
    • Detected attribute rows: 0
    • Detected method subsections: 0
    • Detected event subsections: 0
    • Top attribute names: none (needs manual completion)
    • Top method names: none (needs manual completion)
    • Top event names: none (needs manual completion)
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/