1 min read
PartialResultsList
PartialResultsList
It renders a list of partial results from SearchState.partialResults by default. It also provides the partial result slot to customize the item with the partial result bound.
Props
Name | Description | Type | Default |
---|---|---|---|
animation | Animation component that will be used to animate the partial results. | union | 'ul' |
maxItemsToRender | Maximum number of partial results to show. | number | 5 |
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default | (Required) Partial results item content | partialResult Partial - Partial Result data |
Examples
This component loops through an array of partials an exposed a slot to use customize each partial.
Basic example
It renders a list of partial results using the default slot:
<template>
<PartialResultsList>
<template #default="{ partialResult }">
<ResultsList :results="partialResult.results" />
</template>
</PartialResultsList>
</template>
Configuring the number of partials
It sets the maximum partials to show to 3.
<template>
<PartialResultsList :maxItemsToRender="3">
<template #default="{ partialResult }">
<ResultsList :results="partialResult.results" />
</template>
</PartialResultsList>
</template>
Rendering usage
It renders a list of partial results using the default slot. It will show the query, the partial results and a button to update the query with the partial one.
<template>
<PartialResultsList>
<template #default="{ partialResult }">
<span>{{ partialResult.query }}</span>
<BaseGrid :columns="4" :items="partialResult.results">
<template #result="{ item }">
<BaseResultLink :result="item">
<template #default="{ item }">
<BaseResultImage :result="item" />
<span class="x-result__title">{{ item.name }}</span>
</template>
</BaseResultLink>
</template>
</BaseGrid>
<PartialQueryButton :query="partialResult.query">
<template #default="{ query }">Ver todos {{ query }}</template>
</PartialQueryButton>
</template>
</PartialResultsList>
</template>