如何在Angular应用程序中整合kendo按钮CSS框架

迪鲁宾
154 阅读5分钟

Angular Kendo Button实例。在这个例子中，如何在Angular应用程序中整合kendo按钮CSS框架。它还包括如何在组件中使用tailwind CSS按钮。

Angular Kendo Button

  • 第1步 创建Angular应用程序
  • 第2步 启动开发服务器
  • 第3步 添加Kendo angular按钮的依赖项
  • 第4步 在Angular应用程序中添加kendo主题和样式
  • 第5步 创建一个按钮组件的例子
  • 第4步 在按钮上添加图标。
  • 第5步 带禁用的按钮。
  • 第6步 测试Angular应用程序

首先，让我们使用Angular CLI命令创建一个Angular应用程序

A:\work>ng new angular-kendo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss
CREATE angular-kendo/angular.json (3249 bytes)
CREATE angular-kendo/package.json (1077 bytes)
CREATE angular-kendo/README.md (1058 bytes)
CREATE angular-kendo/tsconfig.json (863 bytes)
CREATE angular-kendo/.editorconfig (274 bytes)
CREATE angular-kendo/.gitignore (620 bytes)
CREATE angular-kendo/.browserslistrc (600 bytes)
CREATE angular-kendo/karma.conf.js (1430 bytes)
CREATE angular-kendo/tsconfig.app.json (287 bytes)
CREATE angular-kendo/tsconfig.spec.json (333 bytes)
CREATE angular-kendo/src/favicon.ico (948 bytes)
CREATE angular-kendo/src/index.html (298 bytes)
CREATE angular-kendo/src/main.ts (372 bytes)
CREATE angular-kendo/src/polyfills.ts (2338 bytes)
CREATE angular-kendo/src/styles.scss (80 bytes)
CREATE angular-kendo/src/test.ts (745 bytes)
CREATE angular-kendo/src/assets/.gitkeep (0 bytes)
CREATE angular-kendo/src/environments/environment.prod.ts (51 bytes)
CREATE angular-kendo/src/environments/environment.ts (658 bytes)
CREATE angular-kendo/src/app/app-routing.module.ts (245 bytes)
CREATE angular-kendo/src/app/app.module.ts (393 bytes)
CREATE angular-kendo/src/app/app.component.html (23364 bytes)
CREATE angular-kendo/src/app/app.component.spec.ts (1094 bytes)
CREATE angular-kendo/src/app/app.component.ts (218 bytes)
CREATE angular-kendo/src/app/app.component.scss (0 bytes)
√ Packages installed successfully.

The file will have its original line endings in your working directory
    Successfully initialized git.

它以默认设置创建一个应用程序，并以所需的依赖关系创建一个应用程序文件夹结构。

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

npm run start 
(or)
ng serve

它运行angular应用程序并在http://localhost:4200。

添加Kendo angular按钮的依赖项

首先，安装以下npm依赖项:

  • @progress/kendo-theme-default:默认主题必须使用npm命令安装
  • @progress/kendo-theme-bootstrap: 与bootstrap相关的主题，如果你需要主题和组件的bootstrap相关样式，请安装。

运行下面的命令，在应用程序中进行安装。

A:\work\angular-kendo>npm install -S @progress/kendo-theme-bootstrap

added 4 packages, removed 1 package, and audited 1056 packages in 11s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

A:\work\angular-kendo>npm install -S @progress/kendo-theme-default

up to date, audited 1056 packages in 3s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

接下来，将@progress/kendo-angular-buttons 作为依赖项（-S）安装到angular应用程序中 接下来，也要安装它

A:\work\angular-kendo>npm install -S @progress/kendo-angular-buttons

added 25 packages, and audited 1052 packages in 16s

91 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

以上所有的npm安装命令都会更新到package.json并安装到node_module项目中。

package.json

"dependencies": {

    "@progress/kendo-angular-buttons": "^6.4.1",
    "@progress/kendo-theme-bootstrap": "^4.43.0",
    "@progress/kendo-theme-default": "^4.43.0",
  },

在Angular应用程序中添加kendo主题和样式

打开angular应用程序src文件夹中的style.css文件。

更新sass样式，导入kendo主题默认的sass样式style.scss。

@import "@progress/kendo-theme-default/scss/all";

它导入了所有的主题和组件样式。

这是一个重要的步骤，如果它没有正确更新，Kendo的样式就不会显示组件和主题。

Kendo在ButtonsModule ，为按钮提供组件和方向。

让我们在app.module或你的子模块中导入ButtonsModule ，这样它就可以在angular组件中使用所有的组件和指令。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

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

@NgModule({
  declarations: [
    AppComponent,
    ButtonsExampleComponent
  ],
  imports: [

    ButtonsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

创建一个按钮组件的例子

让我们创建一个新的组件buttons-example ，使用ng g component command.

A:\work\angular-kendo>ng g component buttons-example
CREATE src/app/buttons-example/buttons-example.component.html (30 bytes)
CREATE src/app/buttons-example/buttons-example.component.spec.ts (683 bytes)
CREATE src/app/buttons-example/buttons-example.component.ts (311 bytes)
CREATE src/app/buttons-example/buttons-example.component.scss (0 bytes)
UPDATE src/app/app.module.ts (509 bytes)

让我们看看组件 让我们用纯HTML创建一个按钮

kendoButton 是一个Angular指令，添加了kendo按钮样式。

使用点击事件语法添加了点击事件绑定。

Button

在typecript组件中，添加了绑定方法。

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

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

  constructor() { }

  ngOnInit(): void {
  }
  onClick() {
    alert("Kendo Button click example");
  }
}

给按钮添加图标

给按钮添加图标是很直接的。

它提供了两个属性来添加图标。

icon iconClass ：属性提供了配置第三部分图标库的功能。

   Delete

这里delete 是一个来自kendo图标库的内置图标类。

你也可以使用iconClass ，添加令人敬畏的字体和材料图标。

首先，在index.html中导入库的css文件

对于一个按钮，使用iconClass

Edit

这里有一个example to change icon on button click 。

这个例子默认了一个带有edit 图标和文本的按钮，当点击它时，按钮的文本和图标会变成delete 。

<p>buttons  example works!</p>


<div>
    <h1> Icons button click event</h1>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="'delete'">Delete</button>


    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'far fa-edit'">Edit</button>
    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'fas fa-edit'">Two</button>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="isEdit?'delete': 'edit'">{{isEdit?"delete":
        'edit'}}</button>
</div>

而组件的代码

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

@Component({
  selector: 'app-buttons-example',
  templateUrl: './buttons-example.component.html',
  styleUrls: ['./buttons-example.component.scss']
})
export class ButtonsExampleComponent implements OnInit {
  public isEdit: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }
  onClick() {
    this.isEdit = true;
  }
}

如何在Angular中禁用kendo按钮？

disabled 属性使得Angular中的按钮可以被启用或禁用。

    Disabled

下面是一个Angular kendo按钮的完整例子。

buttons-example.component.html

<h1>Kendo Angular Button examples</h1>

<div>
    <h4> Simple primary button click event</h4>
    <button kendoButton (click)="onClick()" [primary]="true">One</button>
    <button kendoButton (click)="onClick()" [primary]="false">Two</button>
</div>

<div>
    <h4> Icons button click event</h4>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="'delete'">Delete</button>

    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'far fa-edit'">Edit</button>
    <button kendoButton (click)="onClick()" [primary]="true" [iconClass]="'fas fa-edit'">Two</button>
    <button kendoButton (click)="onClick()" [primary]="true" [icon]="isEdit?'delete': 'edit'">{{isEdit?"delete":
        'edit'}}</button>

</div>

<div>
    <h4> Simple primary button disabled </h4>
    <button kendoButton (click)="onClick()" [disabled]="isDisabled">Disabled</button>
    <button kendoButton (click)="onClick()" [primary]="true">Disable other button</button>
</div>

buttons-example.component.ts

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

@Component({
  selector: 'app-buttons-example',
  templateUrl: './buttons-example.component.html',
  styleUrls: ['./buttons-example.component.scss']
})
export class ButtonsExampleComponent implements OnInit {
  public isEdit: boolean = false;
  public isDisabled: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }
  onClick() {
    this.isEdit = true;
    this.isDisabled = true;

  }
}

结论

如何在Angular应用程序中添加kendo按钮，并有多个关于图标和图标类禁用的例子，这是一个循序渐进的教程。

avatar
文章
阅读
粉丝