src/components/multi-slot-container/multi-slot-container.component.ts
This component wraps the following child components:
| encapsulation | ViewEncapsulation.None |
| selector | fs-multi-slot-container |
| styleUrls | ./multi-slot-container.component.scss |
| templateUrl | ./multi-slot-container.component.html |
Properties |
|
constructor(componentData: CmsComponentData<MultiSlotContainerComponentData>)
|
||||||
|
Parameters :
|
| Public componentData |
Type : CmsComponentData<MultiSlotContainerComponentData>
|
import { Component, ViewEncapsulation } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { MultiSlotContainerComponentData } from './multi-slot-container.model';
/**
* This component wraps the following child components:
*
* @link MSCCategoryItemComponent
* @link MSCContentItemComponent
* @link MSCProductItemComponent
*
* @export
* @class MultiSlotContainerComponent
*/
@Component({
selector: 'fs-multi-slot-container',
templateUrl: './multi-slot-container.component.html',
styleUrls: ['./multi-slot-container.component.scss'],
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class MultiSlotContainerComponent {
constructor(public componentData: CmsComponentData<MultiSlotContainerComponentData>) {}
}
<ng-container *ngIf="componentData?.data$ | async as convertedData">
<div [attr.data-preview-id]="convertedData.previewId" class="multi-slot-container">
<div class="msc-headline">
<h2>{{ convertedData.headline }}</h2>
</div>
<div data-preview-id="#st_items" class="msc-items">
<ng-container *ngFor="let item of convertedData.items" [cxComponentWrapper]="item"></ng-container>
</div>
</div>
</ng-container>
./multi-slot-container.component.scss
.multi-slot-container {
margin: 1rem 0;
font-size: calc(16px + (18 - 16) * ((100vw - 600px) / (1600 - 600)));
}
.msc-headline {
margin: 1rem 0 1rem 0;
h2 {
font-weight: 700;
}
}
.msc-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
@media (min-width: 62em) {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
// change layout for child components
.msc-items *:only-child {
.msc-item {
flex-direction: row;
.msc-content {
width: 50%;
.btn.btn-primary {
display: inline-block !important;
}
}
.msc-image {
width: 50%;
}
}
}