Files
ui/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
Haytham A. Salama 278a1ea93c chore: improve RTL support (#334)
Co-authored-by: Hassan Kadhim <hassan57905@gmail.com>
2023-06-23 23:19:28 +02:00

21 lines
815 B
Vue

<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
<template #prev="{ onClick }">
<UTooltip text="Previous page">
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
</UTooltip>
</template>
<template #next="{ onClick }">
<UTooltip text="Next page">
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
</UTooltip>
</template>
</UPagination>
</template>