ページネーション

ページネーション UI の構築用のプレゼンテーションコンポーネントのセットです。

例

結果

読み込み中...

ライブエディター

import Pagination from 'react-bootstrap/Pagination'; let active = 2; let items = []; for (let number = 1; number <= 5; number++) { items.push( <Pagination.Item key={number} active={number === active}> {number} </Pagination.Item>, ); } const paginationBasic = ( <div> <Pagination>{items}</Pagination> <br /> <Pagination size="lg">{items}</Pagination> <br /> <Pagination size="sm">{items}</Pagination> </div> ); render(paginationBasic);

import Pagination from 'react-bootstrap/Pagination';

let active = 2;
let items = [];
for (let number = 1; number <= 5; number++) {
  items.push(
    <Pagination.Item key={number} active={number === active}>
      {number}
    </Pagination.Item>,
  );
}

const paginationBasic = (
  <div>
    <Pagination>{items}</Pagination>
    <br />

    <Pagination size="lg">{items}</Pagination>
    <br />

    <Pagination size="sm">{items}</Pagination>
  </div>
);

render(paginationBasic);

その他のオプション

より複雑なページネーション UI を構築する場合に、「最初」、「前へ」、「次へ」、「最後」のボタンを追加するための便利なサブコンポーネントがいくつかあり、「省略」アイテムを使用して以前の結果または後の結果を示します。

結果

読み込み中...

ライブエディター

import Pagination from 'react-bootstrap/Pagination'; function AdvancedExample() { return ( <Pagination> <Pagination.First /> <Pagination.Prev /> <Pagination.Item>{1}</Pagination.Item> <Pagination.Ellipsis /> <Pagination.Item>{10}</Pagination.Item> <Pagination.Item>{11}</Pagination.Item> <Pagination.Item active>{12}</Pagination.Item> <Pagination.Item>{13}</Pagination.Item> <Pagination.Item disabled>{14}</Pagination.Item> <Pagination.Ellipsis /> <Pagination.Item>{20}</Pagination.Item> <Pagination.Next /> <Pagination.Last /> </Pagination> ); } export default AdvancedExample;

import Pagination from 'react-bootstrap/Pagination';

function AdvancedExample() {
  return (
    <Pagination>
      <Pagination.First />
      <Pagination.Prev />
      <Pagination.Item>{1}</Pagination.Item>
      <Pagination.Ellipsis />

      <Pagination.Item>{10}</Pagination.Item>
      <Pagination.Item>{11}</Pagination.Item>
      <Pagination.Item active>{12}</Pagination.Item>
      <Pagination.Item>{13}</Pagination.Item>
      <Pagination.Item disabled>{14}</Pagination.Item>

      <Pagination.Ellipsis />
      <Pagination.Item>{20}</Pagination.Item>
      <Pagination.Next />
      <Pagination.Last />
    </Pagination>
  );
}

export default AdvancedExample;

API

ページネーション

PageItem