File
projects/congarevenuecloud/elements/src/lib/jumbotron/jumbotron.component.ts
Description
This component is a work in progress
Jumbotron component is used to showcase key marketing messages on the site.
Preview
Usage
Example :import { JumbotronModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [JumbotronModule, ...]
})
export class AppModule {}// Basic Usage.
```typescript
<apt-jumbotron
[storefront]="storefront"
><apt-jumbotron>// Implementation with custom options.
```typescript
<apt-jumbotron
[storefront]="storefront"
[height]="height"
[imagePosition]="center"
[brightness]="brightness"
></apt-jumbotron>
Implements
OnInit
Metadata
| selector | apt-jumbotron |
| styles |
:host {
display: block;
}
.carousel {
margin-bottom: 4rem;
min-height: 320px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
max-width: 35%;
left: inherit;
}
/* Declare heights because of positioning of img element */
.carousel-item {
overflow-x: hidden;
}
.carousel-item > img {
height: 100%;
overflow-y: hidden;
width: 100%;
}
|
| templateUrl | ./jumbotron.component.html |
Index
Properties |
|
Inputs |
Constructor
constructor(sanitizer: DomSanitizer, storefrontService: StorefrontService, configurationService: ConfigurationService)
|
||||||||||||
|
Parameters :
|
Inputs
| brightness |
Type : number
|
Default value : 40
|
|
brightness it's type is number to set the brightness of jumbotron. |
| height |
Type : string
|
Default value : '20rem'
|
|
height for jumbotron it's type is string. |
| imagePosition |
Type : "left" | "center" | "right"
|
|
specify image postion. |
| storefront |
Type : Storefront
|
|
storefront is an object having banner title,pricelist,logo, storebanner and more. |
Properties
| Public sanitizer |
Type : DomSanitizer
|
<ng-container *ngIf="storefront$ | async as storefront">
<div id="promotionCarousel" class="carousel slide " data-ride="carousel" *ngIf="storefront?.StoreBanners?.length > 0">
<ol class="carousel-indicators">
<li data-target="#promotionCarousel" [attr.data-slide-to]="i" [class.active]="i === 0" *ngFor="let banner of storefront?.StoreBanners; let i = index"></li>
</ol>
<div class="carousel-inner">
<div [class]="'carousel-item text-' + imagePosition" [class.active]="i === 0" [style]="heightStyle" *ngFor="let banner of storefront?.StoreBanners; let i = index">
<img [src]="banner?.Image | image" [style]="filterStyle">
<div class="carousel-caption text-right">
<h1>{{banner?.Title}}</h1>
<p [innerHTML]="banner?.Subtitle"></p>
<p>
<a class="btn btn-light btn-lg" [href]="banner?.Link"> {{ 'JUMBORTON.MORE_INFO' | translate }} </a>
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#promotionCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"> {{ 'JUMBORTON.PREVIOUS' | translate }} </span>
</a>
<a class="carousel-control-next" href="#promotionCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"> {{ 'JUMBORTON.NEXT' | translate }} </span>
</a>
</div>
</ng-container>
:host {
display: block;
}
.carousel {
margin-bottom: 4rem;
min-height: 320px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
max-width: 35%;
left: inherit;
}
/* Declare heights because of positioning of img element */
.carousel-item {
overflow-x: hidden;
}
.carousel-item > img {
height: 100%;
overflow-y: hidden;
width: 100%;
}
Legend
Html element
Component
Html element with directive