web-dev-qa-db-ja.com

angular materialの特定のブレークポイントのcssを書く方法

DivのCSSを作成しようとしています。これは、特定のブレークポイントがヒットした場合にのみ適用されます。 sm、mdまたはlg。

私はangular-materialを使用しています（ https://material.angularjs.org ）。

これはメディアクエリ@media (max-width: 480px) { ... }を使用して実行できることは知っていますが、これを実行するための角度のあるマテリアルな方法を探しています。

angularjsresponsive-designmaterial-designangularjs-material
16
Tarun

そのために$ mdMediaサービスを使用しています。以下を参照してください。

https://material.angularjs.org/latest/#/api/material.core/service/ $ mdMedia

さらに、テンプレートで直接使用できます。 ng-classディレクティブを使用する場合：

// In your controller: 
$scope.$mdMedia = $mdMedia;

// In your template: 
<div ng-class="{sm: $mdMedia('sm'), md: $mdMedia('md'), lg: $mdMedia('lg')}">...</div >
24
Rob

マテリアルブレークポイントを使用してタグにカスタムcssを追加し、次のようなカスタムcssがあるとします。

.textLeft{
text-align: left;
margin-left: 24%;
}

モバイルデバイスでない場合は、h3タグに追加したい場合は、以下の手順に従ってください。
1。モジュールにngMaterialを追加します。

var app = angular.module('MyApp',['ngMaterial']);

2. $ mdMediaをコントローラーに挿入します

app.controller('TabCtrl', ['$scope','$mdMedia', function($scope,$mdMedia){
  var thisCtrl = this;
  $scope.$mdMedia = $mdMedia;
}]);

3.ここで、Robが前述したように$ mdMediaを使用します。

<div ng-controller="TabCtrl" layout="column">   
<h3 ng-class="{'textLeft' : $mdMedia('gt-sm')}">
                        {{user.name}}</h3>
</div>
2
vijay