@empathyco/x-components
Version:
Empathy X Components
75 lines (56 loc) • 2.89 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
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.
### Play with slot
```vue
<template>
<IdentifierResults :animation="animation">
<template #default="{ identifierResult }">
<BaseResultLink :result="identifierResult">
<template #default="{ result }">
<IdentifierResult :result="result" />
</template>
</BaseResultLink>
</template>
</IdentifierResults>
</template>
<script setup>
import IdentifierResults from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue";
import IdentifierResult from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue";
import BaseResultLink from "@empathyco/x-components/js/components/base-result-link.vue";
import FadeAndSlide from "@empathyco/x-components/js/animations/fade-and-slide.vue";
const animation = FadeAndSlide;
</script>
```
### Play with props
In this example, the identifier results have been limited to render a maximum of 3 items.
```vue
<template>
<IdentifierResults :max-items-to-render="3">
<template #default="{ identifierResult }">
<IdentifierResult :result="identifierResult" />
</template>
</IdentifierResults>
</template>
<script setup>
import IdentifierResults from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue";
import IdentifierResult from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue";
</script>
```