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.	AnimationProp	'ul'
maxItemsToRender	Number of identifier results to render.	number

Slots

Name	Description	Bindings (name - type - description)
default	(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

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

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