集成 Kendo UI for Angular 2 控件
2016-09-17 02:40
555 查看
伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用。
官方站点:Kendo UI for Angular 2
Kendo UI for Angular 被打包成独立的多个 NPM package,在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想访问它,你需要一个激活的 Telerik account , 如果你现在还没有这个账号,可以到这里创建一个,这是免费的。这些包在 @progress 之下。例如,Grid 控件包的名字是 @progress/kendo-angular-grid.
NPM 将会询问你的 Telerik 账号和邮件,在 Username 中输入你的用户名 (如果你的用户名是一个邮件地址,仅仅输入 @ 之前的部分),Password 就是你的 Telerik 账号口令。
输出结果应该类似下面的输出。
在你的项目根目录中,执行下面的命令
稍等一会,如果 NPM 正常完成了安装,这个包和它所依赖的包将会被安装到你的项目中。
然后,导入组件到你的项目中,假设你正在使用 Angular 2 官方提供的 5 分钟快速上手。如果你还没有这个项目,可以访问这里:https://github.com/telerik/kendo-angular2-quickstart
修改一下 app.module.ts 文件,如下所示。
然后,修改 app.component.ts,添加一个按钮。
这里,我们简单一点,直接在 Component 中使用 StyleUrls 来引入样式。
当样式到位之后,你的应用看起来应该如下所示了。
按钮被完全支持了,并且看起来很气派!
官方站点:Kendo UI for Angular 2
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 分钟快速上手。如果你还没有这个项目,可以访问这里:https://github.com/telerik/kendo-angular2-quickstart
修改一下 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: ` <h1>My First Kendo UI Angular 2 App</h1> <button kendoButton (click)="onButtonClick()" [primary]=true>My Kendo UI Button</button> ` }) 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: `<h1>My First Kendo UI Angular 2 App</h1> <button kendoButton (click)="onButtonClick()" [primary]=true >My Kendo UI Button</button> `, }) export class AppComponent { onButtonClick() { alert('Hello from Kendo UI!'); } }
当样式到位之后,你的应用看起来应该如下所示了。
按钮被完全支持了,并且看起来很气派!
相关文章推荐
- Kendo UI for Angular 2 控件
- Angular学习笔记之集成三方UI框架、控件的示例
- 线程访问UI控件和Control.CheckForIllegalCrossThreadCalls属性
- Kendo UI Grid For MVC 绑定对象集合
- android studio for android learning (二十七) UI控件动态加载机制浅析
- 【MVC】AngularJs+KendoUI开发报表Demo(导出Excel和折线图)
- 知名界面开发控件Kendo UI Professional Q3 2015 SP1正式发布[附下载]
- CKEditor for ASP.NET(2)——控件集成指南
- Undefined symbols for architecture i386: "_fwrite$UNIX2003",在集成环信SDK,UI的时候遇到的问题总结
- Telerik UI for ASP.NET AJAX控件汉化方法
- angular-ui-tree 控件使用
- Kendo UI PanelBar For MVC 生成下拉菜单
- Kendo Ui 中日期控件DatePicker显示格式更改
- 一组优秀的 for .NET Winform UI控件——DotNetMagic最新版本2.3,推荐使用
- Kendo UI for ASP.NET MVC 的一些使用经验
- Kendo Ui 中日期控件DatePicker显示格式更改
- iOS开发UI— QQ好友列表(处理头部控件的点击)viewForHeaderInSection:
- kendo ui grid只需要更新按钮分页控件不需要
- Kendo UI for ASP.NET MVC 的一些使用经验(转)
- angular下自动补全控件ui.bootstrap.typeahead