PromotedsList
PromotedsList
It renders a ItemsList of promoteds from SearchState.promoteds.
The component provides a default slot which wraps the whole component with the promoteds
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 promoteds. | AnimationProp | 'ul' |
Events
This component doesn't emit events.
See it in action
Backend service required
To use this component, the Search service must be implemented.
Here you have a basic example of how the PromotedsList is rendered.
Type any term in the input field to try it out!
<template>
<div>
<SearchInput />
<PromotedsList />
</div>
</template>
<script>
import { PromotedsList } from '@empathyco/x-components/search';
import { SearchInput } from '@empathyco/x-components/search-box';
export default {
name: 'PromotedsListDemo',
components: {
SearchInput,
PromotedsList
}
};
</script>
Play with the animation
<template>
<div>
<SearchInput />
<PromotedsList :animation="fadeAndSlide" />
</div>
</template>
<script>
import { PromotedsList } from '@empathyco/x-components/search';
import { FadeAndSlide } from '@empathyco/x-components/animations';
import { SearchInput } from '@empathyco/x-components/search-box';
export default {
name: 'PromotedsListDemo',
components: {
SearchInput,
PromotedsList
},
data() {
return {
fadeAndSlide: FadeAndSlide
};
}
};
</script>
Overriding default content
<template>
<div>
<SearchInput />
<PromotedsList #default="{ items, animation }">
<BaseGrid :items="items" :animation="animation">
<template #promoted="{ item }">
<span>Promoted: {{ item.title }}</span>
</template>
<template #default="{ item }">
<span>Default: {{ item }}</span>
</template>
</BaseGrid>
</PromotedsList>
</div>
</template>
<script>
import { PromotedsList } from '@empathyco/x-components/search';
import { SearchInput } from '@empathyco/x-components/search-box';
import { BaseGrid } from '@empathyco/x-components';
export default {
name: 'PromotedsListDemo',
components: {
SearchInput,
PromotedsList,
BaseGrid
}
};
</script>
Overriding promoted content
<template>
<div>
<SearchInput />
<PromotedsList #promoted="{ item }">
<span class="promoted">
{{ item.title }}
</span>
</PromotedsList>
</div>
</template>
<script>
import { PromotedsList } from '@empathyco/x-components/search';
import { SearchInput } from '@empathyco/x-components/search-box';
export default {
name: 'PromotedsListDemo',
components: {
SearchInput,
PromotedsList
}
};
</script>
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>
<PromotedsList>
<template #promoted="{ item }">Promoted: {{ item.id }}</template>
<template #result="{ item }">Result: {{ item.id }}</template>
</PromotedsList>
</ResultsList>
</div>
</template>
<script>
import { ResultsList, PromotedsList } from '@empathyco/x-components/search';
import { SearchInput } from '@empathyco/x-components/search-box';
export default {
name: 'PromotedsListDemo',
components: {
SearchInput,
ResultsList,
PromotedsList
}
};
</script>