博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
集成 Kendo UI for Angular 2 控件
阅读量:4632 次
发布时间:2019-06-09

本文共 2384 字,大约阅读时间需要 7 分钟。

伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用。

官方站点:

Kendo UI for Angular 被打包成独立的多个 NPM package,在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想访问它,你需要一个激活的 Telerik account , 如果你现在还没有这个账号,可以到这里,这是免费的。这些包在 @progress 之下。例如,Grid 控件包的名字是 @progress/kendo-angular-grid.

安装

为了在你的机器上启用 Progress registry,你应该关联 @progress 到 registry URL 上,在命令行终端中,执行下面的命令。

npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

NPM 将会询问你的 Telerik 账号和邮件,在 Username 中输入你的用户名 (如果你的用户名是一个邮件地址,仅仅输入 @ 之前的部分),Password 就是你的 Telerik 账号口令。

验证

如果上面的命令成功执行了,你应该可以安装 Kendo UI 的 NPM Package 了,可以先查询一下 Grid  控件的版本进行检查。

npm view @progress/kendo-angular-grid versions

输出结果应该类似下面的输出。

>npm view @progress/kendo-angular-grid versions[ '0.2.1', '0.2.2', '0.3.0', '0.3.1' ]

将组件添加到你的项目中

Kendo UI for Angular 2 的组件被组织为多个 NPM Package。它们的命名规则为 @progress/kendo-angular-grid@progress/kendo-angular-inputs 等等。我们先添加 Buttons 的组件包。

在你的项目根目录中,执行下面的命令

npm install -S @progress/kendo-angular-buttons

稍等一会,如果 NPM 正常完成了安装,这个包和它所依赖的包将会被安装到你的项目中。

然后,导入组件到你的项目中,假设你正在使用 Angular 2 官方提供的 5 分钟快速上手。如果你还没有这个项目,可以访问这里:

修改一下 app.module.ts 文件,如下所示。

import { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { ButtonsModule } from '@progress/kendo-angular-buttons';import { AppComponent }  from './app.component';@NgModule({  imports: [ BrowserModule, ButtonsModule ],  declarations: [ AppComponent ],  bootstrap: [ AppComponent ]})export class AppModule { }

然后,修改 app.component.ts,添加一个按钮。

import { Component } from '@angular/core';@Component({    selector: 'my-app',    template: `    

My First Kendo UI Angular 2 App

`})export class AppComponent { onButtonClick() { alert('Hello from Kendo UI!'); }}

添加样式

可以有多种方式将 Kendo UI 的 theme 包含到项目中,我们建议使用 Webpack 和 Sass loader,这种方式支持使用 Sass 变量来定制 Kendo Ui 的 theme。

这里,我们简单一点,直接在 Component 中使用 StyleUrls 来引入样式。

import { Component } from '@angular/core';@Component({    selector: 'my-app',    styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css' ], // load the button theme    template: `

My First Kendo UI Angular 2 App

`,})export class AppComponent { onButtonClick() { alert('Hello from Kendo UI!'); }}

当样式到位之后,你的应用看起来应该如下所示了。

 

按钮被完全支持了,并且看起来很气派!

 

转载于:https://www.cnblogs.com/haogj/p/5877829.html

你可能感兴趣的文章
Lua中metatable和__index的联系
查看>>
我理解的软件开发流程
查看>>
什么是ODBO---OLE DB for OLAP
查看>>
vue货币格式化组件、局部过滤功能以及全局过滤功能
查看>>
【String,StringBuffer和StringBuilder区别】
查看>>
hdu 2454 Degree Sequence of Graph G
查看>>
简单工厂模式
查看>>
利用 UltraEdit 重新排版 XML 结构数据
查看>>
How to perform validation on sumbit only
查看>>
程序员的自我修养
查看>>
cocos2dx-lua调用C++
查看>>
react router 4.0以上的路由应用
查看>>
18B20驱动小经验
查看>>
Apache中的gzip压缩作用及配置
查看>>
length
查看>>
模板小例子
查看>>
std::shared_ptr
查看>>
WSAStartup
查看>>
树状数组
查看>>
BZOJ 3093: [Fdu校赛2012] A Famous Game
查看>>