@empathyco/x-components
Version:
Empathy X Components
138 lines (113 loc) • 4.91 kB
Markdown
---
title: PageSelector
---
# PageSelector
Component that renders a pagination control with buttons for navigating
between pages. It displays the current page, allows selecting other pages,
and emits events when a page is selected.
## Props
| Name | Description | Type | Default |
| -------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- |
| <code>buttonClasses</code> | CSS classes to customize the prev/next buttons. | <code>(string \| Dictionary<boolean>)[]</code> | <code>() => []</code> |
| <code>currentPage</code> | The current page number. | <code>number</code> | <code></code> |
| <code>hiddenPage</code> | The string content of the hidden pages. | <code>string</code> | <code>'...'</code> |
| <code>itemClasses</code> | CSS classes to customize the page items. | <code>(isSelected: boolean) => string \| Dictionary<boolean> \| (string \| Dictionary<boolean>)[]</code> | <code>() => []</code> |
| <code>range</code> | The number of pages to show before and after the current page. | <code>number</code> | <code>2</code> |
| <code>scrollTarget</code> | The class of the scroll container to scroll to top when a page is selected. | <code>string</code> | <code>'main-scroll'</code> |
| <code>totalPages</code> | The total number of pages. | <code>number</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| --------------------------------- | ----------- | ----------------------------------------- |
| <code>previous-page-button</code> | | None |
| <code>page-button</code> | | <br /> |
| <code>next-page-button</code> | | None |
## Events
This component emits the "UserSelectedAPage" and the UserClickedScrollToTop events by default.
## See it in action
Basic example of how the component is rendered.
```vue live
<template>
<PageSelector :current-page="page" :total-pages="totalPages" />
</template>
<script>
import { PageSelector } from '@empathyco/x-components'
export default {
name: 'PageSelectorDemo',
components: {
PageSelector,
},
data() {
return {
page: 0,
totalPages: 10,
}
},
}
</script>
```
### Customize the slots
This component allows to customise its content using slots.
```vue live
<template>
<PageSelector
:total-pages="totalPages"
:currentPage="page"
:item-classes="
(isSelected: boolean) =>
isSelected
? 'x-button-lead x-text-neutral-10'
: 'x-text-neutral-90 x-button-outlined'
"
:buttonClasses="['x-rounded-md']"
>
<template #previous-page-button>
<span>Back</span>
</template>
<template #page-button="{ page, isSelected }">
<h2 :class="{ 'x-text1': !isSelected }">
{{ page }}
</h2>
</template>
<template #next-page-button>
<span>Forward</span>
</template>
</PageSelector>
</template>
<script>
import { PageSelector } from '@empathyco/x-components'
export default {
name: 'PageSelectorDemo',
components: {
PageSelector,
},
data() {
return {
page: 2,
totalPages: 10,
}
},
}
</script>
```
### Customize the number of pages to show before and after the current page by changing the range default value.
```vue live
<template>
<PageSelector :current-page="page" :total-pages="totalPages" :range="range" />
</template>
<script>
import { PageSelector } from '@empathyco/x-components'
export default {
name: 'PageSelectorDemo',
components: {
PageSelector,
},
data() {
return {
page: 6,
totalPages: 100,
range: 4,
}
},
}
</script>
```