در قسمت قبل با نحوه ساخت تم سفارشی در انگیولار متریال ۲، آشنا شدیم. در این قسمت نحوه ساخت چند تم دیگر در کنار تم اصلی، ساخت تم به ازای هر کامپوننت و نحوه تعویض تم از طریق کد را دنبال خواهیم کرد.
ساخت تم اضافی در کنار تم اصلی
ساخت تم اضافی در انگیولار متریال ۲ بسیار ساده است. شما میتوانید با استفاده مجدد از تابع angular-material-theme داخل یک کلاس CSS، صاحب یک تم اضافی دیگر شوید. برای نمونه در اینجا فایل my-custom-theme.scss را باز کرده و به شکل زیر تغییر میدهیم.
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-teal);
$my-app-accent: mat-palette($mat-amber, 500, A100, A400);
$my-app-warn: mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
/*تعریف تم اضافی در کنار تم اصلی*/
$alternate-primary: mat-palette($mat-light-blue);
$alternate-accent: mat-palette($mat-yellow, 500);
$alternate-warn: mat-palette($mat-red, 500);
$alternate-theme: mat-dark-theme($alternate-primary, $alternate-accent);
.alternate-theme {
@include angular-material-theme($alternate-theme);
} با اینکار در کنار تم روشن اصلی، یک تم مشکی به صورت اضافی داخل کلاس CSS به نام alternate-theme تعریف کرده‌ایم. در این حالت تمامی کامپوننتهایی که داخل المنت با کلاس alternate-theme قرار گرفته‌اند، از تم مشکی تعریف شده استفاده خواهند کرد.
با تغییر فایل app.component.html به شکل زیر:
<md-card>
<md-card-header>
<md-card-title>تم اصلی</md-card-title>
</md-card-header>
<button md-raised-button color="primary">
Primary
</button>
<button md-raised-button color="accent">
Accent
</button>
<button md-raised-button color="warn">
Warning
</button>
</md-card>
<div>
<md-card>
<md-card-header>
<md-card-title>تم اضافی</md-card-title>
</md-card-header>
<md-card-content>
<button md-raised-button color="primary">
Primary
</button>
<button md-raised-button color="accent">
Accent
</button>
<button md-raised-button color="warn">
Warning
</button>
</md-card-content>
</md-card>
</div> تصویر زیر را در خروجی خواهید داشت.
به همین روش میتوانید تعداد دلخواهی از تم‌ها را بسازید. همچنین میتوانید هر تم اضافی را در یک فایل Sass تعریف کنید و از این طریق تم‌های مختلف را از هم جدا کنید. در این حالت به این نکته توجه داشته باشید که نباید mat-core@ در سرتاسر برنامه بیش از یکبار بارگذاری شده باشد.
ساخت تم به ازای هر کامپوننت
با استفاده از mixin به نام angular-material-theme خروجی تولید شده بر روی تمامی کامپوننت‌های انگیولار متریال ۲ اعمال خواهد شد. اگر از تمامی کامپوننت‌های انگیولار متریال ۲ استفاده نمی‌کنید، میتوانید برای کاهش حجم فایل CSS تولید شده از mixin مخصوص به هر کامپوننت استفاده کنید. همچنین برای ساخت تم‌های متفاوت به ازای هر کامپوننت نیز میتوانید از این روش استفاده کنید.
برای این کار تمامی مراحلی که برای ساخت تم مورد نیاز بود، باید طی شود. فقط به جای استفاده از mixin به نام angular-material-theme بایستی به طریق زیر عمل شود.
اول: بارگذاری mixin با نام mat-core-them. این mixin تمامی استایل‌های مشترک رفتاری (مانند موج (ripple) در هنگام کلیک) برای کامپوننت‌ها را در بر دارد. این mixin خروجی تابع mat-light-theme یا mat-dark-theme را به عنوان ورودی دریافت میکند.
دوم: بارگذاری mixin مربوط به هر کامپوننت. برای مثال برای دکمه از mixin به نام mat-button-theme و برای checkbox از mixin به نام mat-checkbox-theme میتوانید استفاده کنید. در زیر لیست mixinها به ازای کامپوننت‌های مختلف ذکر شده است.
mat-autocomplete-theme mat-button-theme mat-button-toggle-theme mat-card-theme mat-checkbox-theme mat-chips-theme mat-datepicker-theme mat-dialog-theme mat-grid-list-theme mat-icon-theme mat-input-theme mat-list-theme mat-menu-theme mat-progress-bar-theme mat-progress-spinner-theme mat-radio-theme mat-select-theme mat-sidenav-theme mat-slide-toggle-theme mat-slider-theme mat-tabs-theme mat-toolbar-theme mat-tooltip-theme
در مثال زیر میخواهیم تمامی کامپوننت‌ها به جز کامپوننت دکمه، تم سبز(در گروه Primary) و دکمه‌ها نیز تم آبی داشته باشند. کافی است کدهای زیر را در فایل Sass خود وارد کنید.
@import '~@angular/material/theming'; @include mat-core(); $my-app-primary: mat-palette($mat-teal); $my-app-accent: mat-palette($mat-amber, 500, A100, A400); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include mat-material-theme($my-app-theme); /* تعریف تم برای دکمه */ $button-primary: mat-palette($mat-light-blue); $button-accent: mat-palette($mat-yellow, 500); $button-warn: mat-palette($mat-red, 500); $button-theme: mat-light-theme($button-primary, $button-accent); @include mat-button-theme($button-theme);
با توجه به اینکه mat-material-theme در داخل خود mat-button-theme را بارگذاری میکند دو نتیجه زیر را می‌توان گرفت.
اول: اگر mat-material-theme بعد از هر کدام از mixinهای مربوط به کامپوننت‌ها نوشته شود، تمامی Cssهای تولید شده به ازای کامپوننت را دوباره نویسی کرده و عملا هیچ کدام کارایی نخواهند داشت. برای مثال کافی است فایل Sass خود را به شکل زیر تغییر دهید. در این صورت تم مربوط به دکمه کاریی نخواهد داشت.
@import '~@angular/material/theming'; @include mat-core(); /* تعریف تم برای دکمه */ $button-primary: mat-palette($mat-light-blue); $button-accent: mat-palette($mat-yellow, 500); $button-warn: mat-palette($mat-red, 500); $button-theme: mat-ligth-theme($button-primary, $button-accent); @include mat-button-theme($button-theme); $my-app-primary: mat-palette($mat-teal); $my-app-accent: mat-palette($mat-amber, 500, A100, A400); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include mat-material-theme($my-app-theme);
دوم: همانطور که گفتیم mat-button-theme در mat-material-theme قبلا بارگذاری شده است. با بارگذاری دوباره توسط mat-button-theme کدهای CSS که قبلا برای دکمه تولید شده‌اند را از نو دوباره می‌نویسد و این باعث بزرگ شدن حجم فایل Css تولید شده خواهد شد. پس بهتر است هنگام استفاده از mixinهای مختص کامپوننت‌ها از mat-material-theme استفاده نکنیم.
@import '~@angular/material/theming'; @include mat-core(); $my-app-primary: mat-palette($mat-teal); $my-app-accent: mat-palette($mat-amber, 500, A100, A400); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); $button-primary: mat-palette($mat-light-blue); $button-accent: mat-palette($mat-yellow, 500); $button-warn: mat-palette($mat-red, 500); $button-theme: mat-light-theme($button-primary, $button-accent); @include mat-core-theme($my-app-theme); @include mat-autocomplete-theme($my-app-theme); @include mat-button-theme($button-theme); @include mat-button-toggle-theme($my-app-theme); @include mat-card-theme($my-app-theme); @include mat-checkbox-theme($my-app-theme); @include mat-chips-theme($my-app-theme); @include mat-datepicker-theme($my-app-theme); @include mat-dialog-theme($my-app-theme); @include mat-grid-list-theme($my-app-theme); @include mat-icon-theme($my-app-theme); @include mat-input-theme($my-app-theme); @include mat-list-theme($my-app-theme); @include mat-menu-theme($my-app-theme); @include mat-progress-bar-theme($my-app-theme); @include mat-progress-spinner-theme($my-app-theme); @include mat-radio-theme($my-app-theme); @include mat-select-theme($my-app-theme); @include mat-sidenav-theme($my-app-theme); @include mat-slide-toggle-theme($my-app-theme); @include mat-slider-theme($my-app-theme); @include mat-tabs-theme($my-app-theme); @include mat-toolbar-theme($my-app-theme); @include mat-tooltip-theme($my-app-theme);
تعویض تم از طریق کد
فرض کنید یک تم پیش فرض و یک تم اضافی به نام alternate-theme دارید. برای تعویض تم از طریق کد کافی است کلاس المنت پدر در صفحه html خود را از طریق [ngClass] با نام تم، مقدار دهی کنید. کدهای داخل app.component.ts را به شکل زیر تغییر میدهیم.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
themes = [
{value: 'alternate-theme', text: 'تم مشکی'},
{value: '', text: 'تم سفید'},
];
activeTheme = '';
} آرایه‌ای جهت نمایش در کامپوننت md-select با دو مقدار تم پیش فرض و تم با نام 'alternate-theme تعریف می‌کنیم. همچنین متغیری با نام activeTheme را تعریف می‌کنیم. این متغیر در هر لحظه نام تم اعمال شده را در خود نگهداری میکند. مقدار اولیه این متغیر تم اصلی است.
کامپوننت md-select را به شکل زیر به فایل app.component.html به تگ main اضافه می‌کنیم.
<md-select dir="rtl" [(ngModel)]="activeTheme" placeholder="تعویض تم">
<md-option *ngFor="let theme of themes" [value]="theme.value">
{{ theme.text }}
</md-option>
</md-select> <div [ngClass]="activeTheme">
) یا راست کلیک کردن بروی تب ظاهر میشود.
