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>