Pagination

<sy-pagination
  totalitems="123"
  pagesize="10"
  activepage="3"
></sy-pagination>

<sy-pagination
  totalitems="123"
  pagesize="20"
  pagesizeoptions="10,20,50"
  total
></sy-pagination>

<sy-pagination
  totalitems="200"
  jumper
  total
></sy-pagination>

<sy-pagination
  totalitems="123"
  pagesizeoptions="10,20,50"
  jumper
  disabled
></sy-pagination>

<div style="display:grid;gap:16px;width:100%"><span>컨트롤 유지</span>
  <sy-pagination totalitems="8"></sy-pagination><span>한 페이지에서는 숨김</span>
  <sy-pagination totalitems="8" hideonsingle></sy-pagination>
</div>

<sy-pagination
  totalitems="123"
  pagesize="10"
  activepage="1"
  pagesizeoptions="10,20,50"
  total
></sy-pagination>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["pageChanged", "pageSizeChanged"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>