Pagination

page / total-pages · tw-change · 先頭 / 中間 / 末尾

Preview

先頭ページ

page: 1

中間ページ

page: 4

末尾ページ

page: 7

HTML

<tw-pagination page="1" total-pages="7"></tw-pagination>
<tw-pagination page="4" total-pages="7"></tw-pagination>
<tw-pagination page="7" total-pages="7"></tw-pagination>

import "@b4moss/the-wheels";

const bind = (pagerId, labelId) => {
  const el = document.getElementById(pagerId);
  const label = document.getElementById(labelId);
  el?.addEventListener("tw-change", (event) => {
    if (label) label.textContent = `page: ${event.detail.page}`;
  });
};

bind("pager-first", "pagination-first-label");
bind("pager-middle", "pagination-middle-label");
bind("pager-last", "pagination-last-label");

import "@b4moss/the-wheels";
import type { TwPagination } from "@b4moss/the-wheels";

const bind = (pagerId: string, labelId: string) => {
  const el = document.getElementById(pagerId) as TwPagination | null;
  const label = document.getElementById(labelId);
  el?.addEventListener("tw-change", ((event: CustomEvent<{ page: number }>) => {
    if (label) label.textContent = `page: ${event.detail.page}`;
  }) as EventListener);
};

bind("pager-first", "pagination-first-label");
bind("pager-middle", "pagination-middle-label");
bind("pager-last", "pagination-last-label");