Vuetify

ショップ

企業向け

v-pagination コンポーネントは、ユーザーが情報を簡単に消費できるように、長いデータセットを分割するために使用されます。 指定された長さに応じて、ページネーションコンポーネントは自動的にスケーリングされます。 現在のページを維持するには、単に v-model 属性を指定します。

デフォルトのページネーションは、設定された length プロップに基づいてページ数を表示し、ナビゲートしやすいように prev ボタンと next ボタンで囲んでいます。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

length propを使用して、v-paginationの長さを設定できます。ページボタンの数が親コンテナーを超えると、リストは切り捨てられます。

total-visible propを使って、表示されるページボタンの最大数を手動で設定することもできます。

circle propはページネーションボタンの代替スタイルを提供します。

前のページと次のページのアイコンは prev-iconnext-icon の各propでカスタマイズすることができます。

ページネーション項目は disabled propを使って手動で無効にすることができます。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!