Wie erstelle ich ein Schwarz-Weiß-Design mit Angular Material Design?

Ich bin auf der Suche nach einem einfachen Schwarz-Weiß-Thema für Angular Material Design. Die Dokumentation ist in diesem Bereich spärlich.Wie erstelle ich ein Schwarz-Weiß-Design mit Angular Material Design?

Mein Ziel ist es, dies zu tun:

Unaccented Hintergrundfarbe ist weiß
Unaccented Textfarbe schwarz ist
Akzente, Fehler, Farben Warnung später

ich entschieden werden hatte gehofft, so etwas in einem Konfigurationsblock zu tun:

$mdThemingProvider.theme('default') 
    .primaryPalette('black') 
    .backgroundPalette('white');

Aber die weißen und schwarzen Paletten existieren nicht.

Gibt es eine einfache Möglichkeit, dies zu tun?

Quelle

2015-12-03 Andrew Eisenberg

Ich glaube, was Sie tun müssen, ist die Paletten für Schwarz und Weiß zu erstellen. Zum Beispiel:

angular.module('myApp', ['ngMaterial']) 
.config(function($mdThemingProvider) { 
    $mdThemingProvider.definePalette('black', { 
    '50': '000000', 
    '100': '000000', 
    '200': '000000', 
    '300': '000000', 
    '400': '000000', 
    '500': '000000', 
    '600': '000000', 
    '700': '000000', 
    '800': '000000', 
    '900': '000000', 
    'A100': '000000', 
    'A200': '000000', 
    'A400': '000000', 
    'A700': '000000', 
    'contrastDefaultColor': 'light' 
    }); 
    $mdThemingProvider.definePalette('white', { 
    '50': 'ffffff', 
    '100': 'ffffff', 
    '200': 'ffffff', 
    '300': 'ffffff', 
    '400': 'ffffff', 
    '500': 'ffffff', 
    '600': 'ffffff', 
    '700': 'ffffff', 
    '800': 'ffffff', 
    '900': 'ffffff', 
    'A100': 'ffffff', 
    'A200': 'ffffff', 
    'A400': 'ffffff', 
    'A700': 'ffffff', 
    'contrastDefaultColor': 'dark' 
    }); 

    $mdThemingProvider.theme('default') 
    .primaryPalette('black') 
    .backgroundPalette('white'); 
});

Natürlich können Sie den Rest jeder Palette ausstatten. Beachten Sie, dass die 'contrastDefaultColor' wichtig ist, um die Textfarbe in jedem Fall richtig zu machen. Außerdem scheint es leider, dass Sie die gesamte Farbpalette definieren müssen. Eine weitere Option, wenn Sie nicht ganz neue Paletten erstellen wollen, ist eine bestehende Palette zu erweitern:

var blackPalette = $mdThemingProvider.extendPalette('grey', { '500': '000000' }); 
$mdThemingProvider.definePalette('black', blackPalette);

https://material.angularjs.org/latest/Theming/03_configuring_a_theme

Quelle

2015-12-05 15:58:25

Danke. Das funktioniert ungefähr. Manche Dinge bin ich noch unsicher. Was bedeuten die Themenschlüssel? Ich erkenne, dass sie "md-hue-1", "md-hue-2" entsprechen, aber das erklärt nicht, warum diese Tasten verwendet werden. Würde 'md-hue-x' nicht klarer sein als' A700' usw.? Auch ist mir noch unklar, welche Farbtöne wann verwendet werden. Wenn mein CSS niemals explizit 'md-hue- *' Klassen verwendet, welche Farbtöne werden verwendet? –

Die Tasten md-hue- * dienen zum Einstellen von Farbvariationen (wie A700), die durch Hinzufügen der Klasse .md-hue- * verwendet werden können, zum Beispiel '.md-primary .md-hue-1' würde das verwenden Farbton für md-hue-1 in der Primärpalette angegeben. Laut der Dokumentation sind die Standardeinstellungen für den Farbton: 500, 300, 800, A100 für Primär und Warnung (also standardmäßig 500, dann ist md-hue-1 300 usw.). Es fügt also eine indirekte Ebene hinzu, so dass die gleiche Palette in verschiedenen Themen anders verwendet werden kann, ohne die Palette selbst anzupassen. –

Das macht alles Sinn. Es scheint mir, dass diese API den Power-User mit komplexen Anwendungsfällen gegenüber dem Basisbenutzer anvisiert. Zumindest würde eine explizitere Dokumentation mit mehr Beispielen helfen. Ich werde Ihnen das Kopfgeld geben, muss aber 12 Stunden warten. –

Dieser Code kann helfen, für die Verwendung von weißen und schwarzen Farben in md-Farben

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <!-- Angular Material style sheet --> 
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
     </head> 
     <body ng-app="BlankApp" ng-cloak md-colors="::{'background': 'grey-400'}"> 
      <!--Your HTML content here--> 
      <div flex layout="row"> 
       <div flex layout="row" layout-padding md-colors="{'color':'white-50', 'background': 'black-500'}" 
       layout-align="center center">White text and Black background</div> 
       <div flex layout="row" layout-padding md-colors="{'color':'black-50', 'background': 'white-500'}" 
       layout-align="center center">Black text and White background</div> 
      </div> 
      <!--Your HTML content here--> 
      <!-- Angular Material requires Angular.js Libraries --> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
      <!-- Angular Material Library --> 
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
      <!-- Your application bootstrap --> 
      <script> 
       /** 
       * You must include the dependency on 'ngMaterial' 
       */ 
       var app = angular.module('BlankApp', ['ngMaterial']); 
       app.config(function($mdThemingProvider) { 
        $mdThemingProvider.definePalette('black', { 
        '50': '000000', 
        '100': '000000', 
        '200': '000000', 
        '300': '000000', 
        '400': '000000', 
        '500': '000000', 
        '600': '000000', 
        '700': '000000', 
        '800': '000000', 
        '900': '000000', 
        'A100': '000000', 
        'A200': '000000', 
        'A400': '000000', 
        'A700': '000000', 
        'contrastDefaultColor': 'light' 
        }); 
        $mdThemingProvider.definePalette('white', { 
        '50': 'ffffff', 
        '100': 'ffffff', 
        '200': 'ffffff', 
        '300': 'ffffff', 
        '400': 'ffffff', 
        '500': 'ffffff', 
        '600': 'ffffff', 
        '700': 'ffffff', 
        '800': 'ffffff', 
        '900': 'ffffff', 
        'A100': 'ffffff', 
        'A200': 'ffffff', 
        'A400': 'ffffff', 
        'A700': 'ffffff', 
        'contrastDefaultColor': 'dark' 
        }); 

        $mdThemingProvider.theme('default') 
        .primaryPalette('black') 
        .backgroundPalette('white'); 
       }); 
      </script> 
     </body> 
    </html>

Quelle

2017-11-15 11:26:57

Wie erstelle ich ein Schwarz-Weiß-Design mit Angular Material Design?

Antwort

Verwandte Themen