当前位置: 首页 > 编程日记 > 正文

集成 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

相关文章:

按钮垂直居中_带下拉按钮的动态图表

小伙伴们好啊&#xff0c;今天和大家一起分享一个图表制作的技巧&#xff0c;先来看看效果&#xff1a;这个图表里&#xff0c;其实有三个数据系列&#xff0c;分别是一深一浅两个颜色的条形图&#xff0c;再就是大大的圆圈儿&#xff0c;其实是用散点图模拟出来的。先来看数据…

第一周Access课总结

第一周Access课总结 1&#xff1a;这节课学到了什么&#xff1f; 这节课重点学了数据库是用来干什么 做什么的 老师怕我们理解不了 用了很长时间向我们举了很多的例子 让我们终于知道了数据库是用来干嘛的了 顾名思义 数据库就是存放数据的仓库 是长期存放在计算机内 有组织…

以太坊,EOS和其他DApps的总数达到2,432,但没有大规模采用

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 根据分散应用监测网站StateOfTheDApps&#xff0c;每月创建的新DApps数量的最高水平是2018年12月。去年最后一个月共有179个新的DApps上线。 以太…

docker logstash_用于监视Kubernetes和Docker的六大开源工具

Kubernetes和Docker是在DevOps圈中最常听到的两个词。Docker是一个工具&#xff0c;它使你能够以容器化的方式运行应用程序&#xff0c;Kubernetes是一个用于编排、管理容器的平台——如果你想使用Docker CLI去手动地管理数千个容器&#xff0c;这是不切实际的。然而&#xff0…

大道至简第一章读后感

当今社会&#xff0c;信息化飞速发展&#xff0c;软件的需求也越来越高&#xff0c;而《大道至简》给我们点透了编程的精义。 大道至简第一是讲的便是编程的精义&#xff0c;文章借愚公移山这个故事来阐释编程的基本思路&#xff1a;出现一个问题&#xff08;惩山北之塞&#x…

nginx resolver 指令的使用

官方解释下就是&#xff1a;反向代理的场景&#xff0c;upstream后端用域名时&#xff0c;配置resolver以便于nginx能够解析该域名 Configures name servers used to resolve names of upstream servers into addresses 官网地址&#xff1a;http://nginx.org/en/docs/http/ngx…

以太坊和EOS DApp数量上升

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 目前&#xff0c;在最受欢迎的智能合约平台以太坊和EOS上&#xff0c;每月大约有180个新的去中心化应用程序(DApps)&#xff0c;该数量处于历史最高…

转载iOS开发中常见的警告及错误

iOS警告收录及科学快速的消除方法 前言&#xff1a;现在你维护的项目有多少警告&#xff1f;看着几百条警告觉得心里烦么&#xff1f;你真的觉得警告又不是错误可以完全不管么&#xff1f; 如果你也被这些问题困惑&#xff0c;可以和我一起进行下面的操作。其实大部分的警告都是…

数学思想 —— 低维与高维的统一

在平面几何有勾股定理&#xff1a;“假设三角形ABC的两边AB、AC互相垂直&#xff0c;则有关系&#xff1a; AB2AC2BC2当我们拓展到空间&#xff0c;类比平面几何的勾股定理并研究三棱锥的侧面面积与底面面积的关系时&#xff0c;我们可得到相应结论&#xff1a;假设三棱锥A-BCD…

python键_在Python中创建键命令

我正在根据我在网上找到的一个脚本编写我自己的简单键记录器。但是&#xff0c;我正在尝试编写一个键命令&#xff0c;以便在键入此命令时记录器程序将关闭。我该怎么做&#xff1f;&#xff08;我也知道它一点也不安全&#xff0c;但这与这个程序无关&#xff09; 例如&#x…

对标以太坊的EOS再火,也拼不过InterValue的区块链4.0

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 2017年6月26日上线的数字货币EOS&#xff0c;仅用5天时间&#xff0c;就融了1.85亿美元&#xff0c;一举打破ICO的融资记录。 至2018年4月12日&a…

python中ttk和tkinter_Python tkinter与ttk日历

我正在使用 this代码在我的Tkinter上创建一个简单的日历.当我在主根窗口上放置日历时,日历显示正常.因此,我决定放置另一个按钮,它将创建一个Tkinter顶层窗口并在顶层窗口上放置另外一个日历.但这次它无法显示日历,而是它给了我这个错误,“TclError&#xff1a;无法打包. 18913…

Ubuntu dns

在Ubuntu系统网络设备启动的流程中&#xff0c;会依赖/etc/network/interface的配置文件初始化网络接口&#xff0c;所以直接在/etc/network/interface之中配置好对应的dns服务器会最先写入/etc/resolv.conf。所以我们可以在其中添加如下内容&#xff1a; dns-nameserve…

web图片识别

<!doctype html><html lang"en"><head> <meta charset"UTF-8"> <title>图像识别</title> <script src"../js/jquery.js"></script></head><body><canvas id"canv…

通俗易懂,到底什么是区块链?

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 2017年9月4日&#xff0c;中国政府正式明令禁止ICO和数字货币交易行为&#xff0c;随即关闭了多个数字货币交易所。同时政府也多次声明&#xff0…

select三级联动 怎么删除前一个的_python测试开发django57.xadmin选项二级联动

前言当我们选择项目分类的时候&#xff0c;一个项目下关联多个模块&#xff0c;同时有这两个选项框的时候&#xff0c;需要实现选中一个项目&#xff0c;模块里面自动删除出该项目下的模块&#xff0c;如下图这种解决基本思路&#xff1a;1.写个jqeury脚本监听change事件2.ajax…

安装wdcp的方法和bug

1.Wdcp安装SSH登录系统,这里讲解源码编译安装和RPM包安装两种 a.源码编译安装 下载源码包wget http://dl.wdlinux.cn:5180/lanmp_laster.tar.gz 解压并安装 tar zxvf lanmp_laster.tar.gz sh in.sh linux安装wdcp之后mysql找不到my.cnf&#xff0c;locate my-medium.cnf。 cp /…

第七周读书笔记

《深入理解计算机系统》从程序设计与性能优化的角度介绍了计算机系统&#xff0c;让我从程序员的角度了解了计算机系统&#xff0c;更深入地理解了硬件、操作系统和编译系统等对应用程序性能和正确性的影响&#xff0c;并掌握了基本的程序优化设计技术&#xff0c;为编写更高效…

是什么限制了区块链技术的应用?

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 2017年已经匆匆离去&#xff0c;回顾过去一整年&#xff0c;似乎区块链应用一直处于隐忍未发的状态&#xff0c;很多项目的落地已处于验证阶段&…

软件包管理(rpmyum)

一、rpm包管理器 rpm是一个功能强大的包管理工具&#xff0c;可用于构建&#xff0c;安装&#xff0c;查询&#xff0c;验证&#xff0c;更新和卸载软件包。 用法&#xff1a; rpm [OPTION...] 配置文件&#xff1a; /var/lib/rpm/ 已安装rpm包的元数据 选项&#xff1a; -i&am…

python yield理解_对Python中Yield的理解

看到下面这段程序的时候&#xff0c;有点不明白这个yield到底是个啥东西&#xff0c;看了网上很多的博客&#xff0c;大致理解了yield的含义&#xff0c;所以记录下来。要说yield首先要说python中的生成器&#xff0c;那么什么是生成器?假设有一个包含一百万个元素的列表&…

Linux下文件的三种时间戳

Linux下文件的三种时间标记 三种时间对应关系表 columncolumncolumn访问时间Accessatime修改时间Modifymtime状态改动时间Changectime如何查看文件文件的三种时间戳 stat filename 三种时间戳的解释 访问时间&#xff1a;读一次文件的内容&#xff0c;这个时间就会更新。比如mo…

比特币和以太坊本质有什么区别?

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 14年的时候&#xff0c;币圈 &#xff08;当时还没有链圈之说&#xff0c;链圈应该是17年的事情了&#xff0c;区块链概念的流行是15年底&#xf…

HDU1402(FFT入门)

题目链接&#xff1a;http://acm.hdu.edu.cn/status.php?userReykjavik11207&pid1402&status5 本题数据范围为5e4&#xff0c;常规方法O(n2)肯定是不行的。 FFT是离散傅里叶变换DFT的快速形式 对多项式f(x) a0 a1x a2x2 an-1xn-1&#xff0c;有两种表示法&#x…

python怎么读_如何用Python读写文件

前面我们已经介绍了很多Python相关的基础知识&#xff0c;大家是不是对Python已经有了进一步认识了呢&#xff1f;作为人工智能时代的热门编程语言&#xff0c;开始接触并学习Python的孩子越来越多&#xff0c;家长们都不想让自己的孩子落于人后&#xff0c;近期前来找陈老师咨…

什么是区块链智能合约?

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 自从2009年第一枚比特币诞生&#xff0c;九年多时间里&#xff0c;区块链技术正在被应用在人们生活的各方各面&#xff0c;从1.0时代的数字货币&…

python数据分析基础 余本国_Python数据分析基础

本书根据作者多年教学经验编写, 条理清楚, 内容深浅适中, 尽量让读者从实例出发, 结合课后练习, 少走弯路。本书涉及的内容主要包括Python数据类型与运算、流程控制及函数与类、Pandas库的数据处理与分析等。作者通过近三轮的教学&#xff0c;对Python3.x的基础知识进行了筛选和…

stm32F042 (二) 按键触发中断

已经实现GPIO口输出高低电平控制LED&#xff0c;这里实现按键触发中断来改变LED闪亮的频率&#xff0c;因为PB3连着LED&#xff0c;所以PB3的输出模式没有改变&#xff0c;随意选一个GPIO口PA7接按键产生中断。因为nucleo开发板是裸板&#xff0c;所以按键、上拉电阻是另找在面…

区块链和智能合约的关系

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 尽管比特币&#xff08;Bitcoin&#xff09;和以太坊&#xff08;Ethereum&#xff09;是经常被一起提及的两个词&#xff0c;但实际上&#xff0…

repo同步代码_iTOP-4412开发板android4.0代码下载和编译

Android4.0 源码可以从光盘&#xff0c;网盘获取稳定版本&#xff0c;也可以从 GitHub 下载我们的开发版本。GitHub 仅提供源码下载&#xff0c;不提供二进制下载&#xff0c;二进制文件存放在光盘和网盘中。基于迅为4412开发板6.3.1.1 repo 下载android 代码管理不同于 uboot,…