Pagination

分割された一覧のページを移動します。

途中のページ:前後があり、間を省く
最後のページ:次へは押せない
狭い場所で折り返す
右から左に読む場合

使いどころ

  • 検索結果や一覧を複数のページに分け、ページの間を移る時に使います。
  • 手順の段階を示す時はSteps、同じ領域のページを切り替える時はNavigationを使います。

使い方

itemsに前後の送り・番号・省略記号を並べて渡します。どの番号を並べ、どこを「…」で省くか、各項目のURLは利用側が決めます。

文字は11pxの黒い太字です。hrefを持つ項目は、控えめなボタンと同じ5pxの角丸の四角のリンクになります(ピルにはしません)。枠は下ほど濃い灰色(上#dddddd・横#cecece・下#b8b8b8)で、面は上の約35%が白で、そこから#e7e7e7へ下がる縦の塗り(Highriseのページ送りの実測)、下に1px #dfdfdfの影を付けます。送りの文字の左右は枠から13pxです。ホバーすると塗りを一段灰色に寄せ、押すと塗りの上下を反転して影を外します。currentの項目はリンクにせず、面も枠も持たない黒い太字の文字で、送りとの間を8pxだけ空けて置き、今のページを示します。hrefのない項目(最初のページの「前へ」など)は、形・枠・塗りをそのままにし、文字だけを灰色にします。labelが「…」の項目は、省略記号として文字だけを出します。

四角の高さと最小の幅は24pxで、指で操作する画面では44pxにします。狭い場所では折り返します。

アクセシビリティ

  • ルートはlabelを読み上げ名に持つnavです。
  • 今のページにaria-current="page"、押せない送りにaria-disabled="true"を付けます。

API

Pagination

Paginationのprops
名前型既定値説明
items必須readonly PageLink[]左から順に並べるページ送り。前後への送り・番号・省略記号を利用側が組み立てて渡す。
labelstring"ページ送り"navの読み上げ名。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/pagination.css

PageLink

PageLink
名前型既定値説明
label必須string表示する文字(「1」「次へ」など)。「…」は省略記号として、無効の扱いにせず文字だけを出す。
hrefstring移動先のURL。省略した項目は押せないページ送りとして、aria-disabled="true"を付け、形はそのままに文字だけを灰色にして出す。
currentboolean今のページ。hrefがあってもリンクにせず、aria-current="page"を付けて面の無い黒い太字で出す。

コード

HTML
Hono JSX