Generieren Sie benutzerdefinierte Material Farbpalette für Angular Theming

Ich brauche eine benutzerdefinierte Farbpalette dynamisch zu konfigurieren Thema für meine Angular App.Generieren Sie benutzerdefinierte Material Farbpalette für Angular Theming

Standardmaterial-Farbpalette verfügbar: https://material.io/guidelines/style/color.html.

Ich muss Farbpalette Ausgabe wie oben genannten Dokumentation dynamisch generieren, während Farbcode als Eingabe.

Beispiel: Wenn ich # E91E63 als Eingabe in meinem Code gebe, sollte die Ausgabe Farbpalette nach diesem Eingang sein.

Gibt es eine Möglichkeit, es mit angular/javascript/es6 zu implementieren?

Quelle

2017-03-23 Shafiq

Ich nehme wurde gleiche Aufgabe zu tun, und ich war wohl gleiche Lösung zu implementieren, versuchen, wenn dies für Sie arbeitet, habe ich auch Link teilen bin, wo ich diese Lösung finden konnte (http://codepen.io/davidwolsey/pen/Qbrqoe)

<body ng-app="myApp"> 
    <div ng-controller="demoController as demo" md-theme="{{theme}}" md-theme-watch="true"> 
    <md-button href="#" class="md-primary md-raised" ng-click=changeTheme()> 
     Change theme 
    </md-button> 
    <div class="thing"> 
     Current theme is {{theme}}. 
    </div> 
    <div> 
     <md-button href="#" class="md-primary md-raised"> 
     Primary 
     </md-button> 
     <md-button href="#" class="md-raised md-accent"> 
     Accent 
     </md-button> 
     <md-button href="#" class="md-raised md-warn"> 
     Warn 
     </md-button> 
    </div> 
    </div> 
</body> 



(function(){ 
    var app = angular.module('demoApp', ['ngMaterial']) 
    .config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('indigo') 
     .primaryPalette('indigo') 
     .accentPalette('pink'); 

    $mdThemingProvider.theme('lime') 
     .primaryPalette('lime') 
     .accentPalette('orange') 
     .warnPalette('blue'); 

    // This is the absolutely vital part, without this, changes will not cascade down through the DOM. 
    $mdThemingProvider.alwaysWatchTheme(true); 
    }) 
    .controller('demoController', function($scope){ 
     $scope.theme = 'lime'; 
     $scope.changeTheme = function() { 
     $scope.theme = $scope.theme === 'indigo' ? 'lime' : 'indigo'; 
     }; 
    }); 
})();

Quelle

2017-03-23 11:58:54 Rahil

Standard-Farbnamen (wie Indigo, Pink etc.) funktionieren bereits für mich. Mein Problem ist mit benutzerdefinierten Farbcodes anders als Standard-Farbnamen verwenden. In Ihrem Beispiel möchte ich primaryPalette ('# E91E63') anstelle von primaryPalette ('limone') geben. Dafür muss ich Farbpalette für den Farbcode generieren: # E91E63. – Shafiq

Freund Ich schlage den Code vor, mehr in einer Weise, die diese Verbindungen benutzt, Sie finden alle Farbe mit richtigem Farbenpflücker und folglich können Sie kundenspezifische Farbenpalette herstellen, (http://mcg.mbitson.com/#!?mcgpalette0= % 233f51b5), Danke safiq – Rahil

Dieses Tool war falsch für die Farben 500 - 900, also arbeite ich an https://codepen.io/sebilasse/pen/GQYKJd?editors=0010 (siehe auch Konsole) – sebilasse

Generieren Sie benutzerdefinierte Material Farbpalette für Angular Theming

Antwort

Verwandte Themen