Anguar基礎學習三(UI框架、SVG圖標的使用)

NG-ZORRO

官方鏈接：https://ng.ant.design/docs/introduce/zh

具體詳情以及API可以在官方文檔裏查詢。

1.cnpm install ng-zorro-antd --save，安裝依賴包

2.引入模塊

在app.module.ts中加入

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule} from 'ng-zorro-antd';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    /** 導入 ng-zorro-antd 模塊 **/
    NgZorroAntdModule
  ],
  bootstrap: [ AppComponent ],
  providers   : []
})
export class AppModule { }

3.引入樣式與 SVG 資源

在 angular.json 文件中引入樣式和 SVG icon 資源。

{
  "assets": [
    ...
    {
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }
  ],
  "styles": [
    ...
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

4.引入樣式

在styles.scss中引入樣式，官網上沒給這個，我個人使用需要引入這個，否則樣式不起作用。

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css";

之後就可以在項目中使用ng-zorroUI框架了。

---

SVG圖標使用

阿里圖標庫：https://www.iconfont.cn/

1.將所選圖標添加至購物車

2.在購物車中選擇添加至項目

3.將項目下載至本地

4.將下載的文件添加至項目的assets下

5.在styles.scss文件中引入css文件

@import "./assets/iconfont/iconfont.css";

6.根據css文件中content使用圖標

在下載文件中demo_index.html中也有使用方式

---

element UI

官網鏈接：https://element-angular.faas.ele.me/guide/install

用法與NG-ZORRO一樣，官網給的比較詳細

安裝、引入、css中引入樣式。就可以使用了