anura-paginator

A paginator to move to the next page, you know the drill:

Attributes

parent

required: yes, live: yes, default: supplied by <anura-gallery> when used inside

Which component this paginator controls. This is done automatically when used inside of <anura-gallery>, but you can also put anura-paginator anywhere else (e.g. a footer), but then you need to tell it what to control.

<anura-paginator parent="#my-gallery"></anura-paginator>

mode

required: no, live: no, default: -

When set to auto, the pagination buttons will disappear and be replaced by a single "load more" button. When this button scrolls into view, the next page will be fetched and appended automatically.

<anura-paginator mode="auto"></anura-paginator>

detect-scroll

required: no, live: no, default: true

For mode="auto", detect when the view has been scrolled in order to load in the next page. Setting this to false will cause no scroll listener to be attached to the window. Users are left to click the "load more" button on their own.

<anura-paginator detect-scroll="false"></anura-paginator>

Events

paginate (outbound)

pageNumber

Instruct <anura-gallery> to display the selected page number (by firing the event on the configured parent).

Parts

<nav part="paginator-nav">
    <button part="paginator-button paginator-prev">
        <anura-icon part="paginator-icon"></anura-icon>
    </button>
    <button part="paginator-button paginator-next">
        <anura-icon part="paginator-icon"></anura-icon>
    </button>
    <span part="paginator-pages">
        <button part="paginator-button paginator-page"></button>
        <!-- snip, repeats -->
    </span>
    <span part="paginator-counter"></span>
</nav>

E.g. colorize the prev- and next-buttons (inside an anura-gallery):

anura-gallery::part(paginator-button) { color: green; }