1 min read
Banner
Banner
Props
Name | Description | Type | Default |
---|---|---|---|
banner | The banner data. | BannerModel |
|
Events
This component doesn't emit events.
See it in action
In this example banned data is passed as a prop.
Here you can see how the Banner
component is rendered.
<template>
<Banner :banner="banner" />
</template>
<script>
import { Banner } from '@empathyco/x-components/search';
export default {
name: 'BannerDemo',
components: {
Banner
},
data() {
return {
banner: {
modelName: 'Banner',
id: 'banner-example',
url: 'https://my-website.com/summer-shirts',
image: 'https://my-website.com/images/summer-shirts.jpg',
title: 'Trendy summer shirts',
position: 1
}
};
}
};
</script>
Customizing the items with classes
The titleClass
prop can be used to add classes to the banner title.
<template>
<Banner :banner="banner" titleClass="x-bg-neutral-50" />
</template>
<script>
import { Banner } from '@empathyco/x-components/search';
export default {
name: 'BannerDemo',
components: {
Banner
},
data() {
return {
banner: {
modelName: 'Banner',
id: 'banner-example',
url: 'https://my-website.com/summer-shirts',
image: 'https://my-website.com/images/summer-shirts.jpg',
title: 'Trendy summer shirts',
position: 1
}
};
}
};
</script>