技術標籤：AngularHTMLscss前端

① 建立一個ui-theme 的元件。

ui-theme.component.html

<div class="testDemo" [ngClass] = "{'red-theme': isPlus, 'blue-theme': !isPlus}">
        <div *ngIf = "isPlus" class="background">
            <p  class="font">plus 版</p>
        </div>
        <div *ngIf = "!isPlus" class="background">
            <p  class="font">common 版</p>
        </div>
</div>
 

ui-theme.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-ui-theme',
  templateUrl: './ui-theme.component.html',
  styleUrls: ['./ui-theme.component.scss']
})
export class UIThemeComponent implements OnInit {

  @Input() isPlus = false;
  constructor() { }

  ngOnInit(): void {
    this.isPlus = false;
  }

}
 

ui-theme.component.scss

@import "../ui-theme-styles.scss";

@mixin theme($name, $background_color, $font_color, $font_size, $font_weight) {

    .testDemo.#{$name}{
       .background {
           height: 200px;
           width: 200px;
           line-height: 200px;
           background:$background_color;
           .font {
               color: $font_color;
               font-size: $font_size;
               text-align: center;
               font-weight: $font_weight;
           }
       }
    }
}

@include theme(red-theme, $background_color_red, $font_color_light, $font_size_18, $font_weight_600);
@include theme(blue-theme, $background_color_blue, $font_color_White, $font_size_24, $font_weight_300);
 

②建立一個公共的樣式表。

ui-theme-styles.scss

$background_color_red: #ff5b4d;
$background_color_blue: #34495e;
$font_color_White: #ffffff;
$font_color_light: #f8d5d5;
$font_size_18:18px;
$font_size_24:24px;
$font_weight_300: 300;
$font_weight_600: 600;

③在起始頁app.component.html 中應用ui-theme 的元件 。

<app-ui-theme></app-ui-theme>

完成！ 隨便寫的一個小例子，喜歡的點贊！不喜勿噴，Thank you!