@empathyco/x-components
Version:
Empathy X Components
144 lines (115 loc) • 4.85 kB
Markdown
---
title: PageLoaderButton
---
# PageLoaderButton
Component that renders a text with the number of rendered results and
the remaining ones and a `<BaseEventButton>` with the logic of emitting
the event "UserReachedResultsListEnd" to load more results on click.
## Props
| Name | Description | Type | Default |
| -------------------------- | -------------------------------------------------------------- | ---------------------------------- | --------------- |
| <code>buttonClasses</code> | CSS classes to customize the loader button. | <code>VueCSSClasses</code> | <code>''</code> |
| <code>buttonEvents</code> | Events to customize what will be emitted by the loader button. | <code>Partial<XEventsTypes></code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | default | **resultsLength** <code>number</code> - The search result's length<br />**totalResults** <code>number</code> - The totalResults of a searched query |
| <code>textContent</code> | Rendered count with a text and the number of results displayed & remaining. | <br /> |
| <code>buttonContent</code> | Button content with a text, an icon or both | None |
## Events
This component emits the "UserReachedResultsListEnd" event by default. This can be changed using the
buttonEvents prop:
```vue live
<template>
<PageLoaderButton :buttonEvents="{ UserClickedCloseX: undefined }" />
</template>
<script>
import { PageLoaderButton } from '@empathyco/x-components'
export default {
name: 'PageLoaderButtonDemo',
components: {
PageLoaderButton,
},
}
</script>
```
## See it in action
Here you have a basic example of how the page loader component is rendered.
```vue live
<template>
<PageLoaderButton />
</template>
<script>
import { PageLoaderButton } from '@empathyco/x-components'
export default {
name: 'PageLoaderButtonDemo',
components: {
PageLoaderButton,
},
}
</script>
```
### Customise the default layout
This component has a default slot which allows to customise the entire layout.
```vue live
<template>
<PageLoaderButton>
<template #default="{ resultsLength, totalResults }">
<div class="x-flex x-flex-col">
<div class="x-flex x-gap-4 x-text">
<span class="x-text-accent-50 x-font-bold">{{ resultsLength }}</span>
<span>of</span>
<span class="x-text-accent-50">{{ totalResults }}</span>
</div>
<button
@click="$x.emit('UserReachedResultsListEnd', undefined)"
class="x-button x-button-ghost"
>
Load more
</button>
</div>
</template>
</PageLoaderButton>
</template>
<script>
import { PageLoaderButton } from '@empathyco/x-components'
export default {
name: 'PageLoaderButtonDemo',
components: {
PageLoaderButton,
},
}
</script>
```
### Customise the slots
This component allows to customise both the textContent and the buttonContent slots. The
textContent's slot layout can be replaced entirely, while the buttonContent's slot enables wrapping
content inside and customizing its style using the buttonClasses prop.
```vue live
<template>
<PageLoaderButton :buttonClasses="buttonClasses">
<template #textContent="{ resultsLength, totalResults }">
<div class="x-flex x-gap-4 x-text">
<span class="x-text-accent-50 x-font-bold">{{ resultsLength }}</span>
<span>of</span>
<span class="x-text-accent-50">{{ totalResults }}</span>
</div>
</template>
<template #buttonContent>Load more results</template>
</PageLoaderButton>
</template>
<script>
import { PageLoaderButton } from '@empathyco/x-components'
export default {
name: 'PageLoaderButtonDemo',
components: {
PageLoaderButton,
},
data() {
return {
buttonClasses: 'x-rounded-full',
}
},
}
</script>
```