ui:pagination

汎用的なPaginationコンポーネントです。

Examples

Source Code

<nav class="ui:pagination" aria-label="ページネーション">
  <a class="ui:pagination__button" href="#">
    <ui-icon data-icon="chevron-first" aria-label="最初のページへ"></ui-icon>
  </a>
  <a class="ui:pagination__button" href="#">
    <ui-icon data-icon="chevron-left" aria-label="前のページへ"></ui-icon>
  </a>
  <ol class="ui:pagination__list">
    <li><a class="ui:pagination__button" href="#">1</a></li>
    <li><ui-icon data-icon="ellipsis" aria-hidden="true"></ui-icon></li>
    <li><a class="ui:pagination__button" href="#">49</a></li>
    <li><a class="ui:pagination__button" href="#" aria-current="page">50</a></li>
    <li><a class="ui:pagination__button" href="#">51</a></li>
    <li><ui-icon data-icon="ellipsis" aria-hidden="true"></ui-icon></li>
    <li><a class="ui:pagination__button" href="#">99</a></li>
  </ol>
  <a class="ui:pagination__button" href="#">
    <ui-icon data-icon="chevron-right" aria-label="次のページへ"></ui-icon>
  </a>
  <a class="ui:pagination__button" href="#">
    <ui-icon data-icon="chevron-last" aria-label="最後のページへ"></ui-icon>
  </a>
</nav>