मैं कोणीय सामग्री डिजाइन के साथ एक काला और सफेद विषय कैसे बना सकता हूं?

मैं कोणीय सामग्री डिजाइन के लिए एक साधारण काले और सफेद विषय बनाने के लिए देख रहा हूँ। दस्तावेज इस क्षेत्र में अस्पष्ट है।मैं कोणीय सामग्री डिजाइन के साथ एक काला और सफेद विषय कैसे बना सकता हूं?

मेरा लक्ष्य यह करने के लिए है: बाद में निर्णय लिया जाना त्रुटि

अनाघातित पृष्ठभूमि रंग सफेद
अनाघातित पाठ का रंग काला
लहजे है,, रंग चेतावनी

मैं एक कॉन्फ़िगरेशन ब्लॉक में ऐसा कुछ करने की उम्मीद कर रहा था:

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

लेकिन, सफेद और काले पैलेट मौजूद नहीं हैं।

क्या ऐसा करने का कोई आसान तरीका है?

स्रोत

2015-12-03 Andrew Eisenberg

मुझे विश्वास है कि आपको क्या करने की आवश्यकता होगी काले और सफेद दोनों के लिए पैलेट बनाएं। उदाहरण के लिए:

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'); 
});

स्वाभाविक रूप से, आप प्रत्येक पैलेट के बाकी हिस्सों को दूर कर सकते हैं। यहां ध्यान दें कि प्रत्येक मामले में टेक्स्ट रंग सही होने के लिए 'विपरीत डिफॉल्ट कॉलर' महत्वपूर्ण है। इसके अलावा, दुर्भाग्य से ऐसा लगता है कि आपको पूरे रंग पैलेट को परिभाषित करने की आवश्यकता है। एक अन्य विकल्प यदि आप पूरी तरह से नया पट्टियाँ बनाने के लिए नहीं करना चाहती एक मौजूदा पैलेट का विस्तार करने के लिए है:

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

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

स्रोत

2015-12-05 15:58:25

धन्यवाद। यह मोटे तौर पर काम करता है। कुछ चीजें जो मुझे अभी भी अनिश्चित हैं। थीम कुंजी का क्या अर्थ है? मैं मानता हूं कि वे 'md-hue-1',' md-hue-2' से मेल खाते हैं, लेकिन यह स्पष्ट नहीं करता कि उन चाबियों का उपयोग क्यों किया जाता है। 'एमडी-ह्यू-एक्स 'का उपयोग नहीं करना' ए 700' आदि का उपयोग करने से स्पष्ट होगा? इसके अलावा, मैं अभी भी अस्पष्ट नहीं हूं कि किस रंग का उपयोग किया जाता है। अगर मेरा सीएसएस किसी भी 'एमडी-ह्यू- *' कक्षाओं का स्पष्ट रूप से उपयोग नहीं करता है, तो किस रंग का उपयोग किया जा रहा है? –

md-hue- * कुंजी रंग विविधताओं (जैसे A700) को सेट करने के लिए हैं जिनका उपयोग .md-hue- * वर्ग जोड़कर किया जा सकता है, उदाहरण के लिए '.md-primary .md-hue-1' का उपयोग करेगा प्राथमिक पैलेट में एमडी-ह्यू -1 के लिए निर्दिष्ट ह्यू। दस्तावेज़ों के मुताबिक, डिफ़ॉल्ट रंग सेटिंग्स हैं: प्राथमिक, चेतावनी के लिए 500, 300, 800, ए 100 (इसलिए डिफ़ॉल्ट रूप से 500, फिर एमडी-ह्यू -1 300 है, आदि)। तो यह एक स्तर का संकेत जोड़ता है ताकि पैलेट को समायोजित किए बिना एक ही पैलेट को कई विषयों में अलग-अलग इस्तेमाल किया जा सके। –

यह सब समझ में आता है। ऐसा लगता है कि यह एपीआई मूल उपयोगकर्ता पर जटिल उपयोग मामलों के साथ बिजली उपयोगकर्ता को लक्षित करता है। कम से कम, अधिक उदाहरणों के साथ अधिक स्पष्ट दस्तावेज मदद मिलेगी। मैं आपको बक्षीस दूंगा, लेकिन 12 घंटों तक इंतजार करना होगा। –

इस कोड MD-रंग में सफेद और काले रंग का उपयोग करने के लिए मदद मिल सकती है

<!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>

स्रोत

2017-11-15 11:26:57

मैं कोणीय सामग्री डिजाइन के साथ एक काला और सफेद विषय कैसे बना सकता हूं?

उत्तर

संबंधित मुद्दे