介绍
本文档主要用于描述 ShadcnPagination 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnPagination total="100"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>每页大小 (page-size)
查看代码
vue
<template>
<ShadcnPagination total="100" page-size="20"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>上下页文本 (prev-text, next-text)
查看代码
vue
<template>
<ShadcnPagination total="100" prev-text="P" next-text="N"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>最大页数 (max-show-page)
查看代码
vue
<template>
<ShadcnPagination total="100" max-show-page="8"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>显示总数 (show-total)
查看代码
vue
<template>
<ShadcnPagination total="100" show-total/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>页数选择器 (show-sizer)
查看代码
vue
<template>
<ShadcnPagination v-model="defaultValue" total="100" show-sizer/>
<ShadcnPagination v-model="defaultValue" total="100" show-sizer :sizer-options="[5, 10, 20]"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>液态玻璃效果 (glass)
:::
查看代码
vue
<template>
<div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
<div class="p-8 rounded-lg bg-white/50 flex flex-col items-center gap-6">
<ShadcnPagination glass v-model="currentPage1" :total="100" />
<ShadcnPagination glass v-model="currentPage2" :total="200" show-total />
<ShadcnPagination glass v-model="currentPage3" :total="300" show-total show-sizer />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const currentPage1 = ref(1)
const currentPage2 = ref(1)
const currentPage3 = ref(1)
</script>