Блог

Как добавить меню в правом верхнем углу карточки, используя угловой материал, согласно https://material.angular.io/components/card/overview документ для этого нет тега.

Я хочу добавить кнопку со значком в правом верхнем углу, как показано на рисунке

     <mat-card class="custome-card">
    <a [routerLink]="['/products/123']">
        <img mat-card-image
            src="https://wonderfulengineering.com/wp-content/uploads/2013/12/Lamborghini-wallpaper-14.jpg"
            alt="Photo of a Shiba Inu">
    </a>
    <mat-card-content>
        <a [routerLink]="['/products/123']" class="productDetail"><span
                class="mat-subheading-2">Lamborghini Aventador</span></a><br>
        <span>NRs 1 - 2 Crore</span><br>
        <strong>Size: </strong> <span>XL L M S XS</span>
    </mat-card-content>
    <mat-card-actions>
        <div fxLayout="row" fxLayoutAlign="center">
            <falcon-button [field]="favoriteBtnConfig"></falcon-button>amp;nbsp;
            <falcon-button [field]="shareBtnConfig"></falcon-button>amp;nbsp;
            <falcon-button [field]="shopCartBtnConfig"></falcon-button>
        </div>
    </mat-card-actions>
</mat-card>
  

Приведенный выше код создает изображение, как показано ниже

Это решает проблему

  .mdl-card__menu {
        position: absolute;
        right: 16px;
        top: 16px;
    }