web-dev-qa-db-ja.com

material2：マットミニファブサイズとアイコンサイズの適切な変更

質問を複製して申し訳ありません。問題に関する情報が見つかりませんでした。

angular 6 と material design を使用しています。ボタンmat-fab-miniとその中のアイコンのサイズを変更する必要があります。そのような方法で提示された検査ツールのhtmlで：

enter image description here

サイズを変更するには、次のコードを使用しましたが、ボタン内のアイコンのサイズは小さくなりません。

html

<button mat-mini-fab class="my-fab">
    <mat-icon aria-label="favorite">favorite</mat-icon>
</button>

scss

.my-fab {
    width: 20px;
    height: 20px;
    line-height: 16px;

    .mat-button-wrapper {
         padding: 2px 0 !important;
         line-height: 16px !important;
         width: 16px !important;
         height: 16px !important;

         .mat-icon {
              font-size: 16px;
              padding-right: 4px;
              line-height: 16px;
          }
    }
}

そしてここに結果があります：

enter image description here

.mat-button-wrapperの属性はまったく変更されません。アイコンはボタンの下部にあり、アイコンのサイズは変更されませんでした。マテリアル2のアイコンのサイズを変更して、それを回避するにはどうすればよいですか？

angularsassmaterial-designangular-material2
5
Merge-pony

さて、私は解決策を見つけました。 angular material 2 components）で継承プロパティを変更するのは本当に難しいです。私の状況でこれを行うには、回答どおりに行う必要があります ここでは（プラス（：D））

したがって、私のコードでは、scssに次の変更を加えました。

.my-fab {
     width: 20px;
     height: 20px;
     line-height: 14px;
     font-size: 14px;

     &::ng-deep .mat-button-wrapper{
         line-height: 14px;
         padding: 0;

          .mat-icon {
              font-size: 14px;
              padding-right: 4px;
              padding-top: 4px;
          }
    }
}

そして今、すべてが素晴らしく見えます。 mat-fab-miniとその中のアイコンのサイズを変更する適切で適切な方法がわかっている場合は、ここで答えてください。うまくいけば、正解としてマークします。それ以外の場合は、2日後に正解としてマークします。

2
Merge-pony

私はこのように成功しました：

html

<button mat-mini-fab color="basic" class="button24">
  <mat-icon class="icon24">attach_file</mat-icon>
</button>

cSS

.button24 {
  background-color: #eee;
  width: 24px;
  height: 24px;
}
.icon24 {
  font-size: 16px;
  margin-top: -8px;
}

JPM

1
JPMous

ボタンのサイズを変更したいようです。1.buttonのサイズを変更します。2。アイコンのラッパーであるスパンと3.含まれているアイコンのサイズも変更します。また、以下のようにグローバルstyle.scssファイルにミックスインを作成して、さまざまなサイズで再利用できるようにします。

@mixin change-button-size($btnsize,$fontsize) {
    height: $btnsize;
    width: $btnsize;
    line-height: $btnsize;
    span{
        height: $btnsize;
        padding: 0px !important;
        i{
            font-size: $fontsize;
        }
    }
}
.mat-mini-fab.mdb-30{
    @include change-button-size(30px, 15px);
}
.mat-mini-fab.mdb-40{
    @include change-button-size(40px, 20px);
}
0
Anoop Isaac

angularマテリアルコンポーネントのスタイル設定をいじくり回した私の経験から、それらのスタイルは深くネストされており、ほとんどの場合、階層は、クラスをターゲットとするコードを記述したものであると言えます。要素は機能しません。

ただし、アイコンに関しては、簡単な解決策があります。 <i>の代わりに<mat-icon>タグと意味のあるマテリアルクラスを使用してください

<button mat-mini-fab class="my-fab">
  <i class="material-icons md-18" aria-label="favorite">favorite</i>
</button>

上記のコードでは、クラスmd-18はアイコンのフォントサイズを18ピクセルに定義しています。 md-24、md-36、またはmd-48を使用することもできます。これらはすべて、マテリアルフレームワークの事前定義されたクラスです。カスタムサイズが必要な場合は、CSSのmy-fabクラスを使用してボタン内の<i>タグをターゲティングし、そのフォントサイズを以下のように変更できます

.my-fab i {
  font-size: 15px;
}

お役に立てれば！

0
rgantla

私のために働いた

HTML

  <button mat-fab>
    <mat-icon class="md-36" inline aria-label="Home button">
      home
    </mat-icon>
  </button>
  <button mat-fab>
    <mat-icon class="md-48" inline aria-label="Up button">
      expand_less
    </mat-icon>
  </button>

CSS

.material-icons.md-18 {
  margin-top: -3px;
  font-size: 18px;
}
.material-icons.md-24 {
  margin-top: -3px;
  font-size: 24px;
}
.material-icons.md-36 {
  margin-top: -3px;
  font-size: 36px;
}
.material-icons.md-48 {
  margin-top: -4px;
  font-size: 48px;
}

アイコンは適切に中央に配置され、ラッパーdivはfab/buttonからオーバーフローしません。エレガントすぎるとは思いません。

0
alexkhotkevich

タイトルで小さい編集ボタンを使用する私の解決策（SCSS）：

h3 > button {
    width: 1.8rem !important;
    height: 1.8rem !important;
    line-height: 80% !important;

    .mat-button-wrapper {
        padding-top: 0.4rem !important;
        line-height: 80% !important;
    }

    .mat-icon {
        width: 80%;
        height: 80%;
        font-size: 80%;
    }
}

テンプレート：

<h3>
    Title
    <button mat-mini-fab color="primary" class="ml-2" title="Edit" (click)="edit()">
        <mat-icon>edit</mat-icon>
    </button>
</h3>
0
Spikolynn