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 | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改为子元素传递的默认渲染元素，合并它们的属性和行为。

阅读我们的 组合 指南了解更多详细信息。

defaultPage
1
数字

初始渲染时应激活的页面的值。

在您不需要控制值状态时使用。

disabled
布尔值

当 true 时，阻止用户与项目交互

itemsPerPage
10
数字

每页的项目数量

page
数字

当前页面的受控值。可以绑定为 v-model:page。

showEdges
false
布尔值

当 true 时，始终显示第一页、最后一页和省略号

siblingCount
2
数字

应在当前页面周围显示的兄弟姐妹数量

total
0
数字

列表中的项目数量

发射有效载荷
update:page
[value: number]

页面值更改时调用的事件处理程序

插槽（默认）有效载荷
page
数字

当前页面状态

pageCount
数字

页面数量

列表 ​

用于显示页面列表。它还使分页对辅助技术可访问。

道具默认值类型
as
'div'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改为子元素传递的默认渲染元素，合并它们的属性和行为。

阅读我们的 组合 指南了解更多详细信息。

插槽（默认）有效载荷
items
{ type: 'ellipsis'; } | { type: 'page'; value: number; }

页面项目

项目 ​

用于渲染更改当前页面的按钮。

数据属性价值
[data-selected]"true" | ""
[data-type]"page"

省略号 ​

当列表很长，并且只设置了少量 siblingCount 并且 showEdges 设置为 true 时，占位符元素。

道具默认值类型
as
'div'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改为子元素传递的默认渲染元素，合并它们的属性和行为。

阅读我们的 组合 指南了解更多详细信息。

数据属性价值
[data-type]"ellipsis"

第一 ​

将页面值设置为 1 的触发器

道具默认值类型
as
'button'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改为子元素传递的默认渲染元素，合并它们的属性和行为。

阅读我们的 组合 指南了解更多详细信息。

前 ​

将页面值设置为上一页的触发器

道具默认值类型
as
'button'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改为子元素传递的默认渲染元素，合并它们的属性和行为。

阅读我们的 组合 指南了解更多详细信息。

下一个 ​

将页面值设置为下一页的触发器

道具默认值类型
as
'button'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改为子元素传递的默认渲染元素，合并它们的属性和行为。

阅读我们的 组合 指南了解更多详细信息。

最后 ​

将页面值设置为最后一页的触发器

道具默认值类型
as
'button'
AsTag | 组件

此组件应呈现为的元素或组件。可以通过 asChild 覆盖

asChild
布尔值

更改为子元素传递的默认渲染元素，合并它们的属性和行为。

阅读我们的 组合 指南了解更多详细信息。

示例 ​

带有省略号 ​

您可以添加 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>

键盘交互 ​

钥匙描述
标签
将焦点移动到下一个可聚焦元素。
空格
当焦点位于任何触发器上时，触发选择的页面或箭头导航
进入
当焦点位于任何触发器上时，触发选择的页面或箭头导航