File
Metadata
| selector |
cmn-card |
| styleUrls |
./card.component.scss |
| templateUrl |
./card.component.html |
import { Component, Input } from '@angular/core';
@Component ({
selector: 'cmn-card',
templateUrl: './card.component.html',
styleUrls: [ './card.component.scss' ],
})
export class CardComponent {
@Input() public readonly text: string;
@Input() public readonly title: string;
@Input() public readonly image: string;
@Input() public readonly hasBorder: boolean;
}
<div class="card"
[class.has-borderless]="!hasBorder">
<div class="card-image">
<figure class="image is-2by1">
<img [src]="image"/>
</figure>
</div>
<div class="card-content">
<div class="content">
<span class="title is-4">
{{ title }}
</span>
<p>
{{ text }}
</p>
</div>
</div>
</div>
:host {
.card {
&.has-borderless {
box-shadow: none;
}
}
}
Legend
Html element with directive