集成 Kendo UI for Angular 2 控件
伴随着 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.
安装
为了在你的机器上启用 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 themetemplate: `<h1>My First Kendo UI Angular 2 App</h1><buttonkendoButton(click)="onButtonClick()"[primary]=true>My Kendo UI Button</button> `,}) export class AppComponent {onButtonClick() {alert('Hello from Kendo UI!');} }
当样式到位之后,你的应用看起来应该如下所示了。
按钮被完全支持了,并且看起来很气派!
转载于:https://www.cnblogs.com/haogj/p/5877829.html
集成 Kendo UI for Angular 2 控件相关推荐
- iOS开发UI基础—手写控件,frame,center和bounds属性
iOS开发UI基础-手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...
- 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题
原文 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题 虽然微软宣称 Windows 10 将是最后一个 Windows 版本,但由于年代跨越 ...
- Android源码解析:UI绘制流程之控件绘制
带着问题看源码 再接再厉,我们来分析UI绘制流程最后一步绘制流程 入口ViewRootImpl.performDraw()方法 private void performDraw() {//...try ...
- Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
简单的Component代码: import { Component } from '@angular/core'; import { FormControl } from '@angular/for ...
- NoticeBoard 一个仿原生UI的消息通知控件
Android 有原生的 SnackBar ,iOS 没有与之相似的原生控件,GitHub 上好像也没有找到特别好用的开源库,于是自己写了一个模仿系统原生通知样式的易于定制的 NoticeBoard ...
- 妹子UI之自定义分页控件
妹子UI,http://amazeui.org,在这儿顺便帮他打下广告,我个人觉得比Bootstrap漂亮,于是,我就选择了基于它的UI写出来自己的分页控件. paginator.js的内容如下: ( ...
- Android UI 统一修改Button控件的样式,以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
- iOS开发UI篇—手写控件,frame,center和bounds属性
一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View ...
- [技术分享]20171130_Kendo UI _ datePicker日期控件如何只选择年,不选择月,日?
datePicker日期控件是很常用的控件,可以使用 start , depth来控制取值的范围. start ,depth可以选择的参数有month,year,decade ,century . 如 ...
最新文章
- SAP Spartacus B2B页面unit tree取数据的设计逻辑
- mysql中profile的使用
- 理解图像中的低频分量和高频分量
- 如何做肌电信号手势识别?
- JRtplib开发笔记(三):JRtplib库编程使用说明
- 状态方程简约为能控能观型
- excel冻结窗口怎么设置_Win7电脑窗口颜色怎么设置成护眼色?简单几步就能搞定...
- win10外接显示器频繁休眠
- kali实现ARP断网
- JavaScript 之 学习网站推荐 强推【javascript.info】
- 基于SSM框架社交媒体实现
- html制作windows 10,Windows 10迎来Alpha版HTML编辑器应用
- ffmpeg学习十二:滤镜(实现视频缩放,裁剪,水印等)
- 三维点云学习(6)7-3D Object Detection-KITTI object detection evaluation(2)-kitt 数据集文件分卷解压方式
- inherit和initial:两个特殊的css值
- Hash签名算法入门
- Dism命令安装组策略(gpedit.msc)
- cip核字号验证_CIP数据核字号是什么
- Python写爱心闪光动图
- 宁波送餐机器人_宁波这家酒店有了机器人服务员 卖萌、引路、送餐样样行
热门文章
- [ZZ]Map/Reduce hadoop 细节
- 同步SQL Server 2000 数据库
- 接口访问次数_系统运行缓慢,CPU 100%,Full GC次数过多,这一招帮你全搞定
- 区块链兼容以太坊智能合约
- 使用Tape和Vue Test Utils编写快速的Vue单元测试
- 自动获取mysql建表语句_脚本工具---自动解析mysql建表语句,生成sqlalchemy表对象声明...
- 计算机组成 试题,计算机组成典型试题及答案
- 腾讯云轻量应用服务器 开放端口
- (C++)1037 在霍格沃茨找零钱的两种解法
- asp java 变量_ASP_用stack变量优化Java代码, java程序包含了大量的对象 - phpStudy...