angularjs - page - meta tags angular 6

cómo escribir css para un punto de ruptura específico en material angular

Question

Estoy tratando de escribir CSS para un div, que debería aplicarse solo cuando se alcanza un punto de interrupción en particular, por ejemplo. sm, md o lg.

Estoy usando material angular ( https://material.angularjs.org ).

Sé que esto se puede hacer usando consultas de medios @media (max-width: 480px) { ... } pero estoy buscando una forma material angular para hacer esto.

Answer 1

Agregando un css personalizado a una etiqueta usando puntos de interrupción de material, supongamos que tengo un css personalizado como el siguiente:

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

y quería agregarlo a una etiqueta h3 si no es un dispositivo móvil, luego siga los pasos a continuación.
1. Agregue ngMaterial al módulo.

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

2. inyecte $ mdMedia al controlador

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

3. Ahora use $ mdMedia como lo describió Rob anteriormente:

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

Answer 2

Estoy usando el servicio $ mdMedia para eso, vea:

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

Además, puede usarlo directamente en una plantilla, por ejemplo, con una directiva de clase ng:

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

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