web-dev-qa-db-ja.com

Angular 2 Material Customize md-menu

Angular 2 Materialを初めて使用し、md-menuコンポーネントのスタイルをカスタマイズしようとしています。

<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

定義済みのスタイル設定は正常に機能します（たとえば、メニューを非重複に設定します）が、md-menuを100％幅に設定し、md-iconボタンの間に少しスペースを空けて、メニューを展開します。 Angular 2 Material からの事前定義されたディレクティブではできません。

これまでのところ、/ deep/cssコマンドを使用して解決策を見つけましたが、このコマンドは主要なブラウザーでサポートされなくなったことを読みました。

Angular 2 Materialコンポーネントをカスタマイズする良い方法は何ですか？mdメニューのスタイルを設定して、100％の幅と展開ボタンの間にスペースを持たせるにはどうすればよいですか？

私が話していることを説明するために： メニューのドラフト

htmlcssangularangular-material2
10
Polarfox

カスタムクラスをメニューに渡すことができます。

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-full-width-menu">

その後、そのクラスをグローバルスタイルでターゲットにできます。

残念ながら、メニューオーバーレイの配置場所に関する情報をいくつか知って、再配置をハードコードする必要があります。

.mat-menu-panel.my-full-width-menu {
  max-width: none;
  width: 100vw;
  margin-left: -8px;
  margin-top: 24px;
}

Plunker Demo

これを行うright方法は、マテリアルのOverlayModuleを使用してカスタムオーバーレイコンポーネントを作成することです（マテリアルパッケージに現在ありますが、すぐにcdkに移動します） 。

12
Will Howell

Angularでは、ViewEncapsulation.Emulatedがデフォルトのオプションです。つまり、Host要素などに代理キーを追加することで、影響の範囲を絞り込もうとします。1つのオプションは、cssの下に追加することです。ただし、このng-deepも間もなく廃止されます。代替案を知るのを待つ必要があります！ https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .mat-menu-panel {
  max-width: none!important;
  min-width: 400px!important;
}
6
nsk

このコンポーネントのカプセル化をオフにせずにマットメニューのスタイルを設定するには、2つのクラスを使用して、既にやったように特異性を高めるか、！importantを使用する必要があります。ただし、それを機能させるには、それらをglobal stylesheetに入れて、デフォルトのスタイルをオーバーライドする必要があります。

4
Atanas Beychev