我们可以将 Mat-card 与 Anchor Tag 一起使用吗?
Can we use Mat-card with Anchor Tag?
我想让垫卡可以点击,当我将鼠标悬停在垫卡上时,我想显示 link 光标。有很多卡片,当我单击其中一张卡片时,我想导航到另一个页面。我怎样才能做到这一点?
在我的模板中使用下面的代码是否合适html.
<a mat-card routerLink= ...> Buy </a>
我的第一次尝试是
<div fxLayout="row rap">
<mat-card>
<mat-card-content>
<div> 0 </div>
<div> 3000 ETB</div>
</mat-card-content>
</mat-card>
<mat-card> .... </mat-card>
</div>
为什么不将垫卡包裹在 <a>
中,但一定要删除上面的下划线样式
相关HTML:
<a class='removeStyle' href='#'>
<mat-card class="example-card">
....
</mat-card>
</a>
相关CSS:
.removeStyle{
text-decoration: none;
}
HTML
<mat-card (click)="redirect(100)">
<mat-card-content>
<div> 0 </div>
<div> 3000 ETB</div>
</mat-card-content>
</mat-card>
<mat-card (click)="redirect(200)">
<mat-card-content>
<div> 0 </div>
<div> 4000 ETB</div>
</mat-card-content>
</mat-card>
CSS
mat-card {
cursor: pointer;
margin-bottom: 1rem;
}
TS
redirect(id) {
alert('Called from ' + id);
}
<a *ngFor="let card of childCards" [routerLink]="[card?.targetUrl]">
在锚标签内写入垫卡代码。
我想让垫卡可以点击,当我将鼠标悬停在垫卡上时,我想显示 link 光标。有很多卡片,当我单击其中一张卡片时,我想导航到另一个页面。我怎样才能做到这一点?
在我的模板中使用下面的代码是否合适html.
<a mat-card routerLink= ...> Buy </a>
我的第一次尝试是
<div fxLayout="row rap">
<mat-card>
<mat-card-content>
<div> 0 </div>
<div> 3000 ETB</div>
</mat-card-content>
</mat-card>
<mat-card> .... </mat-card>
</div>
为什么不将垫卡包裹在 <a>
中,但一定要删除上面的下划线样式
相关HTML:
<a class='removeStyle' href='#'>
<mat-card class="example-card">
....
</mat-card>
</a>
相关CSS:
.removeStyle{
text-decoration: none;
}
HTML
<mat-card (click)="redirect(100)">
<mat-card-content>
<div> 0 </div>
<div> 3000 ETB</div>
</mat-card-content>
</mat-card>
<mat-card (click)="redirect(200)">
<mat-card-content>
<div> 0 </div>
<div> 4000 ETB</div>
</mat-card-content>
</mat-card>
CSS
mat-card {
cursor: pointer;
margin-bottom: 1rem;
}
TS
redirect(id) {
alert('Called from ' + id);
}
<a *ngFor="let card of childCards" [routerLink]="[card?.targetUrl]">
在锚标签内写入垫卡代码。