1 min read
IdentifierResults
IdentifierResults
Paints the list of identifier results stored in the state. Each identifier result should be represented by a IdentifierResult component besides any other component.
Props
Name | Description | Type | Default |
---|---|---|---|
animation | Animation component that will be used to animate the identifier results. | Vue | 'ul' |
maxItemsToRender | Number of identifier results to render. | number |
|
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
default | (Required) Identifier results item content | identifierResult Result - Identifier Result data |
Examples
Play with slot
A IdentifierResult must be used inside the IdentifierResults component. In the example below the BaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult component.
<IdentifierResults :animation="fadeAndSlide">
<template #default="{ identifierResult }">
<BaseResultLink :result="identifierResult">
<template #default="{ result }">
<IdentifierResult :result="result"/>
</template>
</BaseResultLink>
</template>
</IdentifierResults>
Play with props
In this example, the identifier results have been limited to render a maximum of 3 items.
<template>
<IdentifierResults #default="{ identifierResult }" :maxItemsToRender="3">
<IdentifierResult :result="identifierResult" />
</IdentifierResults>
</template>
<script>
import { IdentifierResults, IdentifierResult } from '@empathyco/x-components';
export default {
name: 'IdentifierResultsDemo',
components: {
IdentifierResults,
IdentifierResult
}
};
</script>