ページネーション

Overview

件数が多く, 画面の多くの領域を締める場合はページネーションを活用できます。

ページネーションはリストのHTML要素で構成され,スクリーンリーダーは利用可能なリンクの数を知らせることが可能です。

Nav コンポーネントを使用して, それをリーダーやその他の支援技術を絞り込むためのナビゲーションセクションとして識別します。

ページにはこのようなナビゲーションセクションが複数存在する可能性があるので, その目的を反映するため Nav コンポーネントに aria-label 属性を付けることを推奨します。

例えば, ページネーションを使用して一連の検索結果の間を移動する場合, 適切なラベルは aria-label="Search results pages" となります。

vue

<template>
 <nav aria-label="Page navigation example">
  <Pagination>
   <PageItem>
    <PageLink>Previous</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>Next</PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

Working with icons

ページネーションリンクのテキストの代わりにアイコンやシンボルを使用したい場合は, aria 属性を使用してスクリーンリーダーを適切にサポートするようにしてください。

vue

<template>
 <nav aria-label="Page navigation example">
  <Pagination>
   <PageItem>
    <PageLink aria-label="Previous">
     <span aria-hidden="true">&laquo;</span>
    </PageLink>
   </PageItem>
   <PageItem>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
   <PageItem>
    <PageLink aria-label="Next">
     <span aria-hidden="true">&raquo;</span>
    </PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

Disabled and active states

ページ分割リンクは、さまざまな状況に応じてカスタマイズすることができます。クリックできないリンクには disabled 属性を、現在のページを示すには active 属性を使います。

disabled 属性は b-a コンポーネントのリンク機能を無効にするために pointer-events: none を使用していますが、この CSS プロパティはまだ標準化されておらず、キーボードナビゲーションを考慮していません。そのため、無効化されたリンクには常に tabindex="-1" 属性を追加し、その機能を完全に無効化するためにカスタム JavaScript を使用しなければなりません。

vue

<template>
 <nav aria-label="...">
  <Pagination>
   <PageItem disabled>
    <PageLink>Previous</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem active>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>Next</PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

アクティブなアンカーや無効なアンカーを `PageLink` コンポーネントと入れ替えたり、前/次の矢印の場合はアンカーを省略したりして、意図したスタイルを維持したままクリック機能を削除したり、キーボードフォーカスを防ぐことができます。

vue

<template>
 <nav aria-label="...">
  <Pagination>
   <PageItem disabled>
    <PageLink>Previous</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem active>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>Next</PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

Sizing

サイズの変更には size="lg" や size="sm" を利用できます。

vue

<template>
 <nav aria-label="...">
  <Pagination size="lg">
   <PageItem active>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

vue

<template>
 <nav aria-label="...">
  <Pagination size="sm">
   <PageItem active>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

Alignment

flexbox utilities でページネーションコンポーネントの配置を変更します。

vue

<template>
 <nav aria-label="Page navigation example">
  <Pagination justify-content="center">
   <PageItem disabled>
    <PageLink>Previous</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>Next</PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

vue

<template>
 <nav aria-label="Page navigation example">
  <Pagination justify-content="end">
   <PageItem disabled>
    <PageLink>Previous</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>1</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>2</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>3</PageLink>
   </PageItem>
   <PageItem>
    <PageLink>Next</PageLink>
   </PageItem>
  </Pagination>
 </nav>
</template>

Bootstrap

Browse docs