Angular 13 -如何用实例整合zurb foundation的CSS？

迪鲁宾
116 阅读2分钟

在本教程中，如何在Angular框架中整合zurb foundation。它还包括如何添加tailwind样式和Apply按钮组件，例如。

Angular是由谷歌公司编写的前端开源框架。它是基于用Typescript语言编写的组件。

Angular 13是谷歌的最新版本。

Zurb Foundation是一个响应式移动优先的CSS框架，像Bootstrap、Bulma、Angular material和Tailwind CSS。

首先输入下面的命令来检查angular cli是否已经安装。

ng --version

如果出现 "未找到ng命令 "的错误，你需要安装ng命令，它是一个Angular CLI，可以用原型文件夹结构创建一个Angular应用程序。

首先，使用下面的命令安装Angular CLI。

npm install -g @angular/cli

它在全局范围内安装了angular cli，ng命令现在可以工作了。

使用下面的命令来检查angular cli是否安装正确。

B:\blog\nodejsless>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.3
@angular-devkit/core         13.0.3
@angular-devkit/schematics   13.0.3
@angular/cli                 13.0.3
@schematics/angular          13.0.3

下一步是创建一个Angular应用程序

ng new angular-zurb-app

用默认设置创建一个应用程序，并创建一个具有所需依赖性的应用程序蓝图。

一旦应用程序创建完毕，请运行该应用程序

npm run start 
(or)
ng serve

ngx-foundation是foundation CSS的一个npm库封装器。

首先，将ngx-foundation安装到angular应用程序中

npm i ngx-foundation

下一步是整合样式。

如果你的应用程序使用CSS，你必须在index.html中包含以下CSS。

包括来自CDN URLs的 foundation.min.js 和 ngx-foundation.min.css URLs。

index.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.4/js/foundation.min.js" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/ngx-foundation@1.0.8/dist/css/ngx-foundation.min.css" rel="stylesheet">

如果你的应用程序使用scss，以下步骤请将ngx-foundation的scss文件导入src/styles.scss中。

@import "~ngx-foundation/assets/scss/main";

这样就完成了在angular应用程序中的样式配置。

Zurb foundation在angular模块中提供了每个UI组件。

让我们来讨论一下如何在应用程序中添加一个 foundation 按钮。

按钮的样式被包裹在ButtonModule 。让我们在Angular应用程序中导入ButtonModule 。app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonsModule } from 'ngx-foundation';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ButtonsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来在app.component.html中添加按钮代码。

<button type="button" class="button primary" >
  button
</button>

它将在页面上显示基础按钮。

总结

一步一步的教程解释了关于

  • 安装Angular 13 cli
  • 创建一个新的angular应用程序
  • 将ngx-foundation集成到angular应用程序中
  • 配置基金会的CSS/scss样式
  • 导入基础模块
  • 地基按钮示例
avatar
文章
阅读
粉丝