1 min read

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