UI组件库Kendo UI for Angular入门指南教程: Button(按钮) - 入门指南

原创|使用教程|编辑:龚雪|2021-09-09 10:12:50.930|阅读 155 次

概述:本文主要介绍Kendo UI for Angular组件的按钮该如何使用,欢迎下载最新版产品体验!

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接:

Kendo UI for Angular的按钮组件提供了具有任意内容的可点击UI功能。

Kendo UI for Angular最新版工具下载

安装

使用快速设置 (Angular CLI) 或手动添加包。

使用 Angular CLI 进行快速设置

Angular CLI 支持通过 ng add 命令添加包,该命令一步执行一组其他单独需要的命令。

ng add @progress/kendo-angular-buttons

手动设置

您在安装过程中引用的所有组件都将出现在应用程序的最终包中。

为避免最终使用您实际上不需要的组件,请执行以下任一操作:

  • 使用 ButtonsModule 一次性导入所有 Buttons 组件
  • 通过将特定的 Buttons 组件添加为单独的 NgModule 来导入它。

1. 下载并安装软件包。

npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-common @progress/kendo-licensing

2. 安装后,导入所需组件的 NgModule。

要获取所有包组件,请在应用程序根或功能模块中导入 ButtonsModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule]
})
export class AppModule {
}

该包还为各个组件导出以下模块:

  • ButtonModule
  • ButtonGroupModule
  • ChipModule
  • DropDownButtonModule
  • FloatingActionButtonModule
  • SplitButtonModule

要减小应用程序的大小,请仅包含您需要的模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

// Imports the Button module
import { ButtonModule } from '@progress/kendo-angular-buttons';

// Imports the ButtonGroup module
import { ButtonGroupModule } from '@progress/kendo-angular-buttons';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [
BrowserModule, BrowserAnimationsModule,
ButtonModule, ButtonGroupModule
]
})
export class AppModule {
}

3. 您需要为Angular安装Kendo UI主题来设置组件样式。

4. 按照 Kendo UI for Angular My License 页面上的说明激活您的许可证,如果您的应用程序已包含 Kendo UI 许可文件,则可以跳过此步骤。

依赖关系

Buttons 包要求您在应用程序中安装以下对等依赖项:

  • @angular/common
  • @angular/core
  • @progress/kendo-angular-l10n
  • @progress/kendo-angular-popup
  • @progress/kendo-angular-common
  • @progress/kendo-licensing
  • rxjs

Buttons包利用了Angular动画系统,它支持一组特定的浏览器。

Kendo UI for Angular | 下载试用

Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP