docs: improve with examples

This commit is contained in:
Benjamin Canac
2023-06-16 17:16:41 +02:00
parent 1b03b8a531
commit c458f388bb
28 changed files with 719 additions and 392 deletions

View File

@@ -111,39 +111,6 @@ excludedProps:
---
::
## Theme
Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
::component-example
#default
:pagination-theme-rounded
#code
```vue
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination
v-model="page"
:total="items.length"
:ui="{
wrapper: 'flex items-center gap-1',
rounded: 'rounded-full min-w-[32px] justify-center'
}"
:prev-button="null"
:next-button="{
icon: 'i-heroicons-arrow-small-right-20-solid',
color: 'primary',
variant: 'outline'
}"
/>
</template>
```
::
## Slots
### `prev` / `next`