BannersList

It renders a ItemsList list of banners from SearchState.banners.

The component provides a default slot which wraps the whole component with the banners plus the injectedListItems which also contains the injected list items from the ancestor.

It also provides the parent slots to customize the items.

Props

Name	Description	Type	Default
animation	Animation component that will be used to animate the banners.	AnimationProp	'ul'

Events

This component doesn't emit events.

Examples

Backend service required

To use this component, the Search service must be implemented.

Here you have a basic example of how the BannersList is rendered.

Type any term in the input field to try it out!

<template>
  <div>
    <SearchInput />
    <BannersList />
  </div>
</template>
<script setup>
import { BannersList } from '@empathyco/x-components/search'
import { SearchInput } from '@empathyco/x-components/search-box'
</script>

Play with the animation

<template>
  <div>
    <SearchInput />
    <BannersList :animation="fadeAndSlide" />
  </div>
</template>
<script setup>
import { BannersList } from '@empathyco/x-components/search'
import { SearchInput } from '@empathyco/x-components/search-box'
import { FadeAndSlide } from '@empathyco/x-components/animations'
const fadeAndSlide = FadeAndSlide
</script>

Overriding default content

<template>
  <div>
    <SearchInput />
    <BannersList #default="{ items, animation }">
      <BaseGrid :items="items" :animation="animation">
        <template #banner="{ item }">
          <span>Banner: {{ item.title }}</span>
        </template>
        <template #default="{ item }">
          <span>Default: {{ item }}</span>
        </template>
      </BaseGrid>
    </BannersList>
  </div>
</template>
<script setup>
import { BannersList } from '@empathyco/x-components/search'
import { SearchInput } from '@empathyco/x-components/search-box'
import { BaseGrid } from '@empathyco/x-components'
</script>

Overriding banner content

<template>
  <div>
    <SearchInput />
    <BannersList #banner="{ item }">
      <span class="banner">
        {{ item.title }}
      </span>
    </BannersList>
  </div>
</template>
<script setup>
import { BannersList } from '@empathyco/x-components/search'
import { SearchInput } from '@empathyco/x-components/search-box'
</script>

Data injection

Starting with the ResultsList component as root element, you can concat the list of results and banners in order to be injected by the BaseGrid (or components that extend it).

Data injection

Starting with the ResultsList component as root element, you can concat the list of list items using BannersList, PromotedsList, BaseGrid or any component that injects the listItems value.

<template>
  <div>
    <SearchInput />
    <ResultsList>
      <BannersList>
        <template #banner="{ item }">Banner: {{ item.id }}</template>
        <template #result="{ item }">Result: {{ item.id }}</template>
      </BannersList>
    </ResultsList>
  </div>
</template>
<script setup>
import { ResultsList, BannersList } from '@empathyco/x-components/search'
import { SearchInput } from '@empathyco/x-components/search-box'
</script>