開始

---

立即下載Kendo UI for Angular

本指南提供了開始使用Kendo UI for Angular buttons所需的信息——它包括可用的安裝方法、所需的依賴項(xiàng)、運(yùn)行項(xiàng)目的代碼，以及指向其他資源的鏈接。

Buttons包是Kendo UI for Angular的一部分，這是一個專業(yè)級的UI庫，包含?100多個?組件，用于構(gòu)建現(xiàn)代且功能豐富的?應(yīng)用程序。

完成本指南后，您將能夠獲得如下示例所示的最終結(jié)果。

查看源代碼：

設(shè)置Angular項(xiàng)目

在開始安裝任何Kendo UI for Angular控件之前，請確保你有一個正在運(yùn)行的Angular項(xiàng)目。不管你想要使用哪個Kendo UI for Angular包，完成組件安裝的先決條件都是一樣的，在安裝Angular項(xiàng)目的章節(jié)中有詳細(xì)描述。

安裝組件

你可以選擇使用以下兩種方式來安裝Kendo UI for Angular包和你想要應(yīng)用的樣式：

用Angular CLI快速設(shè)置

快速設(shè)置提供了一種通過ng-add命令在Angular CLI中自動添加包的方法,它適合于節(jié)省時(shí)間和精力，因?yàn)?a target="_blank">ng-add可以在一個步驟中執(zhí)行一組單獨(dú)需要的命令。

要添加Kendo UI for Angular Buttons包，運(yùn)行以下命令：

ng add @progress/kendo-angular-buttons

因此，ng-add命令將執(zhí)行如下操作：

• 將@progress/kendo-angular-buttons包作為一個依賴項(xiàng)添加到packagjson文件中。
• 在當(dāng)前應(yīng)用模塊中導(dǎo)入ButtonsModule。
• 在angular.json文件中注冊Kendo UI Default theme。
• 將所有需要的 peer dependencies添加到packag .json文件中。
• 觸發(fā)npm install來安裝主題和所有被添加的同級包。
  

手工設(shè)置

手動設(shè)置提供了更大的可見性和對Angular應(yīng)用中安裝的文件和引用的更好控制。您可以通過為每個步驟運(yùn)行單獨(dú)的命令來安裝所需的對等依賴項(xiàng)和KendoUI主題，并在應(yīng)用程序根目錄或特性模塊中導(dǎo)入所需的組件模塊。

1.運(yùn)行以下命令安裝Buttons包及其依賴項(xiàng)：

2.如果應(yīng)用程序中需要所有按鈕組件，請使用ButtonsModule一次性導(dǎo)入所有按鈕，否則只能通過添加單獨(dú)的模塊來導(dǎo)入特定的組件。

Buttons包為其組件導(dǎo)出以下單個模塊：

• 要添加所有的Buttons組件，請?jiān)诟鶓?yīng)用程序或特性模塊中導(dǎo)入ButtonsModule。

• 要添加單獨(dú)的Buttons組件，只需導(dǎo)入根應(yīng)用程序或特性模塊中需要的模塊。

3.下一步是通過安裝一個可用的Kendo UI主題- Kendo UI Default, Kendo UI Material或Kendo UI Bootstrap來樣式化組件。

3.1使用主題之前，先通過NPM安裝它的包。

• 默認(rèn)主題

npm install --save @progress/kendo-theme-default

• 引導(dǎo)主題

npm install --save @progress/kendo-theme-bootstrap

• 材料主題

npm install --save @progress/kendo-theme-material

3.2主題包安裝完成后，在工程中引用，您可以通過以下方式之一在項(xiàng)目中包含KendoU I主題：

• 通過使用外部(CDN)鏈接。
• 通過使用預(yù)編譯的CSS文件。
• 通過從SCSS源文件編譯主題。

使用組件

成功安裝Buttons包并導(dǎo)入所需模塊后，在app.component.html中添加所需組件的相應(yīng)標(biāo)簽。例如，如果需要Button組件，則添加以下代碼：

<button kendoButton>My Button</button>

通過在根文件夾中運(yùn)行以下命令來構(gòu)建并提供應(yīng)用程序。

ng serve

將瀏覽器指向http://localhost:4200，查看頁面上的Kendo UI for Angular Button組件。

激活許可證密鑰

截至2020年12月，使用任何來自Kendo UI for Angular庫的UI組件都需要一個商業(yè)許可密鑰或一個有效的試用許可密鑰，如果您的應(yīng)用程序不包含Kendo UI許可文件，請激活許可密鑰。

依賴關(guān)系

下表列出了每個包中每個Buttons依賴項(xiàng)提供的特定功能：