कोणीय 2

Question

के लिए सामग्री डिज़ाइन थीम बदलें मैं अपने कोणीय 2 एप्लिकेशन के साथ Angular Material 2 का उपयोग करने का प्रयास कर रहा हूं।

मुझे नहीं मिला कि वैश्विक स्तर पर सामग्री विषय को कैसे बदला जाए (primaryColor, आदि)। मुझे पता है कि कोणीय सामग्री 2 अभी भी अल्फा में है, लेकिन क्या वर्तमान में ऐसा करने का एक तरीका है?

Answer 1

https://github.com/angular/material2/issues/287

@ samio80 शैलियों वर्तमान में मन में थीम के साथ लिखा जाता है, लेकिन हम अभी तक तैयार प्रसंगयुक्तप्रस्तुतिकरण के लिए एक तैनाती रणनीति नहीं है। इस बीच एक कामकाज के रूप में, आप स्रोत को सीधे खींच सकते हैं और _default-theme.s.sss को संशोधित करके और एनपीएम पैकेज (स्क्रिप्ट चरण-release.sh के माध्यम से) को संशोधित करके थीम को कस्टमाइज़ कर सकते हैं।

ध्यान रखें कि हम अभी भी अल्फा प्रक्रिया में शुरुआती हैं और, जैसे, एपीआई या व्यवहार रिलीज़ के बीच बदल सकते हैं। यहाँ https://material.angular.io/guide/theming

और उस थीम दृष्टिकोण गाइड में बताई गई एक नमूना अनुप्रयोग है - -

Answer 2

यहाँ कोणीय सामग्री थीम गाइड के लिए लिंक है https://github.com/jelbourn/material2-app

Answer 3

डायनामिक कोणीय सामग्री विषय कार्यान्वयन का एक उदाहरण है कोणीय 5.1 और कोणीय सामग्री 5.0 के रूप में।

संपादन योग्य उदाहरण कार्य करना -, और फिर एक - https://stackblitz.com/edit/dynamic-material-theming

theme.scss फ़ाइल में सामान्य विषय (यह डिफ़ॉल्ट रूप में इसका इस्तेमाल करेंगे ताकि कोणीय है यह एक वर्ग के नाम के तहत रखा नहीं हो पा रहा है), हल्का और गहरा विषय।

theme.scss

@import '~@angular/material/theming'; 
@include mat-core(); 

// Typography 
$custom-typography: mat-typography-config(
    $font-family: Raleway, 
    $headline: mat-typography-level(24px, 48px, 400), 
    $body-1: mat-typography-level(16px, 24px, 400) 
); 
@include angular-material-typography($custom-typography); 

// Default colors 
$my-app-primary: mat-palette($mat-teal, 700, 100, 800); 
$my-app-accent: mat-palette($mat-teal, 700, 100, 800); 

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent); 
@include angular-material-theme($my-app-theme); 

// Dark theme 
$dark-primary: mat-palette($mat-blue-grey); 
$dark-accent: mat-palette($mat-amber, A200, A100, A400); 
$dark-warn: mat-palette($mat-deep-orange); 

$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); 

.dark-theme { 
    @include angular-material-theme($dark-theme); 
} 

// Light theme 
$light-primary: mat-palette($mat-grey, 200, 500, 300); 
$light-accent: mat-palette($mat-brown, 200); 
$light-warn: mat-palette($mat-deep-orange, 200); 

$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn); 

.light-theme { 
    @include angular-material-theme($light-theme) 
} 

app.component फ़ाइल में, @ कोणीय/CDK/ओवरले से OverlayContainer शामिल हैं। आप यहां https://material.angular.io/guide/theming के लिए कोणीय के दस्तावेज़ ढूंढ सकते हैं; हालांकि उनका कार्यान्वयन थोड़ा अलग है। कृपया ध्यान दें, मुझे ऐप. मॉड्यूल में आयात के रूप में ओवरले मॉड्यूल भी शामिल करना था।

मेरी app.component फ़ाइल में, मैंने एक चर के रूप में @HostBinding('class') componentCssClass; भी घोषित किया, जिसका उपयोग थीम को कक्षा के रूप में सेट करने के लिए किया जाएगा।

app.component.ts

import {Component, HostBinding, OnInit} from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { Version } from './classes/version'; 
import { OverlayContainer} from '@angular/cdk/overlay'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent implements OnInit { 

    constructor(private http: HttpClient, public overlayContainer: OverlayContainer) {} 

    title = 'app'; 
    version: Version; 
    @HostBinding('class') componentCssClass; 

    ngOnInit() { 
    this.getVersion(); 
    } 

    onSetTheme(theme) { 
    this.overlayContainer.getContainerElement().classList.add(theme); 
    this.componentCssClass = theme; 
    } 

    getVersion() { 
    this.http.get<Version>('/api/version') 
     .subscribe(data => { 
     this.version = data; 
     }); 
    } 

} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { HttpClientModule } from '@angular/common/http'; 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MatCardModule } from '@angular/material/card'; 
import { MatButtonModule } from '@angular/material/button'; 

import { AppComponent } from './app.component'; 

import { OverlayModule } from '@angular/cdk/overlay'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    HttpClientModule, 
    BrowserAnimationsModule, 
    MatCardModule, 
    MatButtonModule, 
    OverlayModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

अंत में, अपने दृश्य से onSetTheme फ़ंक्शन को कॉल करें।

app.component.html

<button mat-raised-button color="primary" (click)="onSetTheme('default-theme')">Default</button> 
<button mat-raised-button color="primary" (click)="onSetTheme('dark-theme')">Dark</button> 
<button mat-raised-button color="primary" (click)="onSetTheme('light-theme')">Light</button> 

आप एक नमूदार का उपयोग कर तो यह है कि कार्यक्षमता और अधिक गतिशील हो जाएगा सोच सकते हैं।