Radix Vue

外観

ページネーション ​

データをページ形式で表示し、ページ間のナビゲーションを提供します。
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot
    :total="100"
    :sibling-count="1"
    show-edges
    :default-page="2"
  >
    <PaginationList
      v-slot="{ items }"
      class="flex items-center gap-1 text-white"
    >
      <PaginationFirst class="w-9 h-9 flex items-center justify-center disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
        <Icon icon="radix-icons:double-arrow-left" />
      </PaginationFirst>
      <PaginationPrev class="w-9 h-9 flex items-center justify-center mr-4 disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
        <Icon icon="radix-icons:chevron-left" />
      </PaginationPrev>
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
          class="w-9 h-9 border rounded data-[selected]:bg-white data-[selected]:text-blackA11 hover:bg-white/10 transition focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"
          :value="page.value"
        >
          {{ page.value }}
        </PaginationListItem>
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
          class="w-9 h-9 flex items-center justify-center"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
      <PaginationNext class="w-9 h-9 flex items-center justify-center ml-4 disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
        <Icon icon="radix-icons:chevron-right" />
      </PaginationNext>
      <PaginationLast class="w-9 h-9 flex items-center justify-center disabled:opacity-50 focus-within:outline focus-within:outline-1 focus-within:outline-offset-1 rounded">
        <Icon icon="radix-icons:double-arrow-right" />
      </PaginationLast>
    </PaginationList>
  </PaginationRoot>
</template>

機能 ​

  • 最初または最後のページへのクイックアクセスを有効にします
  • 常に端を表示するかどうかを有効にします

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構成 ​

すべての部品をインポートして組み立てます。

vue
<script setup>
import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <PaginationFirst />
      <PaginationPrev />
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
      <PaginationNext />
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>

APIリファレンス ​

ルート ​

ページネーションのすべての部分を格納します。

プロップデフォルト型
as
'nav'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

defaultPage
1
number

最初にレンダリングされる際にアクティブにするページの値。

値の状態を制御する必要がない場合に使用します。

disabled
boolean

trueの場合、ユーザーがアイテムと対話することを防ぎます。

itemsPerPage
10
number

ページあたりのアイテム数

page
number

現在のページの制御された値。v-model:pageとしてバインドできます。

showEdges
false
boolean

trueの場合、常に最初のページ、最後のページ、省略記号を表示します。

siblingCount
2
number

現在のページの周囲に表示する兄弟の数。

total
0
number

リスト内のアイテム数

Emitペイロード
update:page
[value: number]

ページ値が変更されたときに呼び出されるイベントハンドラー。

スロット (デフォルト)ペイロード
page
number

現在のページの状態

pageCount
number

ページ数

リスト ​

ページのリストを表示するために使用されます。また、補助技術によるページネーションへのアクセスを可能にします。

プロップデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

スロット (デフォルト)ペイロード
items
{ type: 'ellipsis'; } | { type: 'page'; value: number; }

ページアイテム

アイテム ​

現在のページを変更するボタンをレンダリングするために使用されます。

データ属性値
[data-selected]"true" | ""
[data-type]"page"

省略記号 ​

リストが長く、小さなsiblingCountのみが設定され、showEdgesがtrueに設定されている場合のプレースホルダー要素。

プロップデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

データ属性値
[data-type]"ellipsis"

最初 ​

ページ値を1に設定するトリガー。

プロップデフォルト型
as
'button'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

前へ ​

ページ値を前のページに設定するトリガー。

プロップデフォルト型
as
'button'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

次へ ​

ページ値を次のページに設定するトリガー。

プロップデフォルト型
as
'button'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

最後 ​

ページ値を最後のページに設定するトリガー。

プロップデフォルト型
as
'button'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

例 ​

省略記号付き ​

PaginationEllipsisを視覚的な合図として追加して、さらに前のアイテムと後のアイテムを表示できます。

vue
<script setup lang="ts">
import { PaginationEllipsis, PaginationList, PaginationListItem, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
    </PaginationList>
  </PaginationRoot>
</template>

最初/最後のボタン付き ​

PaginationFirstを追加してユーザーが最初のページに移動できるようにするか、PaginationLastを追加して最後のページに移動できるようにすることができます。

vue
<script setup lang="ts">
import { PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot>
    <PaginationList>
      <PaginationFirst />
      ...
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>

プログラムによるページの制御 ​

反応性の高い値を渡すことで、現在のページを制御できます。

vue
<script setup lang="ts">
import { PaginationRoot } from 'radix-vue'
import { Select } from './custom-select'
import { ref } from 'vue'

const currentPage = ref(1)
</script>

<template>
  <Select v-model="currentPage" />
  <PaginationRoot v-model:page="currentPage">
    ...
  </PaginationRoot>
</template>

キーボード操作 ​

キー説明
Tab
フォーカスを次のフォーカス可能な要素に移動します。
Space
フォーカスがトリガーにある場合、選択したページまたは矢印ナビゲーションをトリガーします。
Enter
フォーカスがトリガーにある場合、選択したページまたは矢印ナビゲーションをトリガーします。