@empathyco/x-components
Version:
Empathy X Components
69 lines (51 loc) • 2.28 kB
Markdown
---
title: 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 |
| ----------------------------- | ------------------------------------------------------------------------ | -------------------------- | ----------------- |
| <code>animation</code> | Animation component that will be used to animate the identifier results. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>maxItemsToRender</code> | Number of identifier results to render. | <code>number</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Identifier results item content | |
## 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.
```vue
<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.
```vue
<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>
```