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
buttonClasses	CSS classes to customize the loader button.	VueCSSClasses	''
buttonEvents	Events to customize what will be emitted by the loader button.	Partial<XEventsTypes>

Slots

Name	Description	Bindings (name - type - description)
default	default	resultsLength number - The search result's length totalResults number - The totalResults of a searched query
textContent	Rendered count with a text and the number of results displayed & remaining.
buttonContent	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:

See it in action

Here you have a basic example of how the page loader component is rendered.

Customise the default layout

This component has a default slot which allows to customise the entire layout.

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.