---

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>
```