如何将Semantic UI整合到Angular应用程序中的教程

在本博客教程中，我们将通过实例来学习在Angular应用程序中整合语义用户界面。

什么是Semantic UI框架？

Semantic UI是用于快速构建和开发响应式HTML网站的UI库。它就像bootstrap框架一样，拥有内置的UI组件。

特点

• 支持任何尺寸的屏幕
• 它提供了超过20种以上的主题
• 可以作为独立的HTML/CSS文件或NPM包管理器使用
• 内置漂亮的用户体验设计，并提供各种内置的组件
• 支持Angular2/4/5/6/7/9/10/11/12/13版本。

如何向Angular项目添加Semantic UI

Angular 12是一个最新的前端MVC框架，用于构建动态UI应用程序。

首先，使用angular CLI创建一个angular应用程序。它可以生成所需的基本组件和typescript文件以及配置文件。ng2-semantic-ui是用于angular框架的npm库之一。

ng2-semantic-ui Angular实例

Semantic UI提供了NPM库ng2-semantic-ui，这个库不需要jquery库。安装ng2-semantic-ui库

npm install ng2-semantic-ui --save

这将安装semantic ui库，并在package.json中添加一个条目。

{
  "dependencies":{
    "ng2-semantic-ui":"0.9.7";
  }
}

一旦npm库安装完毕，请在index.html中配置semantic UI cdn css文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

ng2-semantic-ui在Angular模块中提供每个组件，要使用语义用户界面组件，首先需要在应用模块中导入SuiModule主模块

在app.module.ts中导入SuiModule模块

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { SuiModule } from 'ng2-semantic-ui';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SuiModule, // Add Semantic UI module
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

Html模板的变化

为增量和减量添加了两个语义用户界面按钮。为每个按钮添加了点击事件。

 <div style="text-align:center">
   <h1>
    Angular Semantic UI tutorials With Example
</h1>
</div>
<div style="text-align:center">
<button class="ui primary button" (click)="IncrementEvent()">
  Increment
</button>
<button class="ui primary button" (click)="DecrementEvent()">
  Decrement
</button>
</div>
<div style="text-align:center">
Clicks Count: {{count}}
</div>

类型化组件变化

在组件中添加了增量和减量的两个事件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  count: number = 0;

  IncrementEvent() {
        this.count++;
    }
    DecrementEvent() {
        this.count--;
    }
}

使用ng serve命令启动开发服务器。可以使用localhost:4200访问该应用程序。输出

结论

Semantic UI是一个带有内置组件的简易UI库，在本教程中，学习了如何将Semantic UI整合到Angular应用程序中。