Question

我想在Angular2 Material中的fab按钮内放置一个图像。如果您是在Google或Gmail上登录，那就是外观。

Angular2 Material docs还没有任何内容。

例如，请参阅此图片：http://www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png

我一直在玩的代码（不起作用）是：

    <button md-fab 
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
        <div class="md-ripple-container"></div>
    </button>

    <button md-fab 
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-fab md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button
        type="button">
        <img [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button
        md-fab-image
        type="button">
        <img  [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

非理想黑客

    <button md-fab md-button
        style="overflow:hidden;top:1rem;"
        type="button">
        <img [src]="userInfo.photoUrl" style="max-width:100%">
    </button>

Answer 1

您可以使用：

mat-icon-button 圆形按钮，背景为透明，意为包含图标

<button (click)="onEditBtnClick(row)" mat-icon-button color="accent"> 
    <mat-icon>create</mat-icon>
</button>

＆＃34;创建＆＃34;是来自https://material.io/icons/的图标 https://material.angular.io/components/component/button

Answer 2

我建议使用下面的材质设计md-icon，它可以用材质图标

播放

<button md-raised-button><md-icon>home</md-icon>Some Button</button>

<button md-fab><md-icon>home</md-icon></button>

<button md-mini-fab><md-icon>list</md-icon></button>

<md-icon> </md-icon>内链接的任何短语都被假定为图标的代码。

注意：常用的bootstrap glyphicons，字体很棒，正在进行中。

<强> LIVE DEMO

Answer 3

您可以使用button md-fab一些额外的样式。

<button md-fab class="image" 
  [style.backgroundImage]="'url(' + YOUR_IMAGE_URL + ')'">
</button>

并添加：

button {
  &.image {
   background-color: transparent;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
  }
}

Answer 4

src属性不是事件

<img md-fab-image [src]="userInfo.photoUrl">

如何在Angular2 Material fab按钮内放置图像？

非理想黑客

4 个答案: